一、模板
WXML提供模板组件给我们使用，可以在模板定义公用的代码片段，然后在需要引用的地方进行调用。
定义模板
定义模板使用name属性作为模板的名字，然后在template标签中定义代码片段：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<template name="mytemplate1">
<view>
<text>firstName:{{firstName}}</text>
<text>lastName: {{lastName}}</text>
</view>
</template>
<template name="mytemplate2">
<view wx:for="{{persons}}">
<text>firstName:{{item.firstName}}</text>
<text>lastName: {{item.lastName}}</text>
</view>
</template>
|
使用模板
使用模板我们用is属性引用定义好的模板，然后把模板所需要的值通过data属性传给模板。比如需要遍历persons数组，我们可以将整个persons作为对象传给模板，也可以遍历persons后将每个对象传给模板，具体取决于所应用的场景。
|
1
2
3
4
|
<view wx:for="{{persons}}">
<template is="mytemplate1" data="{{...item}}"></template>
</view>
<template is="mytemplate2" data="{{persons}}"></template>
|
需要的数据结构如下
|
1
2
3
4
5
6
7
8
9
|
Page({
data:{
persons:[
{firstName: 'Hulk', lastName: 'Hu'},
{firstName: 'Shang', lastName: 'You'},
{firstName: 'Gideon', lastName: 'Lin'}
]
}
})
|
注意：
- is属性也可以使用Mustache语法进行动态渲染，决定使用哪个模板
- data如果传的是对象类型的数据，需要用“…”进行“解构”，在模板中可以直接调用对象的属性；如果是其他数据类型则不需要用“…”
二、事件
什么是事件呢，简单来说，事件就是逻辑层到逻辑层的通讯方式。就是在页面上通过触发某个操作（就是我们说的事件），在逻辑层进行一系列的操作，最终来改变数据。 比如在一个输入框中用户输入了一段文字，但是data中的数据并没有随之改变，因此我们需要在输入框上绑定对应的输入事件来更改数据。
事件分类
事件也有分类，可以分为冒泡事件和非冒泡事件。“冒泡”这个词很形象的表现了事件向上传递的过程，这两种事件的区别也在于是否会向父节点进行传递。 一些常用的冒泡事件，除以下的事件外都是非冒泡事件：
| 名称 | 触发 |
|---|---|
| touchstart | 手指开始触摸 |
| touchmove | 手指触摸后移动 |
| touchend | 手指触摸动作结束 |
| touchcancel | 触摸被打断，比如来点，弹框等 |
| tap | 触摸后离开，有点像点击click |
| longtap | 长按，超过350ms才离开 |
事件对象
当事件函数被调用时，从逻辑层有一个默认的事件对象传到函数中，不同的事件所包含的事件对象的属性有所区别，一些常用的事件对象的属性如下：
| 属性 | 类型 | 说明 |
|---|---|---|
| type | String | 事件类型 |
| timeStamp | Int | 从页面加载到事件触发的时间戳 |
| target | Object | 触发事件的组件的一些属性值集合 |
| currentTarget | Object | 当前组件的属性值集合 |
| touches | Array | 触摸点信息的数组 |
| detail | Object | 额外的信息 |
target和currentTarget区别
当不存在嵌套时，target和currentTarget没有区别。但是当嵌套触发事件是，current和currentTarget的区别就体现出来了。
|
1
2
3
4
5
6
|
<view class="A" bindtap="handle1">
outer
<view class="B" bindtap="handle2">
inner
</view>
</view>
|
点击组件B，当触发handle2事件时，收到target和currentTarget对象是一样，都指向组件B；而当点击组件B触发handle1事件时，target对象指向了组件B，currentTarget对象则组件A。总结一下：
- target对象指向了所触发事件的对象
- currentTarget对象指向了绑定事件所在的对象
向detail中添加内容
在组件中定义数据，当触发事件时，这些数据通过事件对象传给逻辑层。书写规则：以“data-”开头，多个字符用“-”连接，不能含有大写，可以绑定多个data值。例如data-element-name，最终会在event.currentTarget.dataset中转为elementName属性，属性的值就是定义的数据。
三、异步数据
小程序还提供发送异步的方法request(object)，发起的是https请求。一个小程序，同时只有有5个网络请求链接。object的参数如下：
| 参数命 | 类型 | 说明 |
|---|---|---|
| url | Sring | 服务器接口地址 |
| data | Object | 请求的参数 |
| header | Object | 设置请求头header，header不能设置Referer |
| method | String | 请求方式，默认GET |
| success | Function | 请求成功的回调方法 |
| fail | Function | 请求失败的回调方法 |
| complete | Function | 请求完成的回调方法(请求成功、失败都会调用) |
跟jQuery不同的是，小程序请求的数据不是直接在success方法的res中(res是一个对象，还包括请求成功的状态码等)，而是在res.data中。示例代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
wx.request({
url: '/url',
data: {
x: '',
y: ''
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res.data) //接收到的数据
}
})
|
