教程  微信小程序之WXML讲解--数据绑定、渲染、模版、引用等

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。类似html

借助wxml提供的组件我们可以实现文字的嵌入，图片的嵌入，视频的嵌入，各种能力的嵌入等等

1.wxml语法规则

· 所有的元素都需要闭合标签,类似

· 所有的元素都必须正确嵌套，符合层级关系

· 属性值必须使用引号包围

· 标签必须使用小写(虽然编辑器能识别，但是有的场合识别不出来)

· wxml中连续多个空格会被合并为1个空格

<text>Hello World</text>
<view><text>Hello World</text></view>
<text id="text1">myText</text>
<text>Hello       world</text> <!--渲染的时候会被处理成一个空格-->

· 由于某些属性几乎被所有的组件使用，所以这些属性被抽离出来，形成组件的共同属性

2.数据绑定

用户界面呈现会因为时刻不同，数据发生变化而有所不同，也会因为用户操作发生了动态改变，这就要求程序的运行过程中，要有动态的去改变渲染界面的能力,从而达到更好的用户体验。

在index.wxml中可以看到多处类似下面的代码：

<text class="user-motto">{{motto}}</text>

在代码中有一个由大括号括起来的内容{{motto}} 是微信中的数据绑定，在运行index页面时，这个内容会被index.js中的page函数中定义的data属性中的motto内容代替。看看下面的图解。

· wxml 的数据均来自对应的Page的data

· 数据绑定使用的是Mustache 语法(双大括号)

<view>{{val1}}</view>
<view>{{val2}}</view>
<view>{{val3}}</view>
<view>{{val4}}</view>

在JS文件目录中

Page({
  data:{
  var2: undefined,
  var3: null,
  var4: "var4"
 }
})

渲染的结果就是:

null

var4

注意: 在小程序中没有被定义或设置为undefined的变量不会被同步到wxml中去

(1)数据绑定之内容绑定

数据绑定区分大小写

<text>{{demoText}}</text>

Page({
  data:{
    demoText:"Here is Demo Text"
   }
})

渲染的效果就是Here is Demo Text

特别注意: 内容绑定的参数是大小写敏感的

(2)组件属性绑定（需要在双引号之内）

组件属性绑定: 可以实现动态属性

<view id="item-{{id}}"></view>

Page({
  data:{
    id:0
  }
})

渲染结果:

<view id="item-0"></view>

借助动态属性，可以实现如下操作

(1) 动态样式

(2) 动态宽度

(3) 动态长度

(4) .....

(3)控制属性(需要在双引号之内)

<view wx:if="{{condition}}"></view>

Page({
  data: {
    condition: true
  }
})

(4)关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"></checkbox>

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

(5) 逻辑语法

通过在{{}}内包含运算符进行简单的计算

(1) 三元运算符

(2) 算数运算符

(3) 字符串运算符

(4) 路径运算符

三元运算符：

<view class="{{is_top?'top-cls':'sub-cls'}}">Hi</view>

算数运算：

标签内支持简单的加减乘除

<view> {{a+b}}+{{c}}+d</view>

Page({
  data:{
    a:1,
    b:2,
    c:3
   }
})

字符串运算：

标签内支持对字符串的操作

<view>{{"hello"+name}}</view>

Page({
  data:{
    name:"MIMI"
  }
})

数据路径运算：

WXML支持对对象，数组，路径操作，读取内部的数据

<view>{{object.key}}
{{array[0]}}
</view>

Page({
      data:{
         object:{
             key:"Hello"
            },
         array:['MiNA']
     }
})

(6)数据对象组合---数组：

WXML 可以在Mustache内进行数组的组合

 <view wx:for="{{[zero,1,2,3,4]}}">{{item}}</view>

Page({
   data:{
        zero:0
   }
})

wxml 可以在双括号内进行对象的组合：

 <template is="objectCombine" data="{{for:a,bar:b}}"></template>

Page({
          data:{
             a:1,
             b:2
          }
})

最终合成的对象是 {for:1,bar:2}

另外一种比较常用的方法时用运算符 ... 来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
}

最终组合成的对象是 {a:1,b:2,c:3,d:4,f:5}

· 如果组合时，出现了相同的变量名，后面的变量会覆盖前面的变量

· 花括号和引号之间如果有空格，空格最终将被解析为字符串

3.条件渲染

在小程序的不同生命周期和不同的用户操作情况下，可能需要为用户展示和响应不同的内容，在这个时候，我们可以借助条件渲染来展示内容

1）控制单个组件的显示

在组件上加入wx:if来控制组件的显示和隐藏

<view wx:if="{{condition}}">123</view>

当wx:if对应的值为true的时候，对应组件会进行渲染

当wx:if对应的值为false的时候，对应的组件不会进行渲染

else 属性

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>

wx:if 和hidden区别

· wx:if 根据值来判断组件是否需要渲染进入页面

· hidden:始终都会进行渲染,但是会根据其值决定是否在页面中展示

· 如果组件的显示切换频繁，就用hidden,反之则使用wx:if

2）block  wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

4.列表渲染

所谓的列表渲染，就是对于列表数据的展示。其使用场景大多为商品列表页面、购物车页面、收藏列表等页面，应用广泛。微信小程序实现列表展示的方式其实就是用for循环来循环生成相对应的item布局，使用 wx:for 重复渲染组件。

· 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item；

· 使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名。

wx:for 一般有两种使用场景，一种是配合view来使用，另一种则是搭配block来使用。这两者的区别就在于block不会被渲染，而使用view组件则会多渲染一次，两者可实现同样的效果，根据不同的需求选择。

<view wx:for="{{array}}" wx:for-index="position" wx:for-item="itemName"></view>
<block wx:for="{{array}}"></block>

例如：

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

page({
    data:{
        array:[{
            message:'foo'
        },{
            message:'bar'
        }]
    }
})

使用 wx:for-item 可以指定数组当前元素的变量名， 

使用 wx:for-index 可以使用数组当前下标的变量名；

<view wx:for="{{array}}" wx:for-item="idex" wx:for-index="itemname">
    {{idex}}:{{itemname.message}}
</view>

wx:for 也可以嵌套，下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view>
  </view>
</view>

下面将产品item列表进行渲染，并改为数据绑定形式。

home.js

//在data中添加 goods数据
goods:[
    {
        "imagePath":"http://img02.tooopen.com/images/tooopen1.jpg",
        "good-name":"是滴是滴所多所多所多所多所多所多所多所",
        price:34,
        "original-price":2222,
        "had-sale":34
    },
    {
        "imagePath":"http://img02.tooopen.com/images/tooopen2.jpg",
        "good-name":"是滴是滴所多所多所多所多所多所多所多所",
        price:34,
        "original-price":2222,
        "had-sale":34
    }

home.wxml

//修改goodsItem组件
<view class='goods' wx:for="{{goods}}">
   <view class="goods-item">
        <image src="{{item.imagePath}}" />
        <view class="goods-desc">
            <view class="goods-name">{{item.good_name}}</view>
            <view>
                <text class="momey-tag">￥</text>
                <text class="price">{{item.price}}</text>
                <text style="text-decoration: line-through" class="original-price">￥{{item.original_price}}</text>
            </view>
            <view class="had-sale">
                已售
                <text>{{item.had_sale}}</text>
            </view>
            <view>
                <span class="to-purchase">立即抢购</span>
            </view>
        </view>
  </view> 
</view>

效果如下：

在渲染时，可能会面临要同时循环多个元素，那么可以使用辅助标签block来循环

 <block wx:for="{{forText}}"wx:key="index">
     <view>这个就是序号:{{index}}</view>
     <view>这个就是值:{{item}}</view>
  </block>

Page({
  data: {
    forText:[1,2,3,4,5,6]
  }
})

修改循环变量名

wx:for-index="自定义序号名称", wx:for-item="自定义序号值"

  <block wx:for="{{forText}}" wx:key="index" wx:for-index="xuhao" wx:for-item="firstzhi">
    <view>这个就是序号:{{xuhao}}</view>
    <view>这个就是值:{{firstzhi}}</view>
  </block>

wx:key用法

在未使用wx:key比如数据顺序发生了变更，会改变数据的结构，导致重新渲染。要是使用了wx:key就会在原数据的情况下渲染数据。提升渲染效率。

5.使用模版

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text>{{index}}: {{msg}}</text>
    <text>Time: {{time}}</text>
  </view>
</template>

· 每个模板都需要一个name属性，作为模板的名字

· template标签内部包含的是具体的模板内容，标签内借助双大括号来进行数据绑定

使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<template is="msgItem" data="{{...item}}" />

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

模板之间传值可以用{{...xxxx}}这样能把对象完全展开。

模板的作用域

模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。

6.wxml引用

WXML 提供两种文件引用方式import和include。

1）import

import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml" />
<template is="item" data="{{text: 'forbar'}}" />

import 的作用域

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

<!-- A.wxml -->
<template name="A">
  <text>A template</text>
</template>
<!-- B.wxml -->
<import src="a.wxml" />
<template name="B">
  <text>B template</text>
</template>
<!-- C.wxml -->
<import src="b.wxml" />
<template is="A" />
<!-- Error! Can not use tempalte when not import A. -->
<template is="B" />

2）include

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如：

<!-- index.wxml -->
<include src="header.wxml" />
<view>body</view>
<include src="footer.wxml" />
<!-- header.wxml -->
<view>header</view>
<!-- footer.wxml -->
<view>footer</view>

7.事件

关于wxml中用到的事件请参考官方文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html 

参考网址：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/ 

http://www.php.cn/xiaochengxu-408840.html 

https://www.jianshu.com/p/9d06d41322b0

https://www.jianshu.com/p/2057d88f0920

https://blog.csdn.net/qiphon3650/article/details/79558105 

https://blog.csdn.net/lecepin/article/details/54615553 

转载请注明： ITTXX.CN--分享互联网 » 微信小程序之WXML讲解--数据绑定、渲染、模版、引用等

最后更新：2020-04-18 00:23:21