微信小程序指南总结

1、小程序目录结构小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：文件       必填     作用app.js      是 小程序逻辑app.json 是小程序公共设置app.wxss 否小程序公共样式表一个小程序页面由四个文件组成，分别是：文件类型 必填作用js 是 页面逻辑wxml 是 页面结构wxss 否 页面样式表json 否 页面配置注意：为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名。2、app.json配置属性              类型        必填     描述pages          String Array是 设置页面路径window            Object        否 设置默认页面的窗口表现tabBar            Object        否      设置底部 tab 的表现networkTimeout    Object      否       设置网络超时时间debug             Boolean       否       设置是否开启 debug 模式以下是一个包含了所有配置选项的简单配置app.json ：{"pages": ["pages/index/index","pages/logs/index"],"window": {"navigationBarTitleText": "Demo"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"}, {"pagePath": "pages/logs/logs","text": "日志"}]},"networkTimeout": {"request": 10000,"downloadFile": 10000},"debug": true}pages：接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。window：用于设置小程序的状态栏、导航条、标题、窗口背景色。属性 类型默认值 说明navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如"#000000"navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/whitenavigationBarTitleText String 导航栏标题文字内容backgroundColor HexColor #ffffff 窗口的背景色backgroundTextStyle String dark 下拉背景字体、loading 图的样式，仅支持 dark/lightenablePullDownRefresh Boolean false 是否开启下拉刷新，详见页面相关事件处理函数。注：HexColor（十六进制颜色值），如"#ff00ff"tabBar：tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。属性说明：属性        类型       必填 默认值描述color           HexColor 是       tab 上的文字默认颜色selectedColor HexColor 是       tab 上的文字选中时的颜色backgroundColor HexColor 是       tab 的背景色borderStyle String       否 black   tabbar上边框的颜色， 仅支持 black/whitelist            Array        是     tab 的列表，详见 list 属性说明，最少2个、最多5个 tabposition String       否 bottom可选值 bottom、top其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：属性            类型 必填 说明pagePath       String  是 页面路径，必须在 pages 中先定义text           String  是 tab 上按钮文字iconPath       String  是 图片路径，icon 大小限制为40kbselectedIconPath   String   是 选中时的图片路径，icon 大小限制为40kbnetworkTimeout：设置各种网络请求的超时时间。属性说明：属性        类型必填 说明request Number否 wx.request的超时时间，单位毫秒，默认为：60000connectSocket Number 否 wx.connectSocket的超时时间，单位毫秒，默认为：60000uploadFile Number否 wx.uploadFile的超时时间，单位毫秒，默认为：60000downloadFile Number否 wx.downloadFile的超时时间，单位毫秒，默认为：60000page.json：每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键。属性                        类型        默认值        描述navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如"#000000"navigationBarTextStyle        String        white        导航栏标题颜色，仅支持 black/whitenavigationBarTitleText        String 导航栏标题文字内容backgroundColor       HexColor #ffffff 窗口的背景色backgroundTextStyle        String        dark        下拉背景字体、loading 图的样式，仅支持 dark/lightenablePullDownRefresh        Boolean false        是否开启下拉刷新，详见页面相关事件处理函数。disableScroll                Boolean false        设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项底部导航修改步骤：1、制作图标并保存到项目(在项目下创建imgs文件夹保存图标文件)|_ imgs|_ icon_1.png|_ icon_2.png2、修改app.json{ "pages":["pages/index/index","pages/logs/logs" ], "window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black" }, "tabBar": {"list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "imgs/icon_1.png", "selectedIconPath": "imgs/icon_1.png"}, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "imgs/icon_2.png", "selectedIconPath": "imgs/icon_2.png"}] }

}

3、 注册程序、注册页面、分享设置a、注册程序 App()App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。object参数说明：属性            类型        描述                触发时机onLaunch        Function    生命周期函数--监听小程序初始化    当小程序初始化完成时，会触发 onLaunch（全局只触发一次）onShow          Function    生命周期函数--监听小程序显示      当小程序启动，或从后台进入前台显示，会触发 onShowonHide          Function    生命周期函数--监听小程序隐藏      当小程序从前台进入后台，会触发 onHideonError         Function    错误监听函数              当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息其他            Any         开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。示例：App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() {      // Do something when show. }, onHide: function() {      // Do something when hide. }, onError: function(msg) {    console.log(msg) }, globalData: 'I am global data' })getApp()小程序提供了全局的 getApp() 函数，可以获取到小程序实例。// other.jsvar appInstance = getApp()console.log(appInstance.globalData) // I am global data注意：App() 必须在 app.js 中注册，且不能注册多个。不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。通过 getApp() 获取实例之后，不要私自调用生命周期函数。b、注册页面 Page()Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。object 参数说明：属性               类型               描述data               Object      页面的初始数据    onLoad             Function    生命周期函数--监听页面加载    onReady            Function    生命周期函数--监听页面初次渲染完成onShow             Function    生命周期函数--监听页面显示    onHide             Function    生命周期函数--监听页面隐藏onUnload           Function    生命周期函数--监听页面卸载onPullDownRefresh  Function    页面相关事件处理函数--监听用户下拉动作    onReachBottom      Function    页面上拉触底事件的处理函数    onShareAppMessage  Function    用户点击右上角分享其他               Any         开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问生命周期函数说明onLoad: 页面加载一个页面只会调用一次。接收页面参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期onHide: 页面隐藏当navigateTo或底部tab切换时调用。onUnload: 页面卸载当redirectTo或navigateBack的时候调用。页面相关事件处理函数onPullDownRefresh: 下拉刷新监听用户下拉刷新事件。需要在config的window选项中开启enablePullDownRefresh。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。onShareAppMessage: 用户分享只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮用户点击分享按钮的时候会调用此事件需要 return 一个 Object，用于自定义分享内容分享设置演示Page({ ......, onShareAppMessage: function () {return { title: '自定义分享标题', desc: '自定义分享描述', path: '/page/user?id=123'} }})4、事件处理函数、数据绑定、页面跳转a、事件处理函数：除了初始化数据和生命周期函数，Page 中还可以定义一些特殊的函数：事件处理函数。在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行 Page 中定义的事件处理函数。示例代码：<view bindtap="viewTap"> click me </view>Page({ viewTap: function() {wx.showToast({title:'hi'}); }})b、数据绑定Page.prototype.setData()setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。注意：直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。setData() 参数格式接受一个对象，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。示例代码：Page({data:{"text1":"hi"},myfunc : function(){//wx.showToast({title:'hi'});this.setData({"text1":"hi......"});}});*c、页面跳转wx.navigateTo({url: "../logs/logs"

})

5、文件作用域及模块化a、文件作用域在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置，如：// app.jsApp({ globalData:{appName :'hcoder'}})// page.jsvar app = getApp();Page({data:{},myfunc : function(){//wx.showToast({title:'hi'});this.setData({"text1":"hi......"});},onLoad: function(){this.setData({'appName':app.globalData.appName});}});b、模块化我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。需要注意的是：exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。示例：//common.jsfunction toast(msg){wx.showToast({title:msg});}module.exports.toast = toast;//页面调用var app = getApp();var common = require('../../common.js');Page({data:{},myfunc : function(){common.toast('ok');this.setData({"text1":"hi......"});},onLoad: function(){this.setData({'appName':app.globalData.appName});}});6、 数据绑定数据绑定：WXML 中的动态数据均来自对应 Page 的 data。a、简单绑定数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：1.内容<view> {{ message }} </view>Page({ data: {message: 'Hello MINA!' }})2.组件属性(需要在双引号之内)<view id="item-{{id}}"> </view>Page({ data: {id: 0 }})3.控制属性(需要在双引号之内)<view wx:if="{{condition}}"> </view>Page({ data: {condition: true }})4.关键字(需要在双引号之内)true：boolean 类型的 true，代表真值。false： boolean 类型的 false，代表假值。<checkbox checked="{{false}}"> </checkbox>特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。b、运算可以在 {{}} 内进行简单的运算，支持的有如下几种方式：1.三元运算<view hidden="{{flag ? true : false}}"> Hidden </view>2.算数运算<view> {{a + b}} + {{c}} + d </view>Page({ data: {a: 1,b: 2,c: 3 }})view中的内容为 3 + 3 + d。3.逻辑判断<view wx:if="{{length > 5}}"> </view>4.字符串运算<view>{{"hello" + name}}</view>Page({ data:{name: 'MINA' }})5.数据路径运算<view>{{object.key}} {{array[0]}}</view>Page({ data: {object: {key: 'Hello '},array: ['MINA'] }})c、组合也可以在 Mustache 内直接进行组合，构成新的对象或者数组。1.数组<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>Page({ data: {zero: 0 }})最终组合成数组[0, 1, 2, 3, 4]。2. 对象<template is="objectCombine" data="{{for: a, bar: b}}"></template>Page({ data: {a: 1,b: 2 }})最终组合成的对象是 {for: 1, bar: 2}3.也可以用扩展运算符 ... 来将一个对象展开<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>Page({ data: {obj1: { a: 1, b: 2},obj2: { c: 3, d: 4} }})最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。4.如果对象的 key 和 value 相同，也可以间接地表达。<template is="objectCombine" data="{{foo, bar}}"></template>Page({ data: {foo: 'my-foo',bar: 'my-bar' }})最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}。注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如：<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>Page({ data: {obj1: { a: 1, b: 2},obj2: { b: 3, c: 4},a: 5 }})最终组合成的对象是 {a: 5, b: 3, c: 6}。

7.条件渲染与元素隐藏a.条件渲染wx:if在框架中，我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：<view class="red" wx:if="{{color=='red'}}"> red </view><view class="green" wx:elif="{{color=='green'}}"> green </view><view class="blue" wx:else> blue </view>b.wx:if与hidden异同：因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。8.列表渲染（数据循环）a.wx:for在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item<view wx:for="{{array}}"><view class="red">{{index}}. {{item.name}}</view></view>//jsdata: {array : [ {name:"小明", age: 18}, {name:"李磊", age: 19}]}使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：<view wx:for="{{array}}" wx:for-index="ix" wx:for-item="vals"><view class="red">{{ix}}. {{vals.name}}</view></view>b.wx:for也可以嵌套一个九九乘法表示例:<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view></view></view>c.block wx:for类似block wx:if，也可以将wx:for用在<block/>标签上，以渲染一个包含多节点的结构块。例如：<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view></block>d.wx:key如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。wx:key 的值以两种形式提供字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。示例代码：<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch><button bindtap="addToFront"> Add to the front </button>//js部分Page({ data: {objectArray: [ {id: 5, unique: 'unique_5'}, {id: 4, unique: 'unique_4'}, {id: 3, unique: 'unique_3'}, {id: 2, unique: 'unique_2'}, {id: 1, unique: 'unique_1'}, {id: 0, unique: 'unique_0'},],numberArray: [1, 2, 3, 4] },addToFront: function(e) {const length = this.data.objectArray.lengththis.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)this.setData({objectArray: this.data.objectArray}) }})9.模板WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。a.定义使用name属性，作为模板的名字。然后在<template/>内定义代码片段，如：<!-- index: int msg: string time: string--><template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view></template>b.使用使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：<template is="msgItem" data="{{...item}}"/>Page({ data: {item: { index: 0, msg: 'this is a template', time: '2016-09-15'} }})c.动态渲染is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：<template name="odd"><view> odd </view></template><template name="even"><view> even </view></template><block wx:for="{{[1, 2, 3, 4, 5]}}"><template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/></block>d.模板的作用域模板拥有自己的作用域，只能使用data传入的数据。10.引用WXML 提供两种文件引用方式import和include。a.importimport可以在该文件中使用目标文件定义的template，如：在 item.wxml 中定义了一个叫item的template：<!-- item.wxml --><template name="item"> <text>{{text}}</text></template>在 index.wxml 中引用了 item.wxml，就可以使用item模板：<import src="item.wxml"/><template is="item" data="{{text: 'forbar'}}"/>import 的作用域import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。<!-- A.wxml --><template name="A"><text> A template </text></template><!-- B.wxml --><import src="a.wxml"/><template name="B"><text> B template </text></template><!-- C.wxml --><import src="b.wxml"/><template is="A"/>  <!-- Error! Can not use tempalte when not import A. --><template is="B"/>b.includeinclude可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置，如：<!-- index.wxml --><include src="header.wxml"/><view> body </view><include src="footer.wxml"/><!-- header.wxml --><view> header </view><!-- footer.wxml --><view> footer </view>

11.事件a.什么是事件:事件是视图层到逻辑层的通讯方式。事件对象可以携带额外信息，如 id, dataset, touches。b.事件的使用方式在组件中绑定一个事件处理函数。如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>在相应的Page定义中写上相应的事件处理函数，参数是event。Page({  tapName: function(event) {console.log(event)  }})可以看到log出来的信息大致如下：{"type":"tap","timeStamp":895,"target": {  "id": "tapTest",  "dataset":  {"hi":"WeChat"  }},"currentTarget":  {  "id": "tapTest",  "dataset": {"hi":"WeChat"  }},"detail": {  "x":53,  "y":14},"touches":[{  "identifier":0,  "pageX":53,  "pageY":14,  "clientX":53,  "clientY":14}],"changedTouches":[{  "identifier":0,  "pageX":53,  "pageY":14,  "clientX":53,  "clientY":14}]}c.事件详解事件分为冒泡事件和非冒泡事件冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。WXML的冒泡事件列表：类型                      触发条件touchstart            手指触摸动作开始touchmove             手指触摸后移动touchcancel           手指触摸动作被打断，如来电提醒，弹窗touchend              手指触摸动作结束tap                   手指触摸后马上离开longtap               手指触摸后，超过350ms再离开注：除上表之外的其他组件自定义事件如无特殊申明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(详见各个组件)d.事件绑定事件绑定的写法同组件的属性，以 key、value 的形式。key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstartvalue 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。如在下边这个例子中，点击 inner view 会先后触发handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outter view 会触发handleTap1。<view id="outter" bindtap="handleTap1">  outer view  <view id="middle" catchtap="handleTap2">middle view<view id="inner" bindtap="handleTap3">  inner view</view>  </view></view>e.事件对象如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。BaseEvent 基础事件对象属性列表：属性             类型       说明type             String     事件类型timeStamp        Integer    事件生成时的时间戳target           Object     触发事件的组件的一些属性值集合currentTarget    Object     当前组件的一些属性值集合CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：属性    类型    说明detail    Object    额外的信息TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：属性               类型      说明touches            Array     触摸事件，当前停留在屏幕中的触摸点信息的数组changedTouches     Array     触摸事件，当前变化的触摸点信息的数组特殊事件：        <canvas/>  中的触摸事件不可冒泡，所以没有 currentTarget。type代表事件的类型。timeStamp页面打开到触发事件所经过的毫秒数。target触发事件的源组件。属性    类型    说明id    String    事件源组件的idtagName    String    当前组件的类型dataset    Object    事件源组件上由data-开头的自定义属性组成的集合currentTarget事件绑定的当前组件。属性    类型    说明id    String    当前组件的idtagName    String    当前组件的类型dataset    Object    当前组件上由data-开头的自定义属性组成的集合说明： target 和 currentTarget 可以参考上例中，点击 inner view 时，handleTap3 收到的事件对象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件对象 target 就是 inner，currentTarget 就是 middle。dataset在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.target.dataset 中会将连字符转成驼峰elementType。示例：<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>Page({  bindViewTap:function(event){event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法event.target.dataset.alphabeta === 2 // 大写会转为小写  }})touchestouches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。Touch 对象属性    类型    说明identifier    Number    触摸点的标识符pageX, pageY    Number    距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴clientX, clientY    Number    距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴CanvasTouch 对象属性    类型    说明    特殊说明identifier    Number    触摸点的标识符    x, y    Number    距离 Canvas 左上角的距离，Canvas 的左上角为原点 ，横向为X轴，纵向为Y轴changedToucheschangedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。detail自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。12.样式WXSSa.样式导入使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。示例代码：/** common.wxss **/.small-p {  padding:5px;}/** app.wxss **/@import "common.wxss";.middle-p {  padding:15px;}b.内联样式框架组件上支持使用 style、class 属性来控制组件的样式。style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。<view style="color:{{color}};" />class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。<view class="normal_view" />c.选择器目前支持的选择器有：选择器     样例                    样例描述.class       .intro                选择所有拥有 class="intro" 的组件#id         #firstname            选择拥有 id="firstname" 的组件element       view                  选择所有 view 组件element,   element view, checkbox   选择所有文档的 view 组件和所有的 checkbox 组件::after      view::after               在 view 组件后边插入内容::before     view::before              在 view 组件前边插入内容d.全局样式与局部样式定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

13.视图容器及基础内容a.view视图容器属性名    类型    默认值    说明hover    Boolean    false    是否启用点击态hover-class    String    none    指定按下去的样式类。当 hover-class="none" 时，没有点击态效果hover-start-time    Number    50    按住后多久出现点击态，单位毫秒hover-stay-time    Number    400    手指松开后点击态保留时间，单位毫秒示例：<view class="section">  <view class="section__title">flex-direction: row</view>  <view class="flex-wrp" style="flex-direction:row;"><view class="flex-item bc_green">1</view><view class="flex-item bc_red">2</view><view class="flex-item bc_blue">3</view>  </view></view><view class="section">  <view class="section__title">flex-direction: column</view>  <view class="flex-wrp" style="height: 300px;flex-direction:column;"><view class="flex-item bc_green">1</view><view class="flex-item bc_red">2</view><view class="flex-item bc_blue">3</view>  </view></view>样式代码.section__title{width:690rpx; margin:0px 30rpx; height:50px; line-height:50px; text-align:center; border-bottom:1px solid #D1D1D1;}.flex-item{width:200rpx; height:200rpx; display:inline-flex;}.flex-wrp{padding:20rpx; display:flex;}.BgRed{  background:#FF0000;}.BgGreen{  background:#00FF00;}.BgBlue{  background:#0000FF;}b.scroll-view 可滚动视图区域属性名                  类型    默认值    说明scroll-x              Boolean    false    允许横向滚动scroll-y              Boolean    false    允许纵向滚动upper-threshold       Number     50      距顶部/左边多远时（单位px），触发 scrolltoupper 事件lower-threshold       Number     50      距底部/右边多远时（单位px），触发 scrolltolower 事件scroll-top            Number          设置竖向滚动条位置scroll-left           Number          设置横向滚动条位置scroll-into-view      String          值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部bindscrolltoupper     EventHandle         滚动到顶部/左边，会触发 scrolltoupper 事件bindscrolltolower     EventHandle         滚动到底部/右边，会触发 scrolltolower 事件bindscroll            EventHandle         滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。演示代码<scroll-view scroll-y="true" style="height:200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"><view class="flex-wrp" style="flex-direction:column;"><view class="flex-item BgRed">1</view><view class="flex-item BgGreen">2</view><view class="flex-item BgBlue">3</view></view></scroll-view>js 部分Page({  upper: function(e) {console.log(e)  },  lower: function(e) {console.log(e)  },  scroll: function(e) {console.log(e)  }})c.swiper 滑块视图容器属性              类型            默认值   说明indicator-dots    Boolean         false    是否显示面板指示点    autoplay          Boolean         false    是否自动切换    current           Number          0        当前所在页面的 index    interval          Number          5000     自动切换时间间隔    duration          Number          500      滑动动画时长    circular          Boolean         false    是否采用衔接滑动    bindchange        EventHandle     current  改变时会触发 change 事件，event.detail = {current: current}swiper-item仅可放置在<swiper/>组件中，宽高自动设置为100%。示例代码：<swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  <block wx:for="{{imgUrls}}"><swiper-item>  <image src="{{item}}" class="slide-image" width="355" height="150"/></swiper-item>  </block></swiper><button bindtap="changeIndicatorDots"> indicator-dots </button><button bindtap="changeAutoplay"> autoplay </button><slider bindchange="intervalChange" show-value min="500" max="2000"/> interval<slider bindchange="durationChange" show-value min="1000" max="10000"/> durationPage({  data: {imgUrls: [  'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',  'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',  'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'],indicatorDots: false,autoplay: false,interval: 5000,duration: 1000  },  changeIndicatorDots: function(e) {this.setData({  indicatorDots: !this.data.indicatorDots})  },  changeAutoplay: function(e) {this.setData({  autoplay: !this.data.autoplay})  },  intervalChange: function(e) {this.setData({  interval: e.detail.value})  },  durationChange: function(e) {this.setData({  duration: e.detail.value})  }})d.icon 图标属性名    类型    默认值    说明type    String        icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clearsize    Number    23    icon的大小，单位pxcolor    Color        icon的颜色，同css的color演示代码<view class="group">  <block wx:for="{{iconType}}"><icon type="{{item}}" size="45"/>  </block></view>//js 部分Page({  data: {iconType: [  'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',  'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',  'info_circle', 'cancel', 'search', 'clear']  }})e.text 文本支持转义符"\"。<text/> 组件内只支持 <text/> 嵌套。除了文本节点以外的其他节点都无法长按选中。换行 "\n"f.progress 进度条属性名    类型    默认值    说明percent    Float    无    百分比0~100show-info    Boolean    false    在进度条右侧显示百分比stroke-width    Number    6    进度条线的宽度，单位pxcolor    Color    #09BB07    进度条颜色active    Boolean    false    进度条从左往右的动画演示代码<progress percent="80" active /><progress percent="20" show-info /><progress percent="40" stroke-width="12" /><progress percent="60" color="pink" />