微信小程序学习记录（2）视图层之wxml（数据绑定大括号，wx:for,wx:if）

1，数据绑定

---

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

用双大括号将变量包起来，可以作用于             (参考：https://www.w3cschool.cn/weixinapp/weixinapp-data.html)

内容

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

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

组件属性（需要在双引号之内）

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

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

控制属性（需要早双引号之内）

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

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

关键字（需要在双引号之内）

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

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

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

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

运算

做运算时必须要加{{}}，否则会按普通字符串解析

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算数运算

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

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

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

逻辑判断运算

<view wx:if="{{legth>1}}"><view>

字符串运算

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

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

数组运算

<view wx:for={{zero,1,2,3}}><view>

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

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

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

等同于

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

2,列表渲染wx:for

---

wx:for ：用来遍历

三个重要的构成

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

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

wx:key  :需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

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

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

<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>

条件渲染wx:if

---

可以用wx:if来判断是否，也可以用wx:elif和wx:else来添加一个else块:

wx:if  vs  hidden

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

条件切换时销毁或重新渲染

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

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

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

3,模板（template）

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

模板如何使用？ 1，定义模板  2，使用模板

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

<template name="msgitem">
    <view>
        <text>{{index}}:{{msg}}</text>
        <text>Time:{{time}}</text>
    </view>
</template>

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

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

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

模板的作用域：模板拥有自己的作用域，只能使用data传入的数据