[移动开发]13_从零构建微信小程序项目_数据交互_WXML语法详解

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

一、数据绑定

????????WXML 中的动态数据均来自对应 Page 的 data。

简单绑定

????????数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

组件属性(需要在双引号之内)

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

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

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

<view wx:if="{{condition}}"> 
  如果if条件为真,view组件才会展示;
</view>

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

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

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

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

????????注：js的data里面的变量名，不能是关键字；如果插值表达式里面写了true或false，那么就是boolean值；

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

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

运算

????????可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

三元运算

<!-- ?前面用来定义条件,如果条件为真,返回第一个值;否则返回第二个值 -->
<view wx:if="{{5 < 3 ? true : false}}"> 
  Hello 
</view>

算数运算

<!-- 写在插值表达式里面的+号是运算的, 写在组件里面的+号是字符串 -->
<view> {{a + b}} + {{c}} + d </view>

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

????????view中的内容为 3 + 3 + d。

逻辑判断

<view wx:if="{{length > 5}}"> 
  数据超过5个;
</view>

字符串运算

<!-- hello 张三 -->
<view>{{"hello" + name}}</view>

<!-- hello + 张三 -->
<view>"hello" + {{name}}</view>

Page({
  data:{
    name: '张三'
  }
})

数据路径运算

<!-- 之前的name,a,b,c,condition都是简单类型的数据,字符串、数值、布尔类型值 -->
<!-- 但是数组和对象是复杂类型,需要处理 -->
<view>{{object.key}} {{array[1]}}</view>

Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA','小黑']
  }
})

二、列表渲染

wx:for

????????在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

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

<view wx:for="{{names}}">
  <!-- 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item -->
  数组下标{{index}}: {{item}}
</view>

---------------------------------------
<view wx:for="{{stus}}">
  第{{index + 1}}个学生的信息: {{item.stuId}}、{{item.stuName}}、{{item.stuSex}}
</view>

---------------------------------------
<view wx:for="{{students}}">
  第{{index + 1}}个学生的信息: 
    {{item.stuId}}、{{item.stuName}}、{{item.stuSex}}
  <view>
    爱好:
    <text wx:for="{{item.hobby}}">{{item}}  </text>
  </view>
</view>

data: {
    names:["张三","李四","王武","马六"],
    stus:[
      {
        stuId:10001,
        stuName:"张三",
        stuSex:"男"
      },
      {
        stuId:10002,
        stuName:"李四",
        stuSex:"女"
      },
      {
        stuId:10003,
        stuName:"王武",
        stuSex:"男"
      }
    ],
    students:[
      {
        stuId:10001,
        stuName:"张三",
        stuSex:"男",
        hobby:["足球","篮球","羽毛球"]
      },
      {
        stuId:10002,
        stuName:"李四",
        stuSex:"女",
        hobby:["看书","跑步"]
      },
      {
        stuId:10003,
        stuName:"王武",
        stuSex:"男",
        hobby:["玩游戏","看电影","睡觉"]
      }
    ]
  },

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

????????使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{students}}" wx:for-index="idx" wx:for-item="stu">
  第{{idx + 1}}个学生的信息: 
    {{stu.stuId}}、{{stu.stuName}}、{{stu.stuSex}}
  <view>
    爱好:
    <text wx:for="{{stu.hobby}}" wx:for-item="hobby">{{hobby}}  </text>
  </view>
</view>

block wx:for

?????????? ?类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。例如：

<!-- <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 -->
<block wx:for="{{stus}}">
  <view>
    第{{index + 1}}个学生的信息:
  </view>
  <view>
    {{item.stuId}}、{{item.stuName}}、{{item.stuSex}}
  </view>
</block>

wx:key

????????如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

????????wx:key 的值以两种形式提供:
?? ??? ?????????1、字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
?? ??? ?????????2、保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

????????当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

????????如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

<view wx:for="{{students}}" wx:for-index="idx" wx:for-item="stu" wx:key="stuId">
  第{{idx + 1}}个学生的信息: 
    {{stu.stuId}}、{{stu.stuName}}、{{stu.stuSex}}
  <view>
    爱好:
    <text wx:for="{{stu.hobby}}" wx:for-item="hobby" wx:key="*this">{{hobby}}  </text>
  </view>
</view>

三、条件渲染

wx:if

????????在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

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

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

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

<view wx:if="{{score >= 90}}">
  成绩优异,奖励iphone一部;
</view>
<view wx:elif="{{score >= 70}}">
  成绩良好,奖励小米一部;
</view>
<view wx:elif="{{score >= 60}}">
  成绩及格,不见不罚;
</view>
<view wx:else>
  成绩不及格,罚写代码10万行;
</view>

block wx:if

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

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

wx:if vs hidden

????????因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

????????同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

????????相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

????????一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

<view wx:if="{{score >= 60}}">
  wx:if条件满足,显示;不满足隐藏;
</view>

<view hidden="{{score >= 60}}">
  hidden条件满足,隐藏;不满足显示;
</view>

四、模板

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

????????我们要把精彩文章这一小块作为一个模版;以后定义这样的结构，直接引入模版即可；

定义模板

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

????????1、在app.json的pages里面定义"pages/template/articleTemplate/articleTemplate"

????????2、在articleTemplate.wxml里面定义template组件，给其添加name，并自定义名称articleTemplate

????????3、在组件中写相应的结构（从之前的代码中复制），把里面的静态文本都替换为插值表达式；

????????4、在articleTemplate.wxss里面定义结构相关样式;
?? ??? ?????????注：之前页面中的样式可以删除了；因为后面都是引入模版的样式；

<!-- 文章列表结构模版 -->
<template name="articleTemplate">
  <!-- 一个文章列表结构,肯定对应的是一个对象数据,所以插值表达式在引用数据的时候,使用对象写法 -->
  <!-- 模版中的动态数据,只需要使用对象的key即可 -->
  <view class="articleView">
    <view>
      <image src="{{imgUrl}}"></image>
    </view>
    <view class="articleContent">
      <view class="articleTitle">
        {{title}}
      </view>
      <view class="articleDesc">
        {{desc}}
      </view>
    </view>
  </view>
</template>

.articleView {
  display: flex;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #F1F1F1;
}

.articleView image{
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
}

.articleTitle{
  font-size: 28rpx;
  font-weight: bold;
  line-height: 50rpx;
}

.articleDesc{
  font-size: 26rpx;
  color: #A9A9A9;
  line-height: 35rpx;
}

使用模板

????????1、import可以在该文件中使用目标文件定义的template，在index.wxml中使用import引入articleTemplate模版；

<!-- 引入模版 -->
<import src="/pages/template/articleTemplate/articleTemplate.wxml"></import>

????????2、在index.wxss里面使用@import引入模版所需样式；

/* 引入模版所需样式 */
@import '/pages/template/articleTemplate/articleTemplate.wxss';

????????3、使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入；

<!-- 文章列表 -->
<!-- 使用模版 -->
<block wx:for="{{articleArray}}" wx:for-item="article" wx:key="*this">
    <template is="articleTemplate" data="{{...article}}"></template>
</block>