1.视图与渲染过程
基本概念：
视图层由WXML页面文件和样式文件WXSS共同组成。事件是视图层和逻辑层沟通的纽带，用户操作触发事件后可通过同名的事件处理函数执行相应的逻辑，处理完成后，更新的数据又将再次渲染到页面上。
WXML页面：
WXML是框架设计的一套标签语言，结合基础组件和事件系统可构建出页面的结构。组件是视图的基本组成单元，组件的显示效果是由页面样式文件中定义的样式进行控制的。
<view class="container">
<view class="userinfo">
<button ="{{!hasUserInfo &&canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像昵称</button>
<block wx:else>
<image bindtap="bindViewTap" src="{{userInfo.avatarUrl}}" ></image>
<text class="userinfo-nickname"> {{userInfo.nickName}} </text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}} </text>
</view>
</view>
button组件简单使用案例
实现效果，如下图所示：
新建Chapter02项目与页面
使用官方文档拷贝示例代码
进入微信官方小程序开发文档，其链接为： https://developers.weixin.qq.com/miniprogram/dev/framework/
选择"组件"→"表单组件"→button一栏
由上图可以看到关于button组件所有可设置的属性，以及属性的可选值，还有一些使用的注意事项等。将页面拖动到底部可以看到微信官方的示例代码与演示效果
现在仅仅想要一个简单的按钮，将上述wxml里部分代码拷贝，如下述代码所示：
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="primary"> primary </button>
去掉多余的关于loading以及plain等属性的设置，得到精简一点的代码段，并拷贝到刚才新建页面的button.wxml文件中，如下所示：
<button type="default">default</button>
<button type="primary">primary</button>
2.数据绑定
在WXML页面中可以用双花括号里面添加变量名的形式表示动态数据，这称为Mustache语法，形如：{{变量名}}。 WXML 中的动态数据均来自对应JS文件中Page的data属性，分别可以作用于wxml页面的内容、组件属性、控制属性等。除此之外，在双花括号内还可以支持简单的运算以及字符串的拼接等操作。
内容绑定
在上述案例中学习了button组件的基本使用，现在将button里面的文字内容进行简单的内容绑定，如下述代码所示：
<!-- WXML页面代码 -->
<button type="primary">{{btnText}}</button>
<text>{{content}}</text>
上述代码花括号内部的btnText与content就是绑定的变量，需在页面的JS文件中进变量的初始化，在页面加载时便可将数据渲染到WXML中，如下所示：
//JS文件代码
Page({
data: {
btnText:"按钮文字",
content:"这是要显示的内容"
}
})
组件属性绑定
组件的属性也可以使用动态数据，例如组件的id、class等属性值。例如在WXML文件里可添加如下代码：
<view id='{{id}}'> 测试组件属性绑定</view>
与简单绑定一样，需在当前页面对应的JS文件的data属性里添加名为id的变量才能实现正确的组件属性绑定，值得注意的是，组件属性数据最外层的单引号（双引号）不可省略。
控制属性绑定
控制属性也可以使用动态数据，但必须在引号内。如下代码所示：
<!--WXML页面代码-->
<view wx:if='{{condition}}'>测试控制属性绑定</view>
在文件里添加变量condition，暂时初始化为true，如下面代码所示。
//JS文件代码
Page({
data: {
condition:true
}
})
当更改变量condition的值为false时，view组件将不再显示，可以自行测试
true和false关键字绑定
在双括号内部除了引用data里的变量名之外，还可以直接写入一些关键字进行运算，如布尔类型的关键字true和false。如下面代码所示：
<view wx:if='{{false}}'>关键字绑定测试false</view>
<view wx:if='{{true}}'>关键字绑定测试true</view>
不可以去掉双花括号直接写成wx:if='false'，此时false会被认为是一个字符串，并且转换为布尔值后表示true。
运算绑定
三元运算：三元运算的语法表达式为：条件表达式?表达式1:表达式2。其中问号前面的位置是判断的条件，判断结果为bool型，为true时调用表达式1，为false时调用表达式2。在小程序的页面中三元运算经常这样使用：
<!--WXML页面代码-->
<view hidden='{{result ? true : false}}'>该组件将被隐藏</view>
//JS文件代码
Page({
data: {
result : false
}
})
算数运算：双花括号内部也支持基本的四则运算，如下面代码所示：
<!--WXML页面代码-->
<view> {{a + b}} + {{c}} + d </view>
//JS文件代码
Page({
data: {
a : 3, b : 4, c : 5
}
})
//上述代码最后运算结果为"7+5+d"。
逻辑判断：逻辑判断也就是支持大于和小于号，形成一个最后值为true或false的表达式。逻辑判断同样可以用于控制组件的显示，代码如下：
<view wx:if="{{length >3}}">当length的值大于3时该组件显示 </view>
字符串运算：字符串运算会用到字符串连接符"+"，这应与算数运算中的+号运算符进行区别，如下面代码所示：
<!--WXML页面代码-->
<view>{{"Hello, " + name}}</view>
<view>{{msg + name}}</view>
//JS文件代码
Page({
data: {
name:"Toky",
msg: "Hi, "
}
})
在双花括号内部，若+号两边都是数值，则进行加运算。若+号两边的变量有任意一个是双引号引起来的字符串，则看作字符串连接符。
数据路径运算：数据路径运算即针对这些变量，对json对象，只需要用"."运算符即可取到其下一层的属性。而数组变量的书写和其他语言的语法基本一致，采用一对中括号的形式，下标从0开始,如下述代码所示：
<!--WXML页面代码-->
<view>{{object.key2}} {{array[1]}}</view>
//JS文件代码
Page({
data: {
object: { key1: 'Hello ', key2:'Hi' },
array: ['Toky','Bob','Nike']
}
})
//上述代码可在WXML页面显示"Hi Bob"。
组合绑定
数组组合：在双花括号内还可以直接进行变量和值的组合，构成新的对象或者数组，如下面代码所示：
<!--WXML页面代码-->
<view wx:for='{{[1,2,x,4]}}'>{{item}}</view>
//JS文件代码
Page({
data: { x : 3 }
})
上述代码最终组合成数组[1,2,3,4]。wx:for与wx:if都是渲染标签，wx:for用于循环一个数组或列表，这个用于循环的数组元素值将默认赋值给item，因此上述代码可在页面依次显示该数组的元素值。值得注意的是，当花括号和引号之间如果有空格，将最终被解析成为字符串，如下述代码所示：
<view wx:for="{{[1,2,3]}} ">{{item}}</view>
<view wx:for="{{[1,2,3]+' '}}">{{item}}</view>
在WXML调试面板可看到最终渲染的WXML代码如图：
对象的组合与展开：对象的组合是指在双花括号内部通过key:变量名的形式可以将data里的数据组合到页面中。如下述代码所示：
<!--WXML页面代码-->
<template is="test" data="{{username: value1, password: value2}}"></template>
//JS文件代码
Page({
data: {
value1 : 'Toky',
value2 : '123456'
}
})
//最终组合成的对象是{username:Toky,password:123456}
对象的拆分可利用拓展运算符"..."三个点完成，示例代码如下：
<!--WXML页面代码-->
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
//JS文件代码
Page({
data: {
obj1: { a: 1, b: 2 },
obj2: { c: 3, d: 4 }
}
})
最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。 在展开时，若obj2中的变量与obj1中的变量名相同的情况，后边的变量会覆 盖前面的。
数据绑定综合案例
关于数据绑定的综合案例主要用于测试内容绑定、组件属性绑定、控制属性绑定、关键字绑定与运算绑定，并给按钮绑定了简单的点击事件以实现内容的更新。
页面WXML代码:案例综合数据绑定，测试多种属性的绑定，并给按钮组件添加了点击事件。在JS逻辑代码中重新渲染了页面的变量，其WXML代码如下：
<!--pages/demo2-2/dataBind.wxml-->
<view class='container'>
<view class='page-body'>
<text class='h1'>数据绑定综合案例</text>
<view class='demo-box'>
<view class="title">1、内容绑定</view>
<button type="primary" bindtap="btnClick">
{{btnText}}</button>
<text>{{content}}</text>
</view>
<view class='demo-box'>
<view class="title">2、组件属性绑定</view>
<view id='{{id}}'>这是带有id的view1</view>
</view>
<view class='demo-box'>
<view class="title">3、控制属性与关键字绑定</view>
<text class="content">当condition初始化为false时，view不显示</text>
<view wx:if='{{condition}}'>view2</view>
<view wx:if='{{false}}'>关键字绑定测试false</view>
<view wx:if='{{true}}'>关键字绑定测试true</view>
</view>
<view class='demo-box'>
<view class="title">4、运算绑定</view>
<view hidden='{{result ? true : false}}'>三元运算:result为真时显示</view>
<view>算术运算： {{a + b}} + {{c}} + d </view>
<view wx:if="{{length >3}}">逻辑判断:当length的值大于3时该组件显示 </view>
<view>字符串运算: {{"Hello, " + name}}</view>
<view>字符串运算: {{msg + name}}</view>
<view>数据路径运算: {{object.key2}} {{array[1]}}</view> </view> </view></view>
页面数据:页面数据在JS文件的data属性中进行初始化，全部变量如下所示：
data: {
btnText: "按钮文字",
content: "该按钮已经绑定btnClick事件",
condition: false,
a: 3, b: 4, c: 5,
object: {
key1: 'Hello ', key2: 'Hi'
},
array: ['Toky', 'Bob', 'Nike'],
message1: "这是简单绑定的数据",
id: 'testpage02View',
msg: "Hi, ",
name: "Toky",
result: false
},
页面点击事件处理函数:按钮点击后需要相应的处理函数执行逻辑代码，其完整代码如下：
// pages/demo2-2/dataBind.js
Page({
data: {
content: "该按钮已经绑定btnClick事件",
//省略其他变量
},
// 按钮点击事件处理函数
btnClick: function() {
console.log("按钮被点击")
this.setData({
content: "这是更新后的内容..."
})
},
})
上述代码第8行的this指代page函数，page函数中固有的setData方法用于更新data域中的页面数据。由第9行可以看出，setData里同样是传入一个json对象作为参数，该对象里可以填上多个data中已定义或未定义的变量名，这里的未定义的意思是：当在data属性里未对变量定义和初始化时，该方法依旧可以动态地往data属性里面添加数据。另外，所有的页面数据的值都可以在调试器的AppData面板观察到。
3.渲染标签
条件渲染
指根据绑定表达式的逻辑值来判断是否渲染当前组件。view组件拥有控制是否显示的hidden属性， 代码如下所示：
<!--WXML页面代码-->
<view class="content" hidden="{{flag ? true : false}}">
</view>
//JS文件代码
Page({
data: {
flag:false
}
})
在上面的代码中，当flag变量的值为true时，view组件及其包含的子组件将不会渲染，当flag变量的值为false时，将view组件渲染输出到页面。
wx:if：在微信小程序的wxml文件中，提供了另一种方式来进行类似的条件渲染。就是使用wx:if来控制是否渲染当前组件，其实在上一节的数据绑定中已经使用过，具体代码如下：
<view wx: if= " ({condition}) "> True </view>
在上面的代码中，当condition变量的值为true时，view组件将渲染输出，当condition 变量的值为false，view组件将不渲染。 值得注意的是，不能在双括号与引号直接留空格。如下面代码段会导致True恒显示，代码如下：
<view wx:if="{{condition}} "> True </view>
看起来wx:if属性与组件的hidden类似，不同的是，控制是否渲染的逻辑变量值刚好相反。wx:if可以更方便地控制，还可以使用wx:elif、wx:else来添加多个分支块，当控制表达式的值为true时渲染一个分支，控制表达式的值为false时渲染另一个分支。如下代码所示：
<!--WXML页面代码-->
<view wx:if="{{length >10}}"> case1 </view>
<view wx:elif="{{length > 5}}">case2 </view>
<view wx:else>case3</view>
//JS文件代码
Page({
data: {
length:6
}
})
以上代码中，当length的值大于10时，在界面中渲染输出的是case1字样,当length 的值大于5且小于10时，在界面中渲染输岀的是case2字样,而当length的值小于等于5或是其他情况时, 在界面中渲染输岀的是case3。
block wx:if 当需要通过一个表达式去控制多个组件时，一种方式是为每个组件都添加一个wx:if控制属性。但更好的方式是使用<block>标签将一个包含多节点的结构块包装起来，然后在<block>标签中添加一个wx:if控制属性即可。如下面代码所示：
<!--WXML页面代码-->
<block wx:if="{{condition}}">
<view> view1</view>
<view> view2 </view>
</block>
//JS文件代码
Page({
data: {
condition:true
}
})
列表渲染
常用的控制结构还有循环，微信小程序使用wx：for提供循环渲染的控制属性。
wx:for 简单列表渲染
循环对象数组：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名为 index，数组当前项的变量名默认为 item。如下列代码所示:
<!--WXML页面代码-->
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
//JS文件代码
Page({
data: {
array: [{ "message": "mes1" }, { "message": "mes2" },
{ "message": "mes3" }, { "message": "mes4" }]
},
}
})
从下图中可看出，默认数组的当前项的下标index从0开始，并依次循环输出数组的条目item，且item也可以是json对象，利用上一节提到的"."运算符取到下一级的属性。
wx:for-item与wx:for-index：在使用wx:for时也可以将数组当前下标和当前元素变量进行重命名，使用 wx:for-item可以指定数组当前元素的变量名，使用wx:for-index可以指定数组当前下标的变量名。如下面代码所示：
<!--WXML页面代码-->
<view>
<view wx:for="{{users}}" wx:for-index="myindex" wx:for-item="user">
<text>{{myindex}}-{{user.name}}-{{user.age}}</text>
</view>
</view>
//JS文件代码
Page({
data: {
users: [{ name: "Toky", age: 21 },
{ name: "Nike", age: 19 },
{ name: "Lisa", age: 20 }],}})
4.模板与引用
在微信小程序的WXML文件中，如果某些WXML代码需要在多个地方反复使用，这时，可以考虑将这些代码定义为一个模板，然后就可在其他WXML文件中利用关键字直接使用该模板。此外，引用与模板皆针对于WXML文件，在1.4.4节关于WXSS文件的介绍中曾使用import关键字导入公共样式文件。相似的道理，针对JS文件，则可在utils.js或其他JS文件夹中编写公共的业务逻辑，最后利用exports关键字进行导出，如下代码所示：
module.exports = {
dateTimePicker: dateTimePicker,
getMonthDay: getMonthDay
}
以上js代码用于一些公共类的导出，在其他js逻辑文件里可利用require关键字引入，如下述代码所示：
var dateTimePicker = require('../../../utils/dateTimePicker');
引用本页面模板
模板可定义在当前页面，也可将项目使用到的所有模板定义到一个统一的WXML文件中，在本页面使用模板的步骤如下：
在Chapter02项目中新建testTemplate页面，定义模板的代码如下：
<!--pages/demo2-4/testTemplate.wxml-->
<template name="userTemplate"> <!----定义模板-->
<view>
<view>姓名：{{item.name}}</view>
<view>年龄：{{item.age}}</view>
</view>
</template><!-- 定义结束 -->
在未使用该模板时，上面定义模板的WXML代码不会显示任何元素，使用该模板的代码如下所示：
<!--pages/demo2-4/testTemplate.wxml-->
<view>
<block wx:for="{{users}}">
<template is="userTemplate" data="{{item}}"/> <!-- 调用模板，传入对象数据-->
</block>
</view>
Page({
data: {
users: [{ name: "Toky", age: 21 },
{ name: "Nike", age: 19 },
{ name: "Lisa", age: 20 }],
}
})
引用其他位置的模板
在进行模板template的定义时也可以写在单独的一个WXML文件里，这时在其他页面进行引用时不是用关键字include，而是import，二者的作用域不同。import只会引入目标文件中定义的 template，而不会引入目标文件里面再引入的其他template，即不能进行链式引用。
定义模板
在Chapter02项目目录下新建commons目录，再新建templates.wxml，如图
在templates.wxml中定义两个模板，如下述代码所示：
<!-- Chapter02/pages/commons/templates.wxml -->
<template name="template1">
<text>{{text}}</text>
</template>
<template name="template2">
<text>{{text}}</text>
</template>
引用
在其他文件中进行引用时首先需要利用import关键字将模板拷贝到当前页面，再进行如上一小节中讲解的模板使用方法，利用is关键字指明模板。代码如下所示：
<!--pages/demo2-4/testTemplate.wxml-->
<import src="../commons/templates" />
<template is="template1" data="{{text: '这是传入模板的需要显示的内容'}}" />
引用wxml代码段
模板针对于有数据需要传入的情况，实际上若是只想引用静态的WXML片段直接使用include关键字即可，引用wxml代码段步骤如下：
在commons目录下新建文件footer.wxml，并在footer.wxml中添加如下内容：
<!-- Chapter02/pages/commons/footer.wxml -->
<view>
<text>这是许多页面底部需要显示的内容</text>
</view>
在其他需要该footer作为尾部的页面，利用关键字include进行引用。include 可以将目标文件除了<template/>外的整个代码引入，相当于拷贝到 include 所在的位置。在2.4.1节创建的testTemplate.wxml的底部加上如下代码段：
<!--pages/demo2-4/testTemplate.wxml-->
<include src="../commons/footer" />
上述代码第二行的include标签是一个单独的闭合标签，与在使用模板时用的template闭合标签是一样的，注意不能将末尾的反斜杠丢掉。
5.九九乘法表案例讲解
代码详情
九九乘法表WXML代码如下：
<!-- MultiplicationTable/pages/index/index.wxml -->
<view class="jiu-box">
<view wx:for="{{arr}}" wx:for-item="i" class="aa">
<view wx:for="{{arr}}" wx:for-item="j" class="jiu">
<view wx:if="{{i >= j}}" class="jiu-item">
{{j}}X{{i}}={{j*i}}
</view>
<view wx:else hidden="{{true}}"></view>
</view>
</view>
</view>
九九乘法表WXSS样式代码如下：
/* MultiplicationTable/pages/index/index.wxss */
.aa {
line-height: 32px;
}
.jiu-box {
width: 720rpx;
margin: auto;
padding: 28rpx 0;
}
.jiu {
display: inline-block;
}
.jiu-item {
width: 73rpx;
height: 32rpx;
line-height: 32rpx;
text-align: center;
border: 1px solid #abcdef;
font-size: 19rpx;
margin-right: 4rpx;
}
.jiu-none {
display: none;
}
one {
display: inline-block;
margin-right: 4rpx;
width: 70rpx;
height: 32rpx;
font-size: 14rpx;
text-align: center;
border: 1rpx solid #1296db;}
实现效果
6.小结
本文主要介绍了4部分内容。首先是小程序视图与渲染过程。 第1部分在讲解视图层时首先介绍了WXML页面，组成页面的重要部件是组件。 第2部分讲解数据绑定过程。 第3部分需要学会两个重要的渲染标签，分别是wx:if与wx:for，前者用于条件控制，后者用于循环控制。这两个标签的使用能大大减少WXML页面代码的冗余，具体可通过九九乘法表案例体会。 最后一部分讲解了模板与引用，代码的封装在开发中是尤为重要的，WXML代码的重复利用可通过定义模板实现。同样，WXSS与JS代码也有类似的思想。
