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>
