视图层是有WXML与WXSS编写的，由组件来进行展示。
WXML(WeiXin Markup Language)用于写页面结构的。
WXSS(WeiXin Style Sheet)用于页面的样式。
组件(Component)是视图的基本组成单元。
一、数据绑定
组件属性(需要在引号之内)
<view id="item-{{id}}"></view>
page({
data: {
id: 0
}
})
控制属性
<view wx:if="{{condition}}"></view>
page({
data: {
condition: true
}
})
二、列表渲染
wx:for
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
page({
data: {
array: [
{message: 'foo'},
{message: 'bar'}
]
}
})
使用 wx:for-item 可以指定数组当前元素的变量名。
使用 wx:for-index 可以指定数组当前下标的变量名。
<view wx:for="{{array}}" wx:for-index="id" wx:for-item='arr'>
{{id}}: {{arr.message}}
</view>
三、条件渲染 wx:if
wx:if...wx:elif...wx:else
<view wx:if="length > 5">1</view>
<view wx:elif="length > 2">2</view>
<view wx:else>3</view>
四、模板
<template name="msgItem">
<view>
<text> {{index}}: {{msg}}</text>
<text> Time: {{time}} </text>
</view>
</template> <template is="msgItem" data="{{...item}}">
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
四、事件
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
page({
tapName: function(e) {
console.log(e)
}
})
事件分类：冒泡事件和非冒泡事件
1、冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2、非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
冒泡事件列表
| 类型 | 触发条件 |
| touchstart | 手指触摸动作开始 |
| touchmove | 手指触摸后移动 |
| touchcancel | 手指触摸动作被打断，如来电提醒，弹窗 |
| touchend | 手指触摸动作结束 |
| tap | 手指触摸后马上离开 |
| longtap | 手指触摸后，超过350ms再离开 |
注：除表上之外的其他组件自定义事件都是非冒泡事件。
事件绑定：
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止事件冒泡向上冒泡。