视图层View框架的视图层由WXML与WXSS编写，由组件来进行展示。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。WXML(WeiXinMarkuplanguage)用于描述页面的结构。WXS(WeiXinScript)是小程序的一套脚本语言，结合WXML，可以构建出页面的结构。WXSS(WeiXinStyleSheet)用于描述页面的样式。组件(Component)是视图的基本组成单元。wxml相当于html感觉还是容易理解，因为之前用过freemarker，很多标签大同小异，微信自己封装了一套敲了一些小demo，记录一下数据绑定列表渲染条件渲染模板事件index.js文件
Page({data:{id:0,msg:"123",array:[1,2,3],array2:[{message:'foo',},{message:'bar'}],condition:false,flag:false,a:1,b:2,c:3,name:'MINA',object:{key:"hello"},zero:5,lenght:1,item:{index:0,msg:'thisisatemplate',time:'2016-09-15'}},tapName(event,ownerInstance){console.log(JSON.stringify(event))console.log(JSON.stringify(ownerInstance))},handleTap1(event){console.info('outer')},handleTap2(){console.info('middle')},handleTap3(event){console.info(JSON.stringify(event))console.info('inner')}})index.wxml文件
!--数据绑定div--view{{msg}}/view!--数据绑定span--text{{msg}}/text!--组件属性(需要在双引号之内)--viewid="item-{{id}}"1/view!--控制属性(需要在双引号之内)--viewwx:if="{{condition}}"22222/view!--特别注意：不要直接写checked="false"，其计算结果是一个字符串，转成boolean类型后代表真值。复选框--checkboxchecked="{{true}}"/checkbox!--三元运算--viewhidden="{{flag?true:false}}"Hidden/view!--算法运算--view{{a+b}}+{{c}}+1/view!--逻辑判断--viewwx:if="{{a1}}"2/view!--字符串运算--view{{"hello"+name}}/viewviewhello{{name}}/view!--数据路径运算--view{{object.key}}/viewview{{array[0]}}/view!--组合--viewwx:for="{{[zero,0,1,2]}}"{{item}}/view!--对象--templateis="objectCombine"data="{{for:a,bar:b}}"/template!--列表渲染--!--在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item--viewwx:for="{{array2}}"{{index}}:{{item.message}}/view!--使用wx:for-item可以指定数组当前元素的变量名，使用wx:for-index可以指定数组当前下标的变量名：--viewwx:for="{{array2}}"wx:for-index="idx"wx:for-item="itemName"{{idx}}:{{itemName.message}}/view!--viewwx:for="{{[1,2,3,4,5,6,7,8,9]}}"wx:for-item="i"viewwx:for="{{[1,2,3,4,5,6,7,8,9]}}"wx:for-item="j"viewwx:if="{{i=j}}"{{i}}{{j}}={{ij}}/view/view/view--blockwx:for="{{[1,2,3]}}"view{{index}}:/viewview{{item}}/view/block!--条件渲染--viewwx:if="{{lenght==1}}"1/viewviewwx:elif="{{lenght1}}"2/viewviewwx:else3/view!--因为wx:if是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个block/标签将多个组件包装起来，并在上边使用wx:if控制属性。--blockwx:if="{{true}}"viewview1/viewviewview2/view/block!--注意：block/并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。--viewhidden='true'哈哈哈/view!--模板--!--使用name属性，作为模板的名字。然后在template/内定义代码片段，如：--templatename="msgItem"viewtext{{index}}:{{msg}}/texttextTime:{{time}}/text/view/template!--使用is属性，声明需要的使用的模板，然后将模板所需要的data传入，如--templateis="msgItem"data="{{...item}}"/templatename="odd"viewodd/view/templatetemplatename="even"vieweven/view/template!--is属性可以使用Mustache语法，来动态决定具体需要渲染哪个模板：--blockwx:for="{{[1,2,3,4,5]}}"templateis="{{item%2==0?'even':'odd'}}"//blockviewid="tapTest"data-hi="WeChat"bindtap="tapName"Clickme!/view!--wxsmodule="wxs"src="../wxs/test.wxs"/wxsviewid="tapTest"data-hi="WeChat"bindtap="{{wxs.tapName}}"Clickme!/view--viewid="outer"bindtap="handleTap1"outerviewviewid="middle"catchtap="handleTap2"middleviewviewid="inner"bindtap="handleTap3"innerview/view/view/view