小程序框架
　　本章主要内容是小程序框架，包括逻辑层、视图层和flex模型。逻辑层是由JavaScript编写而成的，视图层由WXML和WXSS配合组件构成，flex布局可以确保页面需要适应不同屏幕尺寸及设备类型时元素在恰当的位置。

* 掌握注册程序和页面相关函数的用法；
* 掌握页面路由的方式和模块化的用法；
* 掌握WXML的数据绑定、列表/条件渲染、模板、事件和引用；
* 掌握WXSS的尺寸单位、使用方式和选择器的用法；
* 了解flex布局的基本概念；
掌握flex布局中的容器属性和项目属性。* 
3.1  逻辑层
　　小程序开发框架的逻辑层又称为App Service，是由JavaScript编写和实现的。开发者    写的所有代码最后将被打包成一份JavaScript，并在小程序启动的时候运行，直到小程序被     销毁。
　　逻辑层的主要作用是处理数据后发送给视图层渲染以及接收视图层的事件反馈。
　　为了更方便地进行项目开发，小程序在JavaScript的基础上进行了一些优化，例如：
　　（1）新增App()和Page()方法，分别用于整个应用程序和单独页面的注册。
　　（2）新增getApp()和getCurrentPages()方法，分别用于获取整个应用实例和当前页面      实例。
　　（3）提供丰富的微信原生API，例如可以方便地获取微信用户信息、本地存储、扫一扫、微信支付、微信运动等特殊功能。
　　（4）每个页面具有独立的作用域，并提供模块化功能。
　　需要注意的是，由于框架不在浏览器中运行，所以JavaScript与浏览器相关的一些功能无法使用，例如document、window等。
3.1.1  注册程序
　　App()方法
　　小程序通过使用App(OBJECT)方法进行应用注册，用其指定小程序的生命周期函数。
　　OBJECT参数如表3-1所示。
表3-1  App()方法的OBJECT参数
属    性
类  型
描    述
触 发 时 机
备    注
onLaunch()
Function
生命周期函数——监听小程序的初始化
当小程序初始化完成时触发
全局只触发1次
onShow()
Function
生命周期函数——监听小程序的显示
当小程序启动或从后台进入前台显示时触发

onHide()
Function
生命周期函数——监听小程序的隐藏
当小程序从前台进入后台隐藏时触发

onError()
Function
错误监听函数
当小程序发送脚本错误或API调用失败时触发

onPageNotFound()
Function
页面不存在函数
当小程序需要打开的页面不存在时触发

其他自定义参数
Any
开发者可以添加自定义名称的函数或数据到OBJECT参数中

用this可以访问
　　
　　注意：App()方法只能写在小程序根目录下的app.js文件中，并且只能注册1个。
　　
　　用户可以使用微信web开发者工具在空白app.js文件中直接输入关键词app，此时会自动出现提示列表，如图3-1所示。

图3-1  app.js的代码提示列表
　　默认选择提示列表中的第一项，直接按回车键就可以自动生成带有生命周期全套函数的代码结构，如图3-2所示。
　　事实上，App()中的这些函数均为可选函数，开发者可以根据实际需要删除其中的部分函数，或保留这些函数但空着不填充内容。
　　第12、19行注释语句均提到了小程序后台和前台的概念，具体说明如下。
* 小程序后台：指的是小程序没有在手机当前画面显示，但是并没有被销毁。当用户    单击左上角的按钮关闭小程序或者按设备的Home键离开微信时会进入后台运行   状态。
* 小程序前台：指的是小程序在手机当前画面被使用。当用户再次打开处于后台运行状态的小程序时会重新进入前台运行状态。
　　
　　注意：只有当小程序进入后台一定时间或者系统资源占用过高时才会被真正地销毁。

图3-2  app.js自动生成App()代码
　　由图3-2中的代码可见，onLaunch()、onShow()和onError()方法在触发时均会返回参数，用户可以利用这些参数进行状态的判断与处理。其中，onLaunch()与onShow()方法返回的参数名称完全相同，具体如表3-2所示。
表3-2  onLaunch()和onShow()方法返回的参数
字    段
类    型
说    明
　path
 String
　打开小程序的路径
　query
 Object
　打开小程序的query
　scene
 Number
　打开小程序的场景值
　shareTicket
 String
　小程序被转发时会生成一个shareTicket，打开被转发的小程序页面可以获取该参数
　referrerInfo
 Object
　当场景为从另一个小程序/公众号/App打开时返回此字段
　referrerInfo.appId
 String
　跳转前的小程序/公众号/App的appId
　referrerInfo.extraData
 Object
　跳转前的小程序传来的数据，当scene=1037或1038时才支持
　　
　　支持返回referrerInfo.appId的场景值如表3-3所示。
表3-3  支持返回referrerInfo.appId的场景值
场  景  值
场    景
appId信息的含义
1020
　　公众号profile页的相关小程序列表
         返回来源公众号appId
1035
　　公众号自定义菜单
         返回来源公众号appId
1036
　　App 分享消息卡片
         返回来源应用appId
1037
　　小程序打开小程序
         返回来源小程序appId
1038
　　从另一个小程序返回
         返回来源小程序appId
1043
　　公众号模板消息
         返回来源公众号appId
　　说明：关于场景值的更多介绍，见附录。
　　除了函数外，App()也支持添加自定义的全局变量，示例代码如下：
　　
1.	App({
2.	  globalData: {
3.	    userInfo: null  //这是一个全局变量
4.	  }
5.	})
　　
　　这里，全局变量的名称、取值和数量都可以由开发者自定义。
　　onPageNotFound()方法
　　当需要打开的页面不存在时，微信客户端会有一个原生模板页面提示。如果开发者不希望跳转到此页面，想自行处理，则需用到onPageNotFound()方法。
　　该方法从基础库1.9.90开始支持，低版本需要做兼容处理。当要打开的页面并不存在时，会回调这个方法并带有3个参数，具体参数内容如表3-4所示。
表3-4  onPageNotFound()方法的参数
字    段
类    型
说    明
path
 String
不存在页面的路径
query
 Object
打开不存在页面的query
isEntryPage
 Boolean
是否为本次启动的首个页面（例如从分享等入口进来，首个页面是开发者配置的分享页面）
　　
　　onPageNotFound()方法的示例代码如下：
　　
1.	App({
2.	  onPageNotFound: function(res) {
3.	     //小程序打开的页面不存在时需要执行的代码
4.	     wx.redirectTo({
5.	       url: 'pages/test/test'
6.	     }) 	//如果是tabBar页面，请使用wx.switchTab
7.	  }
8.	})
　　
　　上述代码可以用指定的页面代替原生模板页面。需要注意的是，如果 onPageNotFound() 回调中又重定向到另一个不存在的页面，将重定向到微信自带的原生模板页面提示页面不存在，并且不再触发onPageNotFound()监听。
　　getApp()方法
　　在小程序的其他JS文件中均可以使用全局的getApp()方法获取小程序实例。
　　例如，test.js，示例代码如下：
　　
1.	var app=getApp()
2.	console.log(app.globalData.userInfo)
　　
　　此时，就可以在test.js页面获得app.js中保存的公共数据，并在console控制台打印输出。
　　需要注意的是，用户不可以在app.js的App()函数内部调用getApp()方法，可以直接使用关键字this代替。例如：
　　
1.	App({
2.	  globalData: {
3.	    userInfo: null  //这是一个全局变量
4.	  }
5.	  onLoad:function(options){
6.	      console.log(this.globalData.userInfo) 	//使用this关键字获得全局变量
7.	  }
8.	})
　　
　　上述代码就在onLoad()方法中直接使用了this关键字获得全局变量。
3.1.2  注册页面
　　小程序在每个页面JS文件中通过使用Page(OBJECT)方法进行页面注册，该方法可以用于指定小程序页面的生命周期函数。Page()方法的OBJECT参数如表3-5所示。
表3-5  Page()方法的OBJECT参数
属    性
类   型
说    明
data
Object
页面的初始数据
onLoad()
Function
生命周期函数——监听页面的加载
onReady()
Function
生命周期函数——监听页面初次渲染完成
onShow()
Function
生命周期函数——监听页面的显示
onHide()
Function
生命周期函数——监听页面的隐藏
onUnload()
Function
生命周期函数——监听页面的卸载
onPullDownRefresh()
Function
页面相关事件处理函数——监听用户下拉动作
onReachBottom()
Function
页面上拉触底事件的处理函数
onShareAppMessage()
Function
用户单击右上角转发
onPageScroll()
Function
页面滚动触发事件的处理函数
onTabItemTap()
Function
若当前是tab页，单击tab时触发
其他
Any
开发者可以添加任意函数或数据到OBJECT参数中，在页面的函数中用?this?可以访问
　　
　　注意：Page()方法只能写在小程序每个页面对应的JS文件中，并且每个页面只能注册1个。
　　
　　在微信web开发者工具中新建页面时会自动生成页面JS文件的Page()方法。这里以test页面为例，创建完成后test.js的代码如下：
　　
1.	// pages/test/test.js
2.	Page({
3.	  /**
4.	   * 页面的初始数据
5.	   */
6.	  data: {
7.	  
8.	  },
9.	  /**
10.   * 生命周期函数——监听页面的加载
11.   */
12.  onLoad: function(options) {
13.  
14.  },
15.  /**
16.   * 生命周期函数——监听页面初次渲染完成
17.   */
18.  onReady: function() {
19.  
20.  },
21.  /**
22.   * 生命周期函数——监听页面的显示
23.   */
24.  onShow: function() {
25.  
26.  },
27.  /**
28.   * 生命周期函数——监听页面的隐藏
29.   */
30.  onHide: function() {
31.  
32.  },
33.  /**
34.   * 生命周期函数——监听页面的卸载
35.   */
36.  onUnload: function() {
37.  
38.  },
39.  /**
40.   * 页面相关事件处理函数——监听用户下拉动作
41.   */
42.  onPullDownRefresh: function() {
43.  
44.  },
45.  /**
46.   * 页面上拉触底事件的处理函数
47.   */
48.  onReachBottom: function() {
49.  
50.  },
51.  /**
52.   * 用户单击右上角分享
53.   */
54.  onShareAppMessage: function() {
55.  
56.  }
57.})
　　
　　与App()方法的函数情况类似，开发者同样可以根据实际情况删除Page()中不需要的函数，或者保留该函数内部为空白。
　　除了函数外，Page()同样也支持添加自定义的页面变量，示例代码如下：
　　
1.	Page({
2.	  myData: '123',					 //定义页面变量
3.	  onLoad: function(options) {
4.	        console.log(this.myData)	//使用this关键字调用页面变量
5.	  },
6.	})
　　
　　这里，变量的名称、取值和数量也都可以由开发者自定义。
　　初始数据
　　在Page()方法中默认生成的第一项就是data属性，该属性是页面第一次渲染使用的初始数据。当页面加载时，data将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型，例如字符串、数字、布尔值、对象、数组。渲染层可以通过WXML对数据进行绑定。
　　例如在data中放置两个自定义数据，页面JS文件的示例代码如下：
　　
1.	Page({
2.	  data:{
3.	      msg01: 'Hello',
4.	      msg02: 2018
5.	  }
6.	})
　　
　　对应WXML的示例代码如下：
　　
<view>{{msg01}} {{msg02}}</view>
　　
　　此时{{msg01}}和{{msg02}}不会显示字面内容，而是会查找data中的初始数据，然后显示出“Hello 2018”字样。
　　生命周期回调函数
　　Page()函数中默认生成的onLoad()、onShow()、onReady()、onHide()以及onUnload()均属于页面的生命周期回调函数，具体说明如下。
* onLoad()：格式为onLoad(Object query)，只在页面加载时触发一次，可以在onLoad()的参数中获取打开当前页面路径附带的参数。
* onShow()：当页面显示或从小程序后台切入前台时触发。
* onReady()：当页面初次渲染完成时触发。注意，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
* onHide()：当页面隐藏/切入后台时触发。例如navigateTo或底部tab切换到其他页面，小程序切入后台等。
* onUnload()：当页面卸载时触发。例如redirectTo或navigateBack到其他页面时。
　　页面事件处理函数
　　Page()方法中默认生成的onPullDownRefresh()、onReachBottom()、onShareAppMessage()以及未自动生成的onPageScroll()、onTabItemTap()均属于页面事件处理函数，具体说明如下。
* onPullDownRefresh()：监听用户下拉刷新事件，需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
* onReachBottom()：监听用户上拉触底事件，可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。在触发距离内滑动期间，本事件只会被触发一次。
* onPageScroll(OBJECT)：监听用户滑动页面事件。其参数OBJECT具有唯一属性scrollTop，该属性为Number类型，表示页面在垂直方向已滚动的距离（单位为px）。
* onShareAppMessage(OBJECT)：监听用户单击页面内“转发”按钮（<button>按钮组件，其属性值open-type="share"）或右上角菜单“转发”按钮的行为，并且自定义转发内容。其OBJECT参数如表3-6所示。
表3-6  onShareAppMessage()方法的OBJECT参数
参    数
类型
说    明
最低版本
from
String
转发事件来源（button：页面内“转发”按钮；menu：右上角“转发”菜单）
1.2.4
target
Object
如果?from?值是?button，则?target?是触发这次转发事件的?button，否则为?undefined
1.2.4
webViewUrl
String
当页面中包含<web-view>组件时返回当前<web-view>的url
1.6.4
　　此事件需要返回一个Object对象，用于自定义转发内容，返回内容如表3-7所示。
表3-7  onShareAppMessage()方法的返回的Object对象
字    段
说    明
　　title
转发标题，默认为当前小程序名称
　　path
转发路径，默认为当前页面path，必须是以根目录/开头的完整路径
　　imageUrl
自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。其支持PNG及JPG文件，显示图片的长宽比是5∶4。另外使用默认截图，最低版本为1.5.0
　　
　　onShareAppMessage(OBJECT)方法的示例代码如下：
　　
1.	Page({
2.	  onShareAppMessage: function(res) {
3.	    if (res.from==='button') {
4.	      console.log(res.target) 		//页面内“转发”按钮的信息
5.	    }
6.	    return {
7.	      title: '自定义转发标题',
8.	      path: '/page/user?id=123' 		//自定义转发页面路径
9.	    }
10.  }
11.})
　　
　　说明：第8行引号中的/page/user是自定义页面地址，id=123是自定义参数内容。
* onTabItemTap(OBJECT)：单击tab时触发，从基础库1.9.0开始支持，低版本需做兼容处理。其OBJECT参数如表3-8所示。
表3-8  onTabItemTap()方法的OBJECT参数
参    数
类    型
说    明
最 低 版 本
   index
String
       被单击tabItem的序号，从0开始
1.9.0
   pagePath
String
       被单击tabItem的页面路径
1.9.0
   text
String
       被单击tabItem的按钮文字
1.9.0
　　
　　onTabItemTap(OBJECT)方法的示例代码如下：
　　
1.	Page({
2.	  onTabItemTap(item) {
3.	    console.log(item.index)
4.	    console.log(item.pagePath)
5.	    console.log(item.text)
6.	  }
7.	})
　　
　　组件事件处理函数
　　Page()方法中还可以定义组件事件处理函数，在WXML页面的组件上添加事件绑定，当事件被触发时就会主动执行Page()中对应的事件处理函数。
　　例如tap就是单击事件，可以使用bindtap属性在组件上进行绑定。这里以<button>按钮组件为例，为其绑定单击事件的WXML相关代码如下：
　　
<button bindtap="btnTap">单击此处</button>
　　
　　在JS的Page()方法中相关代码如下：
　　
1.	Page({
2.	  btnTap: function() {
3.	    console.log('按钮被单击。')
4.	  }
5.	})
　　
　　除了bindtap可以绑定单击事件外，还有很多事件，详见3.2.1节“WXML”。
　　route
　　在Page()方法中可以使用this.route查看当前页面的路径地址。例如：
　　
1.	Page({
2.	  onShow: function() {
3.	    console.log(this.route)
4.	  }
5.	})
　　
　　setData()
　　在Page()方法中，setData()可以用来同步更新data属性中的数据值，也能异步更新相关数据到WXML页面上。其参数说明如表3-9所示。
表3-9  setData()参数
字    段
类   型
必填
说    明
最 低 版 本
data
Object
是
要更新的一个或多个数据，格式为{key1:value1, key2:value2,…, keyN:valueN}

callback
Function
否
setData引起的界面更新渲染完毕后的回调函数
1.5.0
　　
　　例如在Page()的data中定义初始数据，JS文件代码如下：
　　
1.	Page({
2.	  data:{
3.	      today: '2018-01-01'
4.	  }
5.	})
　　
　　此时WXML页面的{{today}}初始值为2018-01-01。
　　为组件追加自定义单击事件changeData，WXML页面代码如下：
　　
<view bindtap="changeData">{{today}} </view>
　　
　　在Page()中追加自定义函数changeData()的具体内容，JS文件代码如下：
　　
1.	Page({
2.	  changeData:function{
3.	      this.setData({today: '2018-09-09'})
4.	  }
5.	})
　　
　　如果用户触发了该组件的单击事件，WXML中的{{today}}值将立刻更新成2018-09-09。
　　setData()方法在使用时不是必须事先在Page()方法的data中定义初始值，可以在data数据空白的情况下直接用该方法设置一些新定义的变量。
　　如果想读取data中的数值，可以使用this.data的形式。例如，上述代码如果只是想获得当前today值，可以用this.data.today表示。
　　生命周期
　　小程序应用与页面有各自的生命周期函数，它们在使用过程中也会互相影响。
　　小程序应用生命周期如图3-3所示。

图3-3  小程序应用生命周期
　　小程序在被打开时会首先触发onLaunch()进行程序启动，完成后调用onShow()准备展示页面，如果被切换进入后台会调用onHide()，直到下次程序在销毁前重新被唤起会再次调用onShow()。
　　小程序页面生命周期如图3-4所示。

图3-4  小程序页面生命周期
　　在小程序应用生命周期调用完onShow()以后就准备触发小程序页面生命周期了。页面初次打开会依次触发onLoad()、onShow()、onReady()这3个函数。同样，如果被切换到后台，会调用页面onHide()，从后台被唤醒会调用页面onShow()。直到页面关闭会调用onUnload()，下次打开还会依次触发onLoad()、onShow()、onReady()这3个函数。
　　需要注意的是，tab页面的互相切换以及在当前页面上打开一个新页面都不算页面关闭，只是起到了隐藏的作用。这几种情况只会触发onHide()，回到此页面只触发onShow()，具体情况见3.1.3节“页面路由”。
3.1.3  页面路由
　　页面栈
　　在小程序中页面之间的切换路由均由框架统一进行管理，框架以栈的形式维护了当前的所有页面。当发生路由切换的时候，页面栈的表现如表3-10所示。
表3-10  路由方式与页面栈的表现
路 由 方 式
页面栈的表现
                 初始化
　　　　新页面入栈
                 打开新页面
　　　　新页面入栈
                 页面重定向
　　　　当前页面出栈，新页面入栈
                 页面返回
　　　　页面不断出栈，直到目标返回页面
                 tab切换
　　　　页面全部出栈，只留下新的tab页面
                 重加载
　　　　页面全部出栈，只留下新的页面
　　
　　获取页面栈
　　小程序使用getCurrentPages()方法获取当前页面栈的实例，实例将以数组形式按栈的顺序给出。其中，第一个元素为首页，最后一个元素为当前页面。
　　路由方式
　　路由方式及页面生命周期函数如表3-11所示。
表3-11  路由方式与页面生命周期函数
路 由 方 式
触 发 时 机
路由前页面
路由后页面
初始化
小程序打开的第一个页面
　
onLoad()、onShow()
打开新页面
调用API?wx.navigateTo?或使用组件?<navigator open-type="navigateTo"/>
   onHide()
onLoad()、onShow()
页面重定向
调用API?wx.redirectTo?或使用组件?<navigator open-type="redirectTo"/>
   onUnload()
onLoad()、onShow()
页面返回
调用API?wx.navigateBack?或使用组件<navigator open-type="navigateBack">或用户单击左上角的“返回”按钮
   onUnload()
onShow()
tab切换
调用API wx.switchTab?或使用组件<navigator open-type="switchTab"/>?或用户切换tab
   　
请参考表3-12
重启动
调用API?wx.reLaunch或使用组件<navigator open-type="reLaunch"/>
   onUnload()
onLoad()、onShow()
　　
　　<navigator>的用法见第4章“小程序组件”，API的用法见第11章“界面API”。
　　由于tab页面的切换情况比较复杂，这里用A、B、C、D几个页面举例说明。假设其中A、B为tabBar页面，C是从A打开的页面，D是从C打开的页面，tab切换对应的生命周期如表3-12所示。
表3-12  tab切换对应的生命周期函数
当 前 页 面
路由后页面
触发的生命周期（按顺序）
　A
 A
　不触发任何内容
　A
 B
　A.onHide()、B.onLoad()、B.onShow()
　A
 B（再次打开）
　A.onHide()、B.onShow()
　C
 A
　C.onUnload()、A.onShow()
　C
 B
　C.onUnload()、B.onLoad()、B.onShow()
　D
 B
　D.onUnload()、C.onUnload()、B.onLoad()、B.onShow()
　D（从转发进入）
 A
　D.onUnload()、A.onLoad()、A.onShow()
　D（从转发进入）
 B
　D.onUnload()、B.onLoad()、B.onShow()
3.1.4  模块化
　　文件的作用域
　　在小程序的任意JS文件中声明的变量和函数只在该文件中有效，不同的JS文件中可以声明相同名字的变量和函数，不会互相影响。
　　如果需要跨页面进行数据共享，可以在app.js中定义全局变量，然后在其他JS文件中使用getApp()获取和更新。例如在app.js中设置全局变量msg，代码如下：
　　
1.	App({
2.	  globalData: {
3.	    msg: ' Goodbye 2018'  //这是一个全局变量
4.	  }
5.	})
　　
　　假设在test.js文件中希望修改全局变量msg的值，代码如下：
　　
1.	var app=getApp()
2.	app.globalData.msg='Hello 2019'		//全局变量被更新
　　
　　此时在任意其他JS文件中再读取msg的值都会是更新后的内容。
　　模块的调用
　　小程序支持将一些公共JavaScript代码放在一个单独的JS文件中，作为一个公共模块，可以被其他JS文件调用。注意，模块只能通过module.exports或者exports对外提供接口。
　　例如在根目录下新建utils文件夹并创建公共JS文件common.js，代码如下：
　　
1.	function sayHello(name) {
2.	  console.log('Hello ${name} ! ')
3.	}
4.	function sayGoodbye(name) {
5.	  console.log('Goodbye ${name} ! ')
6.	}
7.	module.exports.sayHello=sayHello 		//推荐使用这种语法提供接口
8.	exports.sayGoodbye=sayGoodbye
　　
　　上述代码创建了两个自定义函数，即sayHello()和sayGoodbye()，且都带有参数name。需要注意的是，exports是module.exports的一个引用，因此在模块中随意更改exports的指向会造成未知错误。
　　在页面JS中使用require引用common.js文件，此时可以调用其中的函数，代码如下：
　　
1.	var common=require('../../utils/common.js') 	//目前暂时不支持绝对路径地址
2.	Page({
3.	  hello: function() {
4.	    common.sayHello('2019')
5.	  },
6.	  goodbye: function() {
7.	    common.sayGoodbye('2018')
8.	  }
9.	})
3.1.5  API
       小程序开发框架提供丰富的微信原生API接口，可以方便地调用微信提供的功能，例如获取用户信息、本地存储、地理定位等。常用的API如下。
* 网络：实现小程序与服务器端的网络交互。
* 媒体：实现图片、录音、音/视频和相机管理。
* 文件：实现临时文件和本地文件的管理。
* 数据：实现小程序本地数据的缓存。
* 位置：使用小程序获取地理位置和控制地图组件。
* 设备：获得手机内存、网络、传感器、扫码、剪贴板、振动等功能。
* 界面：实现交互反馈、导航条设置、页面导航、动画、绘图等功能。
　　这些API及其相关标签会在后续章节陆续介绍。
3.2  视图层
　　视图层主要负责视图的显示，WXML页面、WXSS样式表和组件都是视图层的内容。
3.2.1  WXML
　　WXML的全称是WeiXin Markup Language（微信标记语言），类似于HTML，也是一种使用<标签>和</标签>构建页面结构的语言。
　　WXML具有数据绑定、列表渲染、条件渲染、模板、事件和引用的功能。
　　数据绑定
　　1）简单绑定
　　在WXML页面中可以使用{{变量名}}的形式表示动态数据。例如：
　　
<view>{{msg}}<view>
　　
　　此时WXML页面上不会显示msg这个词，而是会显示这个变量对应的值。动态数据的值都来自JS文件的data属性中的同名变量。例如：
　　
1.	Page({
2.	  data: {
3.	    msg: '你好！'
4.	  }
5.	})
　　
　　上述代码会把“你好！”渲染到WXML页面上{{msg}}出现的地方。
　　2）组件属性绑定
　　组件的属性也可以使用动态数据，例如组件的id、class等属性值。
　　WXML页面的相关代码如下：
　　
<view id='{{id}}'>测试</view>
　　
　　JS文件的相关代码如下：
　　
1.	Page({
2.	  data: {
3.	    id: 'myView'
4.	  }
5.	})
　　
　　3）控制属性绑定
　　控制属性也可以使用动态数据，但必须在引号内。
　　WXML页面的相关代码如下：
　　
<view wx:if='{{condition}}'>测试</view>
　　
　　JS文件的相关代码如下：
　　
1.	Page({
2.	  data: {
3.	    condition: false
4.	  }
5.	})
　　
　　上述代码表示测试组件不被显示出来。
　　4）关键字绑定
　　如果直接在引号内写布尔值也必须用双花括号括起来，例如：
　　
1.	<view wx:if='{{false}}'>测试1</view>
2.	<view wx:if='{{true}}'>测试2</view>
　　
　　注意：不可以去掉双花括号直接写成wx:if='false'，此时false会被认为是一个字符串，转换为布尔值后表示true。
　　
　　5）运算绑定
　　在双花括号内部还可以进行简单的运算，其支持的运算有三元运算、算术运算、逻辑判断、字符串运算和数据路径运算。
　　三元运算的示例代码如下：
　　
1.	<!--WXML页面代码-->
2.	<view hidden='{{result ? true: false}}'>该组件将被隐藏</view>

1.	//JS文件代码
2.	Page({
3.	    data: {
4.	      result: false
5.	    }
6.	})
　　
　　算术运算的示例代码如下：
　　
1.	<!--WXML页面代码-->
2.	<view> {{a + b}} + {{c}} + d </view> 		<!--显示的结果是3+3+d-->

1.	//JS文件代码
2.	Page({
3.	    data: {
4.	      a:1, b:2, c:3
5.	    }
6.	})
　　
　　双花括号内的a+b会进行算术运算，但是注意括号外面的+会原封不动地显示出来，不起任何算术运算作用。
　　逻辑判断的示例代码如下：
　　
1.	<!--WXML页面代码-->
2.	<view wx:if="{{x > 5}}">该组件将被显示</view>

1.	//JS文件代码
2.	Page({
3.	    data: {
4.	      x: 99
5.	    }
6.	})
　　
　　此时，判断x>5返回true，因此wx:if条件成立。
　　字符串运算的示例代码如下：
　　
1.	<!--WXML页面代码-->
2.	<view> {{'你好'+name}}</view> 			<!--显示的结果是“你好小程序”-->

1.	//JS文件代码
2.	Page({
3.	    data: {
4.	      name: '小程序'
5.	    }
6.	})
　　
　　此时，双花括号中的“+”号起到了连接前后字符串的作用。
　　数据路径运算的示例代码如下：
　　
1.	<!--WXML页面代码-->
2.	<view>{{object.key1}} {{array[1]}}</view> 	<!--显示的结果是Hello 2019-->

1.	//JS文件代码
2.	Page({
3.	    data: {
4.	      object: {
5.	        key1: 'Hello ',
6.	        key2: 'Goodbye '
7.	      },
8.	      array: ['2018', '2019', '2020']
9.	    }
10.})
　　
　　6）组合绑定
　　用户还可以在双花括号内直接进行变量和值的组合，构成新的对象或者数组。
　　数组组合的示例代码如下：
　　
1.	<!--WXML页面代码-->
2.	<view wx:for='{{[1,2,x,4]}}'>{{item}}</view>  <!--最终组合成数组[1, 2, 3, 4]-->

1.	//JS文件代码
2.	Page({
3.	    data: {
4.	      x:3
5.	    }
6.	})
　　
　　上述代码中的x会被替换成数字3，从而形成数组[1,2,3,4]。
　　对象组合的示例代码如下：
　　
1.	<!--WXML页面代码-->
2.	<template is="test" data="{{username: value1, password: value2}}"> 	</template>

1.	//JS文件代码
2.	Page({
3.	    data: {
4.	      value1 : 'admin',
5.	      value2 : '123456'
6.	    }
7.	})
　　
　　上述代码最终会组合出对象{username: 'admin', password: '123456'}。其中，WXML代码部分使用了<template>标签，该标签可以用于定义模板。
　　用户也可以使用“…”符号将对象内容展开显示，示例代码如下：
　　
1.	<!--WXML页面代码-->
2.	<template is="test" data="{{…student, gender: 2}}"></template>

1.	//JS文件代码
2.	Page({
3.	    data: {
4.	        student: {
5.	            stuID: '123',
6.	            stuName: '张三'
7.	        }
8.	    }
9.	})
　　
　　上述代码最终会组合出对象{ stuID:'123', stuName:'张三', gender: 2}。
　　如果对象中元素的key和value名称相同，可以省略表达。示例代码如下：
　　
1.	<!--WXML页面代码-->
2.	<template is="test" data="{{x, y}}"></template>	<!--{{x:x, y:y}}的简写形式-->

1.	//JS文件代码
2.	Page({
3.	    data: {
4.	        x: '123',
5.	        y: '456'
6.	    }
7.	})
　　
　　上述代码最终会组合出对象{x: '123', y: '456'}。以上几种方式可以随意组合。
　　如果存在相同的key名称，后者会覆盖前者的内容。示例代码如下：
　　
1.	<!--WXML页面代码-->
2.	<template is="test" data="{{…obj, y, z: 3}}"></template> 

1.	//JS文件代码
2.	Page({
3.	    data: {
4.	        obj: {
5.	           x:1, 
6.	           y:2
7.	        }
8.	        y:6  //这里与第5行存在相同的key名称y，将覆盖前者的值
9.	    }
10.})
　　
　　上述代码最终会组合出对象{x:1, y:6, z:3}。
　　列表渲染
　　1）简单列表
　　小程序在组件上使用wx:for属性实现列表渲染，即同一个组件批量出现多次，内容可以不同。其原理是使用wx:for绑定一个数组，然后就可以自动用数据中的每个元素依次渲染该组件，形成批量效果。
　　例如：
　　
1.	<!--WXML-->
2.	<view wx:for='{{array}}'>学生{{index}}：{{item}}</view>

1.	//JS文件代码
2.	Page({
3.	    data:{
4.	        array:[ '张三', '李四', '王五']
5.	    }
6.	})
　　
　　运行结果等同于：
　　
1.	<view>学生0：张三</view>
2.	<view>学生1：李四</view>
3.	<view>学生2：王五</view>
　　
　　在以上代码中，index是数组当前项下标默认的变量名，item是数组当前项默认的变量名。
　　用户也可以使用wx:for-item和wx:for-index自定义当前元素和下标的变量名。将上面示例代码的WXML部分修改如下：
　　
1.	<view wx:for='{{array}}' wx:for-index='stuID' wx:for-item='stuName'>
2.	      学生{{stuID}}：{{stuName}}
3.	</view>
　　
能得到完全一样的运行结果。
　　需要注意的是，wx:for引号中数组的双花括号不可以没有，如果直接填写数组变量名会被拆解为字符的形式。例如：
　　
<view wx:for='array'>学生{{index}}：{{item}}</view>	<!--array会被拆解为'a','r', 'r', 'a', 'y'-->
　　
　　运行结果等同于：
　　
1.	<view>学生0：a</view>
2.	<view>学生1：r</view>
3.	<view>学生2：r</view>
4.	<view>学生3：a</view>
5.	<view>学生4：y</view>
　　
显然这不是预期效果。
　　2）嵌套列表
　　wx:for还可以嵌套出现，例如九九乘法口诀表的代码如下：
　　
1.	<!--WXML-->
2.	<view wx:for="{{array}}" wx:for-item="i">
3.	  <view wx:for="{{array}}" wx:for-item="j">
4.	    <view wx:if="{{i <= j}}">
5.	      {{i}} * {{j}}={{i * j}}
6.	    </view>
7.	  </view>
8.	</view>

1.	//JS文件代码
2.	Page({
3.	    data:{
4.	        array:[1, 2, 3, 4, 5, 6, 7, 8, 9]
5.	    }
6.	})
　　
　　3）多节点列表
　　用户可以将wx:for用在<block>标签上，以渲染一个包含多节点的结构块。例如：
　　
1.	<block wx:for="{{[ '张三', '李四', '王五']}}"> 	<!--数组也可以直接写在wx:for中-->
2.	  <view> 学号：{{index}} </view>
3.	  <view> 姓名：{{item}} </view>
4.	 </block>
　　
　　运行结果等同于：
　　
1.	  <view> 学号：0 </view>
2.	  <view> 姓名：张三 </view>
3.	  <view> 学号：1 </view>
4.	  <view> 姓名：李四 </view>
5.	  <view> 学号：2 </view>
6.	  <view> 姓名：王五 </view>
　　
　　注意：<block>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染。
　　
　　4）wx:key属性
　　前面使用wx:for的示例均会在Console控制台得到一个warning提示，如图3-5所示。

图3-5  Console控制台的warning提示
　　上述提示的大致内容是建议用户使用wx:key属性提高wx:for的性能表现。
　　这是由于如果列表中的项目位置会动态改变或者有新的项目添加到列表中，可能导致列表乱序。如果用户明确地知道该列表是静态的或者顺序不重要，可以选择忽略该提示。
　　若要避免乱序的情况或不想看到该提示，可以使用wx:key属性指定列表中的项目唯一标识符。wx:key的值以下面两种形式提供。
* 字符串：代表在wx:for循环数组中的一个项目属性，该属性值需要是列表中唯一的字符串或数字，且不能动态改变。
* 保留关键字*this：代表在wx:for循环中的项目本身，这种表示需要项目本身是唯一的字符串或者数字。
　　这里以wx:key属性为自定义字符串为例，代码如下：
　　
1.	<view wx:for="{{[ '张三', '李四', '王五']}}" wx:key='stu{{index}}'>
2.	  <view>学生{{index}}：{{item}} </view>
3.	</view>
　　
　　运行结果等同于：
　　
1.	<view>学生0：张三</view>  <!--wx:key='stu0'-->
2.	<view>学生1：李四</view>  <!--wx:key='stu1'-->
3.	<view>学生2：王五</view>  <!--wx:key='stu2'-->
　　
　　当数据改变导致页面被重新渲染时会自动校正带有key的组件，以确保项目被正确排序并且提高列表渲染时的效率。
　　条件渲染
　　1）简单条件
　　在小程序框架中使用wx:if="{{condition}}"判断是否需要渲染该代码块。例如：
　　
1.	<!--WXML-->
2.	<view wx:if="{{condition}}">测试组件</view>

1.	//JS文件代码
2.	Page({
3.	    data:{
4.	        condition: true
5.	    }
6.	})
　　
　　上述代码表示测试组件可以被显示出来，如果condition的值为false，则该组件无法显示。
　　用户也可以组合使用0～N个wx:elif加上一个wx:else添加其他条件，代码如下：
　　
1.	<!--WXML-->
2.	<view wx:if="{{x > 5}}"> A </view>
3.	<view wx:elif="{{x > 2}}"> B </view>
4.	<view wx:else> C </view>

1.	//JS文件代码
2.	Page({
3.	    data:{
4.	        x: 3
5.	    }
6.	})
　　
　　由于x>5不成立，A组件不被显示；x>2成立，B组件被显示并且直接忽略C组件。
　　2）多节点条件
　　如果要一次性判断多个组件标签，可以使用<block>标签将多个组件包装起来，并在<block>上使用wx:if控制属性。例如：
　　
1.	<block wx:if="{{true}}">
2.	  <view> view1 </view>
3.	  <view> view2 </view>
4.	</block>
　　
此时可以同时控制view1和view2的显示与隐藏。
　　3）wx:if与hidden 
　　读者通过学习可以发现，wx:if和hidden属性都可以规定组件的显示和隐藏效果。这两种属性的对比如表3-13所示。
表3-13  wx:if与hidden属性的对比
属性
取    值
渲    染
消    耗
wx:if
布尔值，true为显示，false为隐藏
wx:if是惰性的，如果初始渲染条件为 false，框架什么也不做，在条件第一次变成true的时候才开始局部渲染
更高的切换消耗
hidden
布尔值，true为隐藏，false为显示
无论条件是true或false，初始就会被渲染，只是简单地控制显示与隐藏
更高的初始渲染消耗
　　
　　综上所述，如果需要频繁地切换组件，用hidden更好；如果在运行时条件很少发生改变，则wx:if更好。开发者可以根据实际需要选择其中一种属性或两种组合使用。
　　模板
　　小程序框架允许在WXML文件中提供模板（template），模板可以用于定义代码片段，然后在不同的页面被重复调用。
　　1）定义模板
　　小程序使用<template>在WXML文件中定义代码片段作为模板使用，每个<template>都使用name属性自定义模板名称。例如：
　　
1.	<template name="myTemp">
2.	  <view>
3.	    <text> Name: {{name}} </text>
4.	    <text> Age: {{age}} </text>
5.	  </view>
6.	</template>
　　
　　上述代码表示制作了一个名称为myTemp的模板，该模板包含了一个<view>组件，其内部带有两个<text>组件，分别用于表示姓名和年龄，其中name和age可以动态变化。
　　2）使用模板
　　在新的WXML页面继续使用<template>标签就可以引用模板内容了，引用的<template>标签必须带有is属性，该属性值用于指定正确的模板名称才能成功引用，然后使用data属性将模板所需要的数据值传入。例如：
　　
1.	<!--WXML-->
2.	<template is="myTemp" data="{{…student}}"/>

1.	//JS文件代码
2.	Page({
3.	    data:{
4.	        student: {
5.	            name: '张三',
6.	            age: 20
7.	        }
8.	    }
9.	})
　　
　　模板拥有自己的作用域，只能使用data传入的数据。上述代码表示引用name为myTemp的模板，并且姓名和年龄分别更新为张三和20。
　　事件
　　事件是视图层到逻辑层的通信方式，有以下特点：
* 可以将用户的行为反馈到逻辑层进行处理；
* 可以绑定在组件上，当触发事件时就会执行逻辑层中对应的事件处理函数；
* 对象可以携带额外信息，例如id、dataset、touches。
　　1）事件的使用方式
　　首先需要在WXML页面为组件绑定一个事件处理函数，例如：
　　
<button id="myBtn" bindtap="myTap" data-my="hello">按钮组件</button>
　　
　　上述代码表示为按钮绑定了一个触摸单击事件，用手指触摸后将执行自定义函数myTap()。其中data-*为事件附加属性，可以由用户自定义或省略不写。
　　然后必须在对应的JS文件中添加同名函数，若函数不存在，则会在触发时报错。例如：
　　
1.	Page({
2.	    myTap:function(e){ 	// myTap:function(e)也可以简写为myTap(e)
3.	        console.log(e)  	//打印输出事件对象
4.	    }
5.	})
　　
　　运行代码，然后触摸单击该按钮，Console控制台输出的内容如图3-6所示。

图3-6  触发tap事件时Console控制台输出的内容
　　展开输出内容前面的箭头可以查看详情，整理后节选信息如下：
　　
1.	{
2.	  type:"tap",
3.	  timeStamp:2859,
4.	  currentTarget: {
5.	    id: "myBtn",
6.	    dataset:  {
7.	      my:"hello"
8.	    }
9.	  },
10.  detail: {x: 214, y: 17.5},
11.  touches:[{
12.    identifier:0,
13.    pageX:214,
14.    pageY:17.5,
15.    clientX:214,
16.    clientY:17.5
17.  }]
18.}
　　
　　由此可见输出的事件对象包含了按钮的id名称、附属的data-my属性值、坐标位置、事件类型等信息。例如想获得data-my中的数据值，可以描述为e.currentTarget.dataset.my，开发者之后可以利用这些信息进行后续的代码编写。
　　2）事件的分类
　　事件分为冒泡事件和非冒泡事件，说明如下。
* 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
* 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
　　WXML中支持的冒泡事件如表3-14所示。
表3-14  WXML中支持的冒泡事件
类    型
触 发 条 件
　touchstart
手指触摸动作开始
　touchmove
手指触摸后移动
　touchcancel
手指触摸动作被打断，例如来电提醒、弹窗
　touchend
手指触摸动作结束
　tap
手指触摸后马上离开
　longpress
手指触摸后超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发（最低版本为1.5.0）
　longtap
手指触摸后超过350ms再离开（推荐使用longpress事件代替）
　transitionend
会在WXSS transition或wx.createAnimation动画结束后触发
　animationstart
会在一个WXSS animation动画开始时触发
　animationiteration
会在一个WXSS animation一次迭代结束时触发
　animationend
会在一个WXSS animation动画完成时触发
　touchforcechange
在支持3D Touch的iPhone设备上重按时会触发（最低版本为1.9.90）
　　
　　注意：除了表3-14之外的其他组件自定义事件，如无特殊声明，都是非冒泡事件，例如表单<form>的提交事件、输入框<input>的输入事件等，详见第4章“小程序组件”。
　　
　　3）事件绑定和冒泡
　　事件绑定的写法与组件的属性描述相同，均是以key=value的形式，说明如下。
* key：以bind或catch开头，然后跟事件的类型，例如bindtap、catchtouchstart。自基础库版本1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，例如bind:tap、catch:touchstart。
* value：一个字符串，需要在对应的Page中定义同名的函数。
　　bind事件和catch事件的区别是，bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
　　例如有3个<view>组件A、B、C，其中A包含B、B包含C，代码如下：
　　
1.	<view id="A" bindtap="tap1">  <!--冒泡事件，但没有父节点了不传递-->
2.	  View A
3.	  <view id="B" catchtap="tap2">  <!--阻止了冒泡事件，不传递给父节点View A-->
4.	    View B
5.	    <view id="C" bindtap="tap3">  <!--冒泡事件，传递给父节点View B-->
6.	      View C
7.	    </view>
8.	  </view>
9.	</view>
　　
　　此时如果单击C组件会触发tap3，然后tap事件会向上冒泡至父节点View B导致触发tap2，但由于B组件使用的是catchtap，所以阻止了tap事件继续冒泡；如果单击了B组件会触发tap2；单击A组件会触发tap1。
　　4）事件的捕获阶段
　　自基础库版本1.5.0起，触摸类事件支持捕获阶段，可以在组件的冒泡事件被触发之前进行事件的捕获，使其无法冒泡。捕获阶段事件的顺序与冒泡阶段完全相反，是由外向内进行捕获。
　　事件捕获的写法是capture-bind（或capture-catch）:key=value的形式，说明如下。
* capture-bind：在冒泡阶段之前捕获事件。
* capture-catch：在冒泡阶段之前捕获事件，并且取消冒泡阶段和中断捕获。
* key：事件的类型，例如tap、touchstart等，但只能是触摸类事件。
* value：一个字符串，需要在对应的Page中定义同名的函数。
　　例如有两个<view>组件A和B，其中A包含B，代码如下：
　　
1.	<view id="A" bindtap="tap1" capture-bind:tap="tap2">
2.	  View A
3.	  <view id="B" bindtap="tap3" capture-bind:tap="tap4">
4.	    View B
5.	  </view>
6.	</view>
　　
　　如果单击组件B会先后调用tap2、tap4、tap3和tap1。这是由于捕获优先级大于冒泡，且由外向内，所以会首先触发tap2然后是tap4。捕获阶段结束后由内向外触发冒泡事件，因此接着触发的是tap3最后是tap1。
　　
　　注意：若把上述代码中第1行的capture-bind替换为capture-catch，则只会触发tap2，然后捕获被中断，冒泡阶段也被取消。
　　
　　5）事件对象详解
　　事件对象可以分为基础事件（BaseEvent）、自定义事件（CustomEvent）和触摸事件（TouchEvent）。事件对象所包含的具体属性如表3-15所示。

表3-15  事件参数
基础事件（BaseEvent）对象属性列表
属    性
类    型
说    明
 type
     String
     事件类型
 timeStamp
     Integer
     事件生成时的时间戳
 target
     Object
     触发事件的组件的一些属性值集合
 currentTarget
     Object
     当前组件的一些属性值集合
自定义事件（CustomEvent）对象属性列表（继承 BaseEvent）
属    性
类    型
说    明
 detail
Object
　　额外的信息
触摸事件（TouchEvent）对象属性列表（继承 BaseEvent）
属    性
类    型
说    明
 touches
Array
　　触摸事件，当前停留在屏幕中的触摸点信息的数组
 changedTouches
Array
　　触摸事件，当前变化的触摸点信息的数组
　　
　　注意：<canvas>组件中的触摸事件不可以冒泡，所以没有currentTarget属性。
　　
　　基础事件对象中的target和currentTarget属性包含的参数相同，如表3-16所示。
表3-16  target和currentTarget参数
属    性
类    型
说    明
　　id
String
　　　　当前组件的ID
　　tagName
String
　　　　当前组件的类型
　　dataset
Object
　　　　当前组件上由data-开头的自定义属性组成的集合
　　
　　其中dataset只能接受data-*的传递形式，例如：
　　
<button bindtap="myTap" data-test="hello">按钮组件</button>
　　
　　触发事件后dataset所获得的集合就是{test: "hello"}。
　　如果描述多个词用连字符（-）连接，会被强制转换为驼峰标记法（又称为Camel标记法，特点是第一个单词全部小写，后面每个单词只有首字母大写），例如：
　　
<button bindtap="myTap" data-my-test="hello">按钮组件</button>
　　
　　触发事件后dataset所获得的集合就是{myTest: "hello"}。
　　如果同一个词里面有大写字母，会被强制转换为小写字母，例如：
　　
<button bindtap="myTap" data-myTest="hello">按钮组件</button>
　　
　　触发事件后dataset所获得的集合就是{mytest: "hello"}。
　　自定义事件对象中的detail属性用于携带数据，不同的组件所携带的detail有所差异。例如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息等，具体用法详见第4章。
　　触摸事件对象的touches是一个数组，里面每一个元素都是一个单独的touch对象，表示当前停留在屏幕上的触摸点，属性如表3-17所示。
表3-17  touch对象参数
属    性
类    型
说    明
identifier
Number
触摸点的标识符
pageX, pageY
Number
距离文档左上角的距离，文档的左上角为原点，横向为X轴，纵向为Y轴
clientX, clientY
Number
距离页面可显示区域（屏幕除去导航条）左上角的距离，横向为X轴，纵向为Y轴
　　
　　canvas 触摸事件中携带的touches是CanvasTouch对象形成的数组，属性如表3-18所示。
表3-18  CanvasTouch对象参数
属    性
类    型 
说    明
identifier
Number
触摸点的标识符
   x, y
Number
距离Canvas左上角的距离，Canvas的左上角为原点，横向为X轴，纵向为Y轴
　　
　　changeTouches属性与touches完全相同，表示有变化的触摸点，例如从无变有（touchstart）、位置变化（touchmove）、从有变无（touchend、touchcancel）。
　　引用
　　WXML提供了import和include两种文件引用方式。
　　1）import
　　小程序可以使用<template>标签在目标文件中事先定义好模板，然后在当前页面使用<import>标签引用<template>中的内容。
　　例如，在tmpl.wxml文件中使用<template>定义一个名称为tmpl01的模板：
　　
1.	<template name="tmpl01">
2.	  <text>{{text}}</text>
3.	</template>
　　
　　然后在首页 index.wxml 中使用<import>引用tmpl.wxml，就可以使用tmpl01模板：
　　
1.	<import src="tmpl.wxml"/>
2.	<template is="tmpl01" data="{{text: 'hello'}}"/>
　　
　　此时等同于在index.wxml中显示了：
　　
<text>hello</text>
　　
　　需要注意的是，<import>有作用域的概念，即只会引用目标文件自己定义的template，而不会引用目标文件里面用<import>引用的第三方模板。
　　假设有A、B、C 3个页面，其中B import A，且C import B，那么B页面可以使用A页面定义的<template>模板，C页面可以使用B页面定义的<template>模板，但是C页面不可以使用A页面定义的<template>模板，即使该模板已经被B页面引用。
　　A页面a.wxml的代码如下：
　　
1.	<template name="A">
2.	  <text> A页面模板</text>
3.	</template>
　　
　　B页面b.wxml的代码如下：
　　
1.	<import src="a.wxml"/>
2.	<template name="B">
3.	  <text> B页面模板</text>
4.	</template>
　　
　　C页面c.wxml的代码如下：
　　
1.	<import src="b.wxml"/>
2.	<template is="A"/>  <!-- 引用模板失败！C必须自己import A才可以 -->
3.	<template is="B"/>  <!-- 引用模板成功！C页面有import B -->
　　
　　这是为了避免多个页面彼此互相连接引用陷入逻辑错误。
　　2）include
　　小程序使用<include>将目标文件除了<template>以外的整个代码引入，相当于把目标文件的代码直接复制到了<include>标签的位置。
　　例如为页面制作统一的页眉、页脚，示例如下。
　　页眉header.wxml的代码：
　　
<view>这是小程序的页眉</view>
　　
　　页脚footer.wxml的代码：
　　
<view>这是小程序的页脚</view>
　　
　　首页index.wxml的代码：
　　
1.	<include src="header.wxml"/>
2.	<view>正文部分</view>
3.	<include src="footer.wxml"/>
　　
　　<import>标签更适合于统一样式但内容需要动态变化的情况；<include>标签更适合于无须改动目标文件的情况。
3.2.2  WXSS
　　WXSS文件的全称是WeiXin Style Sheets（微信样式表），这是一种样式语言，用于描述WXML的组件样式（例如尺寸、颜色、边框效果等）。
　　为了适应广大的前端开发者，WXSS具有CSS的大部分特性，同时为了更适合开发微信小程序，WXSS对CSS进行了扩充以及修改。与CSS相比，WXSS独有的特性是尺寸单位和样式导入。
　　尺寸单位
　　小程序规定了全新的尺寸单位rpx（responsive pixel），可以根据屏幕宽度进行自适应。其原理是无视设备原先的尺寸，统一规定屏幕宽度为750rpx。
　　rpx不是固定值，屏幕越大，1rpx对应的像素就越大。例如在iPhone6上，屏幕宽度       为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理         像素。
　　常见机型的尺寸单位对比如表3-19所示。
表3-19  手机设备尺寸单位对比表
设    备
rpx换算px（屏幕宽度/750）
px换算rpx（750/屏幕宽度）
　　　　　iPhone5
         1rpx = 0.42px
　　　　1px = 2.34rpx
　　　　　iPhone6
         1rpx = 0.5px
　　　　1px = 2rpx
　　　　　iPhone6 Plus
         1rpx = 0.552px
　　　　1px = 1.81rpx
　　
　　提示：由于iPhone6换算较为方便，建议开发者用该设备作为视觉设计稿的标准。
　　
　　样式导入
　　小程序在WXSS样式表中使用@import语句导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
　　例如有公共样式表common.wxss，代码如下：
　　
1.	.red{
2.	  color:red;
3.	}
　　
　　然后可以在其他任意样式表中使用@import语句对其进行引用。例如a. wxss的代码如下：
　　
1.	@import "common.wxss";
2.	.blue {
3.	  color:blue;
4.	}
　　
　　此时，.red和.blue样式均能被页面a.wxml使用。
　　常用属性
　　WXSS所支持的样式属性与CSS属性类似，为方便读者理解本节的示例代码，表3-20列出了部分常用样式属性和参考值。
表3-20  常用样式属性和参考值
样 式 属 性
含    义
参  考  值
   background-color
　　背景色
　　颜色名，例如red表示红色
   color
　　前景色
　　同上
   font-size
　　字体大小
　　例如16px表示16像素大小的字体
   border
　　边框
　　例如3px solid blue表示宽度为3像素的蓝色实线
   width
　　宽度
　　例如20px表示20像素的宽度
   height
　　高度
　　例如100px表示100像素的高度
　　
　　颜色可以用以下几种方式表示。
* RBG颜色：用RGB红绿蓝三通道色彩表示法，例如rgb(255,0,0)表示红色。
* RGBA颜色：在RGB的基础上加上颜色透明度，例如rgba(255,0,0,0.5)表示半透明    红色。
* 十六进制颜色：又称为HexColor，用#加上6位数字表示，例如#ff0000表示红色。
* 预定义颜色：使用颜色英文单词的形式表示，例如red表示红色。小程序目前共预设了148种颜色名称，见附录。
　　内联样式
　　小程序允许使用style和class属性控制组件的样式。
　　1）style
　　style属性又称为行内样式，可直接将样式代码写到组件的首标签中。例如：
　　
<view style="color:red;background-color:yellow">测试</view>
　　
　　上述代码表示当前这个<view>组件中的文本将变为红色、背景将变为黄色。
　　style也支持动态样式效果，例如：
　　
<view style="color:{{color}} ">测试</view>
　　
　　上述代码表示组件中的文本颜色将由页面JS文件的data.color属性规定。
　　官方建议开发者尽量不要将静态的样式写进style中，以免影响渲染速度。如果是静态的样式，可以统一写到class中。
　　2）class
　　小程序使用class属性指定样式规则，其属性值由一个或多个自定义样式类名组成，多个样式类名之间用空格分隔。
　　例如，在test.wxss中规定了两个样式：
　　
1.	.style01{
2.	    color: red;  //文字为红色
3.	}
4.	.style02{
5.	    font-size: 20px;  //字体大小为20像素
6.	    font-weight: bold;  //字体加粗
7.	}
　　
　　在test.wxml中代码如下：
　　
<view class="style01 style02">测试</view>
　　
　　上述代码表示组件同时接受.style01和.style02的样式规则。注意，在class属性值的引号内部不需要加上类名前面的点。
　　选择器
　　小程序目前在WXSS样式表中支持的选择器如表3-21所示。
表3-21  选择器
选  择  器
样    例
描    述
   .class
 .demo
       选择所有拥有class="demo"属性的组件
   #id
 #test
       选择拥有id="test"属性的组件
   element
 view
       选择所有view组件
   element, element
 view, text
       选择所有文件的view组件和所有的text组件
   ::after
 view::after
       在view组件后边插入内容
   ::before
 view::before
       在view组件前边插入内容
　　
　　例如，在WXSS样式表中规定：
　　
1.	view{
2.	   width:100rpx;
3.	}
　　
　　上述代码表示将当前页面中所有view组件的宽度都更新为100rpx。
　　全局样式与局部样式
　　对于小程序WXSS样式表中规定的样式，根据其作用范围分为两类：在app.wxss中的样式为全局样式，作用于每一个页面；在页面WXSS文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。
3.2.3  组件
　　组件是WXML页面上的基本单位，例如小程序页面上的按钮、图片、文本等都是用组件渲染出来的，详细介绍见第4章“小程序组件”。
3.3  flex布局
3.3.1  基本概念
　　flex模型
　　小程序使用flex模型提高页面布局的效率。这是一种灵活的布局模型，当页面需要适应不同屏幕尺寸及设备类型时该模型可以确保元素在恰当的位置。
　　容器和项目
　　在flex布局中，用于包含内容的组件称为容器（container），容器内部的组件称为项目（item）。容器允许包含嵌套，例如：
　　
1.	<view id="A">
2.	    <view id="B">
3.	        <view id="C"></view>
4.	    </view>
5.	</view>
　　
　　在上述代码中共有3个<view>组件，对于A、B来说，A是容器，B是项目；对于B、C来说，B是容器，C是项目。
　　坐标轴
　　flex布局的坐标系是以容器左上角的点为原点，自原点往右、往下两条坐标轴。在默认情况下是水平布局，即水平方向从左往右为主轴（main axis），垂直方向自上而下为交叉轴（cross axis），如图3-7（a）所示。用户也可以使用样式属性flex-direction: column将主轴与交叉轴的位置互换，如图3-7（b）所示。
     
                    （a）水平布局                                      （b）垂直布局
图3-7  坐标轴对照图
　　flex属性
　　在小程序中，与flex布局模型相关的样式属性根据其所属标签的类型可以分为容器属性和项目属性。
　　容器属性用于规定容器的布局方式，从而控制内部项目的排列和对齐，如表3-22所示。
表3-22  flex布局中的容器属性
属    性
说    明
默认值
其他有效值
flex-direction
设置项目的排列方向
row
row-reverse|column|column-reverse
flex-wrap
设置项目是否换行
nowrap
wrap|wrap-reverse
justify-content
设置项目在主轴方向上的对齐方式
flex-start
flex-end|center|space-between|
space-around|space-evenly
align-items
设置水平方向上的对齐方式
stretch
center|flex-end|baseline|flex-start
align-content
当多行排列时，设置行在交叉轴方向上的对齐方式
stretch
flex-start|center|flex-end|space-between|space-around| space-evenly
　　
　　项目属性用于设置容器内部项目的尺寸、位置以及对齐方式，如表3-23所示。
表3-23  flex布局中的项目属性
属    性
说    明
默认值
其他有效值
order
设置项目在主轴上的排列顺序
 0
<integer>
flex-shrink
收缩在主轴上溢出的项目
 1
<number>
flex-grow
扩张在主轴方向上还有空间的项目
 0
<number>
flex-basis
代替项目的宽/高属性
 auto
<length>
flex
flex-shrink、flex-grow和flex-basis 3种属性的综合简写方式
 无
none|auto|
@flex-grow @flex-shrink @flex-basis
align-self
设置项目在行中交叉轴上的对齐方式
 auto
flex-start|flex-end|center|baseline| stretch
　　
　　例如，无法确定容器组件的宽/高却需要内部项目垂直居中，WXSS代码如下：
　　
1.	.container{
2.	  display: flex; 			/*使用flex布局（必写语句）*/
3.	  flex-direction: column; 	/*排列方向：垂直*/
4.	  justify-content: center; 	/*内容调整：居中*/
5.	}
　　
　　后续章节将详细讲解这些属性的作用。
3.3.2  容器属性
　　flex-direction属性
　　flex-direction属性用于设置主轴方向，通过设置坐标轴可以规定项目的排列方向。
　　其语法格式如下：
　　
.container{
  flex-direction: row（默认值）| row-reverse | column | column-reverse
}
　　
　　对属性值说明如下。
* row：默认值，主轴在水平方向上从左到右，项目按照主轴方向从左到右排列。
* row-reverse：主轴是row的反方向，项目按照主轴方向从右到左排列。
* column：主轴在垂直方向上从上而下，项目按照主轴方向从上往下排列。
* column-reverse：主轴是column的反方向，项目按照主轴方向从下往上排列。
　　假设有项目A、B、C 3个组件，高、宽均相同，flex-direction取不同值时的效果如图3-8所示。
 
                    （a）row（默认值）	                           （b）row-reverse
 
                       （c）column	                              （d）column-reverse
图3-8  flex-direction属性值对照图
　　flex-wrap属性
　　flex-wrap属性用于规定是否允许项目换行，以及多行排列时换行的方向。
　　其语法格式如下：
　　
.container{
  flex-wrap: nowrap（默认值）| wrap | wrap-reverse
}
　　
　　对属性值说明如下。
* nowrap：默认值，表示不换行。如果单行内容过多，项目宽度可能会被压缩。
* wrap：当容器单行容不下所有项目时允许换行排列。
* wrap-reverse：当容器单行容不下所有项目时允许换行排列，换行方向为wrap的反方向。
　　这里以水平方向为例，假设有项目A、B、C、D 4个组件，宽、高均相同，flex-wrap取不同值时的效果如图3-9所示。
  
         （a）nowrap	                         （b）wrap	                    （c）wrap-reverse
图3-9  flex-wrap属性值对照图
　　justify-content属性
　　justify-content属性用于设置项目在主轴方向上的对齐方式，以及分配项目之间及其周围多余的空间。
　　其语法格式如下：
　　
.container{
  justify-content: flex-start（默认值）| flex-end| center| space-between| 	space-around| space-evenly
}
　　
　　对属性值说明如下。
* flex-start：默认值，表示项目对齐主轴起点，项目间不留空隙。
* center：项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离。
* flex-end：项目对齐主轴终点，项目间不留空隙。
* space-between：项目间距相等，第一个和最后一个项目分别离起点/终点的距离为0。
* space-around：与space-between相似，不同之处为第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间间距的一半。
* space-evenly：项目间距、第一个项目离主轴起点以及最后一个项目离终点的距离均相等。
　　这里以水平方向作为主轴为例，假设有项目A、B、C几个组件，宽、高完全相同，justify-content取不同值时的效果如图3-10所示。
     
                     （a）flex-start	                                  （b）flex-end
     
                     （c）center	                                    （d）space-between
图3-10  justify-content属性值对照图
    
                （e）space-around	                                     （f）space-evenly
图3-10 （续）
　　align-items属性
　　align-items属性用于设置项目在行中的对齐方式。
　　其语法格式如下：
　　
.container{
  align-items:stretch（默认值）| flex-start | center | flex-end | baseline
}
　　
　　对属性值说明如下。
* stretch（默认值）：未设置项目尺寸时将项目拉伸至填满交叉轴。
* flex-start：项目顶部与交叉轴起点对齐。
* center：项目在交叉轴居中对齐。
* flex-end：项目底部与交叉轴终点对齐。
* baseline：项目与行的基线对齐，在未单独设置基线时等同于flex-start。
　　这里以垂直方向作为主轴为例，假设有项目A、B、C 3个组件，宽度分别为200rpx、300rpx、400rpx（取值为stretch时暂不设置），align-items取不同值时的效果如图3-11所示。
  
                  （a）stretch（默认值）	                         （b）flex-start
  
                       （c）center	                             （d）flex-end
图3-11  align-items属性值对照图
　　align-content属性
　　align-content属性用于多行排列时设置项目在交叉轴方向上的对齐方式，以及分配项目之间及其周围多余的空间。
　　其语法格式如下：
　　   
.container{
  align-content: stretch（默认值） | flex-start | center | flex-end | space-between    |space-around | space-evenly
}
　　   
　　对属性值说明如下。
* stretch：默认值，未设置项目尺寸时将各行中的项目拉伸至填满交叉轴。当设置了项目尺寸时项目尺寸不变，项目行拉伸至填满交叉轴。
* flex-start：首行在交叉轴起点开始排列，行间不留间距。
* center：行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点的距离相等。
* flex-end：尾行在交叉轴终点开始排列，行间不留间距。
* space-between：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点的距离为0。
* space-around：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点的距离为行与行间间距的一半。
* space-evenly：行间间距、首行离交叉轴起点和尾行离交叉轴终点的距离相等。
　　
　　注意：多行排列时要设置flex-wrap属性值为wrap，表示允许换行。
　　
　　这里以水平方向作为主轴为例，假设有项目A～E共5个组件且宽度不同，align-content取不同值时的效果如图3-12所示。
    
                   （a）stretch（默认值）	                         （b）flex-start
    
                        （c）center	                             （d）flex-end
图3-12  align-content属性值对照图
       
                      （e）space-between	                         （f）space-around

     （g）space-evenly
图3-12 （续）
3.3.3  项目属性
　　order属性
　　order属性用于设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前。另外，该属性值为整数。
　　其语法格式如下：
　　
.item{
  order: 0（默认值）| <integer>
}
　　
　　这里以水平方向为例，假设有项目A、B、C 3个组件，宽、高均相同，order取不同值时的效果如图3-13所示。

图3-13  order属性值对照图
　　flex-shrink属性
　　flex-shrink属性用于设置项目收缩因子。当项目在主轴方向上溢出时，通过项目收缩因子的规定比例压缩项目以适应容器。
　　其语法格式如下：
　　
.item{
  flex-shrink: 1（默认值）| <number>
}
　　
　　其属性值为项目的收缩因子，只能是非负数。
　　当发生溢出时，项目尺寸的收缩公式如下：
　　
最终长度=原长度×(1-溢出长度×收缩因子/压缩总权重)
　　
　　注意：当遇到小数的情况时向下取整，不进行四舍五入。
　　
　　其中压缩总权重的计算公式如下：
　　
压缩总权重=长度1×收缩因子1+长度2×收缩因子2 … +长度N×收缩因子N
　　
　　注意：当从左往右为主轴时，长度指的是宽度；当从上往下为主轴时，长度指的是      高度。
　　
　　这里以水平方向为例，假设有项目A、B、C 几个组件，宽度均为200px，分别设置项目的收缩因子为1、2、3，WXSS示例代码如下：
　　
1.	.A{
2.	  width: 200px;
3.	  flex-shrink:1;			/*默认值，可以省略该属性，不写*/
4.	}
5.	.B{
6.	  width: 200px;
7.	  flex-shrink:2;
8.	}
9.	.C{
10.  width: 200px;
11.  flex-shrink:3;
12.}
　　
　　假设容器宽度仅有500px，此时3个项目的宽度之和为600px，显然会发生溢出100px的情况，因此触发收缩因子进行宽度压缩。
　　首先计算压缩总权重：
　　
压缩总权重=200×1+200×2+200×3=1200px
　　
　　当发生溢出时，项目尺寸的收缩公式如下：
　　
项目A的宽度=200×(1-100×1/1200)≈183px
项目B的宽度=200×(1-100×2/1200)≈166px
项目C的宽度=200×(1-100×3/1200)=150px
　　
　　由此可见，原先同样宽度的项目组件由于收缩因子不同被压缩后的宽度各不相同，并且证明了收缩因子数值越大，被压缩后的长度越短。
　　上述例子的示意效果如图3-14所示。
 
                （a）项目组件在压缩前	                               （b）项目组件在压缩后
图3-14  flex-shrink应用对照图
　　需要注意的是，只有项目的flex-shrink属性值总和大于1时溢出长度按照实际计算，当总和小于1时溢出长度的计算公式如下：
　　
溢出长度=实际溢出长度×(收缩因子1+收缩因子2+…+收缩因子N)
　　
　　例如，上面示例中项目A、B、C的flex-shrink属性值如果分别更新为0.1、0.2、0.3，总和为0.6，小于1，则溢出长度的计算如下：
　　
溢出长度=100×(0.1+0.2+0.3)=60px
　　
　　后续的计算和前面完全一样。
　　flex-grow属性
　　flex-grow属性用于设置项目扩张因子。当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配。
　　其语法格式如下：
　　
.item{
  flex-grow: 0（默认值）| <number>
}
　　
　　其属性值为项目的扩张因子，只能是非负数。
　　当发生扩张时，项目尺寸的扩张公式如下：
　　
最终长度=原长度+扩张单位×扩张因子
　　
　　注意：当遇到小数的情况时向下取整，不进行四舍五入。
　　
　　其中，扩张单位的计算公式如下：
　　
扩张单位=剩余空间/(扩张因子1+扩张因子2+…+扩张因子N)
　　
　　注意：当从左往右为主轴时，长度指的是宽度；当从上往下为主轴时，长度指的是高度。
　　
　　这里以水平方向为例，假设有项目A、B、C 3个组件，宽度均为100px，分别设置项目的扩张因子为0、1、2，WXSS示例代码如下：
　　
1.	.A{
2.	  width: 100px;
3.	  flex-grow:0; 		/*默认值，可以省略该属性，不写*/
4.	}
5.	.B{
6.	  width: 100px;
7.	  flex-grow:1;
8.	}
9.	.C{
10.  width: 100px;
11.  flex-grow:2;
12.}
　　
　　假设容器宽度为600px，此时3个项目的宽度之和为300px，显然会出现多出300px剩余空间的情况，因此触发扩张因子进行宽度扩张。
　　首先计算扩张单位：
　　
扩张单位=300/(0+1+2)=100px
　　
　　然后将剩余空间分配给项目宽度，新的项目宽度扩张公式如下：
　　
项目A的宽度=100+100×0=100px
项目B的宽度=100+100×1=200px
项目C的宽度=100+100×2=300px
　　
　　由此可见，原先同样宽度的项目组件由于扩张因子不同被扩张后的宽度各不相同，并且证明了扩张因子数值越大，被扩张后的长度越长。
　　上述示例的示意效果如图3-15所示。

（a）项目组件在扩张前

（b）项目组件在扩张后
图3-15  flex-grow应用对照图
　　需要注意的是，只有项目的flex-grow属性值总和大于1时扩张单位按照实际计算，当总和小于1时扩张单位就是全部的剩余空间。
　　例如，上面示例中项目A、B、C的flex-grow属性值如果分别更新为0.1、0.2、0.3，总和为0.6，小于1，则扩张单位就是300px。后续的计算与前面完全一样。
　　flex-basis属性
　　flex-basis属性根据主轴方向代替项目的宽或高，具体说明如下：
* 当容器设置flex-direction为row或row-reverse时，若项目的flex-basis和width属性同时存在数值，则flex-basis代替width属性。
* 当容器设置flex-direction为column或column-reverse时，若项目的flex-basis和height属性同时存在数值，则flex-basis代替项目的height属性。
　　其语法格式如下：
　　
.item{
  flex-basis: auto（默认值）| <number>px
}
　　需要注意的是，数值比auto的优先级更高，如果flex-basis属性值为auto，而width（或height）属性值是数值，则采用数值作为最终属性值。
　　这里以水平方向作为主轴为例，假设有项目A、B、C 3个组件且宽度均为100px，为A追加flex-basis值为200px，最终示意效果如图3-16所示。
               
图3-16  flex-basis属性值对照图
　　由该图可见，项目A的宽度比B和C宽，这是因为flex-basis的优先级大于width。
　　flex属性
　　flex属性是flex-grow、flex-shrink、flex-basis的简写方式，其语法格式如下：
　　
.item{
  flex: none | auto | @flex-grow @flex-shrink@flex-basis
}
　　
　　若将属性值设置为none，等价于0 0 auto；若设置为auto，等价于1 1 auto。
　　align-self属性
　　align-self属性设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items，这么做可以对项目的对齐方式做特殊处理。
　　其语法格式如下：
　　
.item{
  align-self: auto（默认值）| flex-start | center | flex-end | baseline |stretch
}
　　
　　其默认属性值为auto，表示继承容器的align-items值。如果容器没有设置align-items属性，则align-self的默认值auto表示为stretch。其他属性值参照align-items的说明。
　　这里以水平方向为例，假设有项目A、B、C、D 4个组件，其中A、B、C的宽/高均相同，D不定义高度，align-self取不同值时的效果如图3-17所示。
              
图3-17  align-self属性值对照图