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