一、配置小程序
1.全局配置：app.json文件中，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。跟着下面配置一下吧，哈哈哈
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小黄黄的小程序",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list":[
{
"pagePath":"pages/index/index",
"text":"首页"
},
{
"pagePath":"pages/logs/logs",
"text":"日志"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMinProgramAppIdList":[
"wxe5f52902cf4de896"
],
"style": "v2",
"sitemapLocation": "sitemap.json"
}
2.页面配置：每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
{
"usingComponents": {},
"navigationBarBackgroundColor": "#F66666",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "小黄日志页",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
3.sitemap 配置：微信现已开放小程序内搜索，开发者可以通过 `sitemap.json` 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：`mpcrawler` 及[场景值](https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html)：`1129`。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。
页面收录设置：可以对整个小程序的索引进行关闭（这个在小程序管理后台中设置）
sitemap配置：可以对特定页面的索引进行关闭（该文件就是用来配置小程序及其页面是否允许被微信索引）
示例一：所有页面都会被微信索引（默认情况）
{
"rules":[{
"action": "allow",
"page": "*"
}]
}
示例二：配置 path/to/page 页面不被索引，其余页面允许被索引
{
"rules":[{
"action": "disallow",
"page": "path/to/page"
}]
}
示例三：配置 path/to/page 页面被索引，其余页面不被索引
{
"rules":[{
"action": "allow",
"page": "path/to/page"
}, {
"action": "disallow",
"page": "*"
}]
}
示例四：包含 a 和 b 参数的 path/to/page 页面会被微信优先索引，其他页面都会被索引（具体看文档吧）
{
"rules":[{
"action": "allow",
"page": "path/to/page",
"params": ["a", "b"],
"matching": "inclusive"
}, {
"action": "allow",
"page": "*"
}]
}
示例五：{"action": "allow", "page": "*"} 是优先级最低的默认规则，未显式指明 "disallow" 的都默认被索引
{
"rules":[{
"action": "allow",
"page": "path/to/page",
"params": ["a", "b"],
"matching": "inclusive"
}, {
"action": "disallow",
"page": "*"
}, {
"action": "allow",
"page": "*"
}]
}
调试：当在小程序项目中设置了 sitemap 的配置文件（默认为 sitemap.json）时,便可在开发者工具控制台上显示当前页面是否被索引的调试信息
二、小程序框架
分为逻辑层和视图层（App Service 和 View）
视图层：WXML、WXSS
逻辑层：JavaScript
响应的数据绑定：框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。
示例：开发者通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定，所以在页面一打开的时候会显示 Hello WeChat!当点击按钮的时候，视图层会发送 changeName 的事件给逻辑层，逻辑层找到并执行对应的事件处理函数。回调函数触发后，逻辑层执行 setData 的操作，将 data 中的 name 从 WeChat 变为 MINA，因为该数据和视图层已经绑定了，从而视图层会自动改变为 Hello MINA!。
// index.wxml
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
// index.js
var helloData = {
name: 'WeChat'
}
Page({
data: helloData,
changeName: function(e) {
this.setData({
name: 'MINA'
})
}
})
1.场景值
场景值用来描述用户进入小程序的路径，就是从哪点进来小程序的。运营很有用哦～
可以在 `App` 的 `onLaunch` 和 `onShow`，或[wx.getLaunchOptionsSync](https://developers.weixin.qq.com/miniprogram/dev/api/base/app/life-cycle/wx.getLaunchOptionsSync.html) 中获取上述场景值。
2.逻辑层
a.小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。
b.逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
c.开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。
d.注册小程序（每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等，整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。）
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
e.注册页面（对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。简单的页面可以使用 Page() 进行构造。）
***第一种方式：使用Page构造器注册页面
// index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
// 自由数据
customData: {
hi: 'MINA'
}
})
***第二种方式：在页面中使用 behaviors，behaviors 可以用来让多个页面有相同的数据字段和方法。
// my-behavior.js
module.exports = Behavior({
data: {
sharedText: 'This is a piece of data shared between pages.'
},
methods: {
sharedMethod: function() {
this.data.sharedText === 'This is a piece of data shared between pages.'
}
}
})
// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
behaviors: [myBehavior],
onLoad: function() {
this.data.sharedText === 'This is a piece of data shared between pages.'
}
})
***第三种方式：使用 Component 构造器构造页面（Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。这种创建方式非常类似于自定义组件可以像自定义组件一样使用 `behaviors` 等高级特性。）
Component({
data: {
text: "This is page data."
},
methods: {
onLoad: function(options) {
// 页面创建时执行
},
onPullDownRefresh: function() {
// 下拉刷新时执行
},
// 事件响应函数
viewTap: function() {
// ...
}
}
})
f.页面生命周期：看下图～
g.页面路由（在小程序中所有页面的路由全部由框架进行管理。页面栈，框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候。这块要做的时候具体看文档就好了）
开发者可以使用 getCurrentPages() 函数获取当前页面栈。（文档：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html）
--- navigateTo, redirectTo 只能打开非 tabBar 页面。
--- switchTab 只能打开 tabBar 页面。
--- reLaunch 可以打开任意页面。
--- 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
--- 调用页面路由带的参数可以在目标页面的onLoad中获取。
h.模块化：可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 `module.exports`或者 `exports` 才能对外暴露接口。
`exports` 是 `module.exports` 的一个引用，因此在模块里边随意更改 `exports` 的指向会造成未知的错误。所以更推荐开发者采用 `module.exports` 来暴露模块接口，除非你已经清晰知道这两者的关系。
小程序目前不支持直接引入 `node_modules` , 开发者需要使用到 `node_modules` 时候建议拷贝出相关的代码到小程序的目录中，或者使用小程序支持的npm功能。
// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
在需要使用这些模块的文件中，使用 require 将公共代码引入
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})
文件作用域：在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。通过全局函数 getApp 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置
// --- app.js
App({
globalData: 1
})
// --- a.js
// The localValue can only be used in file a.js.
var localValue = 'a'
// Get the app instance.
var app = getApp()
// Get the global data and change it.
app.globalData++
// --- b.js
// You can redefine localValue in file b.js, without interference with the localValue in a.js.
var localValue = 'b'
// If a.js it run before b.js, now the globalData shoule be 2.
console.log(getApp().globalData)
i.API
事件监听API：以on开头的API用来监听某个事件是否出发（如：wx.onSocketOpen、wx.onCompassChange）这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。
wx.onCompassChange(function (res) {
console.log(res.direction)
})
同步API：以Sync结尾的API都是同步API（如：wx.setStorageSync、wx.getSystemInfoSync）特殊的同步还有wx.createWorker、wx.getBackgroundAudioManager等。同步 API 的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。
try {
wx.setStorageSync('key', 'value')
} catch (e) {
console.error(e)
}
异步API:大多数API都是异步（如：wx.request、wx.login）这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接口调用结果
--- Object 参数说明
参数名 类型 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数
其他 Any 接口定义的其他参数
--- 回调函数的参数（success，fail，complete 函数调用时会传入一个 Object 类型参数，包含以下字段）
属性 类型 说明
errMsg string 错误信息，如果调用成功返回 ${apiName}:ok
errCode number 错误码，仅部分 API 支持，具体含义请参考对应 API 文档，成功时为 0。
其他 Any 接口返回的其他数据
wx.login({
success(res) {
console.log(res.code)
}
})
<!-- callback 形式调用 -->
wx.chooseImage({
success(res) {
console.log('res:', res)
}
})
<!-- promise 形式调用 -->
wx.chooseImage().then(res => console.log('res: ', res))
特别提示：异步 API 返回 Promise是异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值。
注意事项：
a.部分接口如 downloadFile, request, uploadFile, connectSocket, createCamera（小游戏）本身就有返回值， 它们的 promisify 需要开发者自行封装。
b.当没有回调参数时，异步接口返回 promise。此时若函数调用失败进入 fail 逻辑， 会报错提示 Uncaught (in promise)，开发者可通过 catch 来进行捕获。
c.wx.onUnhandledRejection可以监听未处理的 Promise 拒绝事件。
3.视图层
3.1.WXML
WXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
a.数据绑定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
b.列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
c.条件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
data: {
view: 'MINA'
}
})
d.模版（这块在我写这篇文章的时候不太明白～）
<!--wxml-->
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
3.2.WXSS
WXSS是一套样式语言，用于描述 WXML 的组件样式。与 CSS 相比，WXSS 扩展的特性有尺寸单位和样式导入
a.尺寸单位：rpx（可以根据屏幕宽度进行自适应，750rpx=375px=750物理像素）
b.样式导入：使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
c.内联样式：框架组件上支持使用 style、class 属性来控制组件的样式。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view style="color:{{color}};" />
class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="normal_view" />
d.选择器：目前支持的选择器有如下
选择器 样例 样例描述
.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 组件前边插入内容
e.全局样式和局部样式：定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
3.3.WXS：微信Script，是小程序的一套脚本语言，结合WXML可以构建出页面的结构
WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
WXS与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
WXS的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。
WXS 函数不能作为组件的事件回调。
由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
a.页面渲染
<!--wxml-->
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view> {{m1.message}} </view>
b.数据处理
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
}
})
<!--wxml--> // 输出结果是5
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
var max = undefined;
for (var i = 0; i < array.length; ++i) {
max = max === undefined ?
array[i] :
(max >= array[i] ? max : array[i]);
}
return max;
}
module.exports.getMax = getMax;
</wxs>
<!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>
3.4.事件系统（事件是视图层到逻辑层的通讯方式，事件可以将用户的行为反馈到逻辑层进行处理，事件可以绑定在组件上当达到触发事件就会执行逻辑层中对应的事件处理函数，事件对象可以携带额外信息）
a.事件的使用方式（在组件中绑定一个事件处理函数，WXML写view，JS的Page中写事件处理函数）
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
Page({
tapName: function(event) {
console.log(event)
}
})
b.使用WXS函数响应事件（从基础库版本2.4.4开始，支持使用WXS函数绑定事件，WXS函数接受2个参数，第一个是event，在原有的event的基础上加了event.instance对象，第二个参数是ownerInstance，和event.instance一样是一个ComponentDescriptor对象。ownerInstance包含了一些方法，可以设置组件的样式和class。）
// 在组件中绑定和注册事件处理的WXS函数。
<wxs module="wxs" src="./test.wxs"></wxs>
<view id="tapTest" data-hi="WeChat" bindtap="{{wxs.tapName}}"> Click me! </view>
**注：绑定的WXS函数必须用{{}}括起来**
// test.wxs文件实现tapName函数
function tapName(event, ownerInstance) {
console.log('tap wechat', JSON.stringify(event))
}
module.exports = {
tapName: tapName
}
c.事件分类：事件分为冒泡事件和非冒泡事件
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。注：除下表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input的input事件，scroll-view 的scroll事件
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart 会在一个 WXSS animation 动画开始时触发
animationiteration 会在一个 WXSS animation 一次迭代结束时触发
animationend 会在一个 WXSS animation 动画完成时触发
touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
d.普通事件绑定
<view bindtap="handleTap"> Click here </view> // 事件绑定
<view bindtap="{{ handlerName }}"> Click here! </view> // 事件绑定函数可以是一个数据绑定
此时，页面的 `this.data.handlerName` 必须是一个字符串，指定事件处理函数名；如果它是个空字符串，则这个绑定会失效（可以利用这个特性来暂时禁用一些事件）。自基础库版本 1.5.0 起，在大多数组件和自定义组件中， `bind` 后可以紧跟一个冒号，其含义不变，如 `bind:tap` 。基础库版本2.8.1 起，在所有组件中开始提供这个支持。
e.绑定并阻止事件冒泡（除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。）
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
f.互斥事件绑定（除 bind 和 catch 外，还可以使用 mut-bind 来绑定事件。自基础库版本2.8.2起，除 `bind` 和 `catch` 外，还可以使用 `mut-bind` 来绑定事件。一个 `mut-bind` 触发后，如果事件冒泡到其他节点上，其他节点上的 `mut-bind` 绑定函数不会被触发，但 `bind` 绑定函数和 `catch` 绑定函数依旧会被触发。换而言之，所有 `mut-bind` 是“互斥”的，只会有其中一个绑定函数被触发。同时，它完全不影响 `bind` 和 `catch` 的绑定效果。在下边这个例子中，点击 inner view 会先后调用 handleTap3 和 handleTap2 ，点击 middle view 会调用 handleTap2 和 handleTap1 。）
<view id="outer" mut-bind:tap="handleTap1">
outer view
<view id="middle" bindtap="handleTap2">
middle view
<view id="inner" mut-bind:tap="handleTap3">
inner view
</view>
</view>
</view>
g.事件的捕获阶段（触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。）
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
outer view
<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view
</view>
</view>
将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。
<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
outer view
<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view
</view>
</view>
h.事件对象（如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。）
BaseEvent --- 基础事件对象属性列表（type事件类型、timeStamp事件生成的时间戳、target触发事件的组件的一些属性值集合、currentTarget当前组件的一些属性值集合、mark事件标记数据）
CustomEvent --- 自定义事件对象属性列表继承BaseEvent（detail额外的信息）
TouchEvent --- 触摸事件对象属性列表继承BaseEvent（touches触摸事件当前停留在屏幕中的触摸点信息的数组、changedTouches触摸事件当前变化的触摸点信息的数组）
特殊事件 --- canvas中的触摸事件不可冒泡，所以没有 currentTarget。
dataset，在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。dataset是当前组件上由data-开头的自定义属性组成的集合
data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 。
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({
bindViewTap:function(event) {
event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
}
})
mark用来识别具体触发事件的target节点，还可以用于承载一些自定义的数据，当事件触发时，事件冒泡路径上所有的mark会被合并，并返回给事件回调函数，即使不是冒泡事件也会mark，下面代码就是如果按钮被点击，将触发 bindViewTap 和 bindButtonTap 两个事件，事件携带的 event.mark 将包含 myMark 和 anotherMark 两项。
<view mark:myMark="last" bindtap="bindViewTap">
<button mark:anotherMark="leaf" bindtap="bindButtonTap">按钮</button>
</view>
Page({
bindViewTap: function(e) {
e.mark.myMark === "last" // true
e.mark.anotherMark === "leaf" // true
}
})
mark 和 dataset 很相似，主要区别在于： mark 会包含从触发事件的节点到根节点上所有的 mark: 属性值；而 dataset 仅包含一个节点的 data- 属性值。(如果存在同名的 mark 父节点的 mark 会被子节点覆盖、在自定义组件中接收事件时mark 不包含自定义组件外的节点的 mark、不同于 dataset节点的mark不会做连字符和大小写转换)
i.WXS响应事件
背景：有频繁用户交互的效果在小程序上表现是比较卡顿的，例如页面有 2 个元素 A 和 B，用户在 A 上做 touchmove 手势，要求 B 也跟随移动，movable-view就是一个典型的例子。一次 touchmove 事件的响应过程为：a、touchmove 事件从视图层（Webview）抛到逻辑层（App Service）b、逻辑层（App Service）处理 touchmove 事件，再通过 setData 来改变 B 的位置。一次 touchmove 的响应需要经过 2 次的逻辑层和渲染层的通信以及一次渲染，通信的耗时比较大。此外 setData 渲染也会阻塞其它脚本执行，导致了整个用户交互的动画过程会有延迟。
解决：用WXS，本方案基本的思路是减少通信的次数，让事件在视图层（Webview）响应。小程序的框架分为视图层（Webview）和逻辑层（App Service），这样分层的目的是管控，开发者的代码只能运行在逻辑层（App Service），而这个思路就必须要让开发者的代码运行在视图层（Webview）。
提示：使用 WXS函数用来响应小程序事件，目前只能响应内置组件的事件，不支持自定义组件事件。WXS 函数的除了纯逻辑的运算，还可以通过封装好的`ComponentDescriptor` 实例来访问以及设置组件的 class 和样式，对于交互动画，设置 style 和 class 足够了。
var wxsFunction = function(event, ownerInstance) {
var instance = ownerInstance.selectComponent('.classSelector') // 返回组件的实例
instance.setStyle({
"font-size": "14px" // 支持rpx
})
instance.getDataset()
instance.setClass(className)
// ...
return false // 不往上冒泡，相当于调用了同时调用了stopPropagation和preventDefault
}
其中入参 `event` 是小程序事件对象基础上多了 `event.instance` 来表示触发事件的组件的 `ComponentDescriptor` 实例。`ownerInstance` 表示的是触发事件的组件所在的组件的 `ComponentDescriptor` 实例，如果触发事件的组件是在页面内的，`ownerInstance` 表示的是页面实例。
ComponentDescriptor内部（返回组件的实例、设置组件样式、设置组件Class、返回当前组件和dataset对象、callMethod等等）
WXS 运行在视图层（Webview），里面的逻辑毕竟能做的事件比较少，需要有一个机制和逻辑层（App Service）开发者的代码通信，上面的 `callMethod` 是 WXS 里面调用逻辑层（App Service）开发者的代码的方法，而 `WxsPropObserver` 是逻辑层（App Service）开发者的代码调用 WXS 逻辑的机制。
// WXML
<wxs module="test" src="./test.wxs"></wxs>
<view change:prop="{{test.propObserver}}" prop="{{propValue}}" bindtouchmove="{{test.touchmove}}" class="movable"></view>
上面的change:prop（属性前面带change:前缀）是在 prop 属性被设置的时候触发 WXS 函数，值必须用{{}}括起来。类似 Component 定义的 properties 里面的 observer 属性，在setData({propValue: newValue})调用之后会触发。
注意：WXS函数必须用{{}}括起来。当 prop 的值被设置 WXS 函数就会触发，而不只是值发生改变，所以在页面初始化的时候会调用一次WxsPropObserver的函数。
WXS文件test.wxs里面定义并导出事件处理函数和属性改变触发的函数
module.exports = {
touchmove: function(event, instance) {
console.log('log event', JSON.stringify(event))
},
propObserver: function(newValue, oldValue, ownerInstance, instance) {
console.log('prop observer', newValue, oldValue)
}
}
3.5.简易双向绑定
a.双向绑定语法：在WXML中，普通的属性的绑定是单向的。如果使用this.setData({ value: 'leaf' })来更新value，this.data.value 和输入框的中显示的值都会被更新为 leaf。但如果用户修改了输入框里的值，却不会同时改变 this.data.value 。如果需要在用户输入的同时改变 this.data.value，需要借助简易双向绑定机制。此时，可以在对应项目之前加入 model: 前缀，这样，如果输入框的值被改变了， `this.data.value` 也会同时改变。同时， WXML 中所有绑定了 `value` 的位置也会被一同更新，数据监听器也会被正常触发。
<input value="{{value}}" /> // 单向绑定
<input model:value="{{value}}" /> // 双向绑定
双向绑定表达式的限制：只能是一个单一字段的绑定、目前尚不能 data 路径
b.在自定义组件中传递双向绑定：双向绑定同样可以使用在自定义组件上，这个自定义组件将自身的 myValue 属性双向绑定到了组件内输入框的 value 属性上。这样，当输入框的值变更时，自定义组件的 myValue 属性会同时变更，这样，页面的 this.data.pageValue 也会同时变更，页面 WXML 中所有绑定了 pageValue 的位置也会被一同更新。
// custom-component.js
Component({
properties: {
myValue: String
}
})
<!-- custom-component.wxml -->
<input model:value="{{myValue}}" />
<custom-component model:my-value="{{pageValue}}" />
c.在自定义组件中触发双向绑定更新（自定义组件还可以自己触发双向绑定更新，做法就是：使用 setData 设置自身的属性。当组件使用 setData 更新 myValue 时，页面的 this.data.pageValue 也会同时变更，页面 WXML 中所有绑定了 pageValue 的位置也会被一同更新。）
// custom-component.js
Component({
properties: {
myValue: String
},
methods: {
update: function() {
// 更新 myValue
this.setData({
myValue: 'leaf'
})
}
}
})
<custom-component model:my-value="{{pageValue}}" />
3.6.基础组件（组件是视图层的基本组成单元。组件自带一些功能与微信风格一致的样式。个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。）
<标签名称 属性="value"> 内容 </标签名称>
a.属性类型
类型 描述 注释
Boolean 布尔值 组件写上该属性，不管是什么值都被当作 true；只有组件上没有该属性时，属性值才为false。如果属性值为变量，变量的值会被转换为Boolean类型
Number 数字 1，2.5
String 字符串 "string"
Array 数组 [1, "string"]
Object 对象 {key: value}
EventHandler 事件处理函数名 "handlerName"是Page中定义的事件处理函数名
Any任意属性
b.公共属性
类型 描述 注释
id 组件的唯一标示 保持整个页面唯一
class 组件的样式类 在对应的 WXSS 中定义的样式类
style 组件的内联样式 可以动态设置的内联样式
hidden 组件是否显示 组件是否显示
data-* 自定义属性 组件上触发的事件时，会发送给事件处理函数
bind* / catch* 组件上触发的事件时，会发送给事件处理函数
ff
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
f
页面生命周期
网友评论