框架视图层（二）

wxml

数据绑定
1.简单绑定。Mustache 语法双括号包裹变量，组件属性、控制属性、关键字变量绑定需要在双引号之内
2.运算。在{{}}中进行运算，三元、算术运算、逻辑判断、字符串运算、数据路径运算。
3.组合。组成新的对象和数组

      数组
      <view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
          Page({
              data: {
                  zero: 0
              }
           })
      对象
    
    1.<template is="objectCombine" data="{{for: a, bar: b}}"></template>
        Page({
            data: {
              a: 1,
              b: 2
            }
      })
    2....三点展开语法
    <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
        Page({
          data: {
            obj1: {
                a: 1,
                b: 2
            },
            obj2: {
              c: 3,
              d: 4
            }
        }
    })
    3.同名变量覆盖、依靠键值直接获取
    <template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
          Page({
            data: {
              obj1: {
                  a: 1,
                  b: 2
              },
            obj2: {
                b: 3,
                c: 4
            },
            a: 5
        }
      })
      最终data = {a: 5, b: 3, c: 6}

花括号和引号中出现空格，将会解析生字符串

列表渲染

• 默认当前项下标index,数组当前项的变量名为item，可以使用wx:for-item，wx:for-index 指定，此循环语法可以额嵌套

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

• block wx:for

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

• wx:key unique唯一字符串，保证动态改变或者追加时，每个组件的状态都不改变。*this代表循环中的item，必须唯一

页面  wxml
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

js wxjs
Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },
  switch: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(e){
    this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

注意

1.wx:for 参数为字符串，将默认为字符串数组
<view wx:for="array">  === <view wx:for="{{['a','r','r','a','y']}}">
2.花括号和引号之间有空格，将被解析为字符串
<view wx:for="{{[1,2,3]}} "> === <view wx:for="{{[1,2,3] + ' '}}" >

条件渲染

• wx:if

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

• block wx:if

**block是包装元素，不是组件，只能接受控制属性**
<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

wx:if与hidden对比：判断条件切换频繁，使用hidden

模板（类似于layout）

• 定义模板

使用name属性定义模板
<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

• 使用模板

使用is属性将模板声明并且传入需要的数据
<template is="msgItem" data="{{...item}}"/>
is属性还可以判断使用哪些模板
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>

事件

• 概念，同js事件绑定
• 使用方式

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

Page中存在同名处理函数
Page({
  tapName: function(event) {
    console.log(event)
  }
})

• 详解（不在冒泡函数列表、无特殊说明都属于非冒泡）
  • 冒泡，当一个组件上的事件被触发后，该事件会向父节点传递。
  • 非冒泡，当一个组件上的事件被触发后，该事件不会向父节点传递。
• 事件绑定、冒泡
  • 同组件属性key=value格式
  • key以bind、catch开头。直接连接或者使用bind:tag,catch阻止冒泡事件
  • value 对应page中的同名函数

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

• 事件捕获
  • capture-bind、capture-catch 后者直接取消捕获和冒泡

在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。
<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

• 事件对象（参数属性列表）

引用（文件载入）

• import

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

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

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