目录
腾讯的微信开发的教程是真的详细+齐全,如果你仔细看,几乎能解决你80的问题
1、申请账号
2、微信开发者工具
3、小程序代码构成
项目里边生成了不同类型的文件:
.json
后缀的JSON
配置文件.wxml
后缀的WXML
模板文件.wxss
后缀的WXSS
样式文件.js
后缀的JS脚本逻辑文件
3.1、JSON配置
JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色
3.1.1、小程序全局配置app.json
小程序的全局配置app.json
,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。详情请点击:微信官方文档-小程序全局配置 ,常用app.json
配置内容如下:
entryPagePath
指定小程序的默认启动路径(首页),常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填,将默认为 pages
列表的第一项。不支持带页面路径参数
{
"entryPagePath": "pages/index/index"
}
pages
用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json
, .js
, .wxml
, .wxss
四个文件进行处理。未指定 entryPagePath
时,数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。如开发目录为:
├── app.js
├── app.json
├── app.wxss
├── pages
│ │── index
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs
│ ├── logs.wxml
│ └── logs.js
└── utils
则需要在 app.json 中写
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
}
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。如:
{
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
属性 | 类型 | 默认值 | 描述 |
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如 #000000 |
navigationBarTextStyle | string | white | 导航栏标题颜色,仅支持 black / white |
navigationBarTitleText | string | 导航栏标题文字内容 | |
navigationStyle | string | default | 导航栏样式,仅支持以下值:default 默认样式custom 自定义导航栏 |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
backgroundTextStyle | string | dark | 下拉 loading 的样式,仅支持 dark / light |
backgroundColorTop | string | #ffffff | 顶部窗口的背景色,仅 iOS 支持 |
backgroundColorBottom | string | #ffffff | 底部窗口的背景色,仅 iOS 支持 |
enablePullDownRefresh | boolean | false | 是否开启全局的下拉刷新。 详见Page.onPullDownRefresh |
pageOrientation | string | portrait | 屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化 |
restartStrategy | string | homePage | 重新启动策略配置 |
initialRenderingCache | string | 页面初始渲染缓存配置,支持 static / dynamic | |
visualEffectInBackground | string | none | 切入系统后台时,隐藏页面内容,保护用户隐私。支持 hidden / none |
handleWebviewPreload | string | static | 控制预加载下个页面的时机。支持 static / manual / auto |
tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
属性 | 类型 | 必填 | 默认值 | 描述 |
color | HexColor | 是 | tab 上的文字默认颜色,仅支持十六进制颜色 | |
selectedColor | HexColor | 是 | tab 上的文字选中时的颜色,仅支持十六进制颜色 | |
navigationBarTitleText | HexColor | 是 | tab 的背景色,仅支持十六进制颜色 | |
backgroundColor | string | 否 | black | tabbar 上边框的颜色, 仅支持 black / white |
list | Array | 是 | tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab | |
position | string | 否 | bottom | tabBar 的位置,仅支持 bottom / top |
custom | boolean | 否 | false | 自定义 tabBar,见详情 |
其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:
属性 | 类型 | 必填 | 说明 |
pagePath | string | 是 | 页面路径,必须在 pages 中先定义 |
text | string | 是 | tab 上按钮文字 |
iconPath | string | 否 | 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 position 为 top 时,不显示 icon |
selectedIconPath | string | 否 | 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 position 为 top 时,不显示 icon。 |
3.1.2、小程序页面配置
每一个小程序页面也可以使用同名 .json
文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json
的 window
中相同的配置项。完整配置项:微信官方文档-小程序页面配置
属性 | 类型 | 默认值 | 说明 |
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如 #000000 |
navigationBarTextStyle | string | white | 导航栏标题颜色,仅支持 black / white |
navigationBarTitleText | string | 导航栏标题文字内容 | |
navigationStyle | string | default | 导航栏样式,仅支持以下值:default 默认样式custom 自定义导航栏,只保留右上角胶囊按钮。 |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
backgroundTextStyle | string | dark | 下拉 loading 的样式,仅支持 dark / light |
backgroundColorTop | string | #ffffff | 顶部窗口的背景色,仅 iOS 支持 |
backgroundColorBottom | string | #ffffff | 底部窗口的背景色,仅 iOS 支持 |
enablePullDownRefresh | boolean | false | 是否开启当前页面下拉刷新。 详见 Page.onPullDownRefresh |
onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px。 详见 Page.onReachBottom |
pageOrientation | string | portrait | 屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化 |
disableScroll | boolean | false | 设置为 true 则页面整体不能上下滚动。只在页面配置中有效,无法在 app.json 中设置 |
usingComponents | Object | 否 | 页面自定义组件配置 |
initialRenderingCache | string | 页面初始渲染缓存配置,支持 static / dynamic | |
style | string | default | 启用新版的组件样式 |
singlePage | Object | 否 | 单页模式相关配置 |
restartStrategy | string | homePage | 重新启动策略配置 |
handleWebviewPreload | string | static | 控制预加载下个页面的时机。支持 static / manual / auto |
visualEffectInBackground | string | 否 | 切入系统后台时,隐藏页面内容,保护用户隐私。支持 hidden / none ,若对页面单独设置则会覆盖全局的配置,详见 全局配置 |
enablePassiveEvent | Object或boolean | 否 | 事件监听是否为 passive,若对页面单独设置则会覆盖全局的配置,详见 全局配置 |
3.1.3、sitemap 配置
微信现已开放小程序内搜索,开发者可以通过 sitemap.json
配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引,完整配置项:微信官方文档-sitemap配置
4、小程序框架
整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。小程序提供了自己的视图层描述语言 WXML
和 WXSS
,以及基于 JavaScript
的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。
响应的数据绑定类似于Qt的信号与槽,在定义视图层时就绑定了逻辑层的函数
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
当点击按钮时,就会调用changeName
4.1、场景值
场景值用来描述用户进入小程序的路径,完整场景值:微信官方文档-场景值列表
4.2、注册小程序
每个小程序都需要在 app.js
中调用 App
方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。完成的参数含义和使用:微信官方文档-App参考文档。
整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp
方法获取到全局唯一的 App 实例,获取 App 上的数据或调用开发者注册在 App
上的函数。
4.3、注册页面
对于小程序中的每个页面,都需要在页面对应的 js
文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。
4.3.1、使用 Page 构造器注册页面
使用Page构造器注册页面,详细的参数含义和使用请参考:微信官方文档-Page参考文档
4.3.2、页面中使用behaviors
页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法(个人觉得每个js的内部变量都为私有变量,如果需要被其他js文件访问,就类似于C++将其设为友好成员,就可以访问)。behaviors 具体用法:微信官方文档-behaviours
4.3.3、使用 Component 构造器构造页面
Page
构造器适用于简单的页面。但对于复杂的页面, Page
构造器可能并不好用。此时,可以使用 Component
构造器来构造页面(个人觉得:类似于Qt的自定义控件,继承控件类后的行为,添加自己的功能)。 Component
构造器的主要区别是:方法需要放在 methods
里面。具体用法:微信官方文档-Component 构造器
4.4、页面路由
在小程序中所有页面的路由全部由框架进行管理。框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,开发者可以使用 getCurrentPages()
函数获取当前页面栈。页面栈的表现如下:
路由方式 | 页面栈表现 | 触发时机 | 路由前页面 | 路由后页面 |
---|---|---|---|---|
初始化 | 新页面入栈 | 小程序打开的第一个页面 | onLoad, onShow | |
打开新页面 | 新页面入栈 | 调用wx.navigateToAPIwx.navigateTo | onHide | onLoad, onShow |
页面重定向 | 当前页面出栈,新页面入栈 | 调用API wx.redirectTo | onUnload | onLoad, onShow |
页面返回 | 页面不断出栈,直到目标返回页 | 调用API wx.navigateBack | onUnload | onShow |
Tab 切换 | 页面全部出栈,只留下新的 Tab 页面 | 调用API wx.switchTab | 点击详情 | |
重加载 | 页面全部出栈,只留下新的页面 | 调用 API wx.reLaunch | onUnload | onLoad, onShow |
4.5、模块化
可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者exports
才能对外暴露接口(代码模块化,根据不同功能封装)。
4.6、API
小程序开发框架提供丰富的微信原生 API,详细介绍:微信官方文档-API介绍,通常,在小程序 API 有以下几种类型:
4.6.1、事件监听 API
我们约定,以 on
开头的 API 用来监听某个事件是否触发,这类 API 接受一个回调函数作为参数,当事件触发时会调用这个回调函数,并将相关数据以参数形式传入。
wx.onCompassChange(function (res) {
console.log(res.direction)
})
4.6.2、同步API
我们约定,以 Sync
结尾的 API 都是同步 API, 如 wx.setStorageSync,wx.getSystemInfoSync 等。此外,也有一些其他的同步 API,如 wx.createWorker,wx.getBackgroundAudioManager 等,详情参见 API 文档中的说明。
同步 API 的执行结果可以通过函数返回值直接获取,如果执行出错会抛出异常。
try {
wx.setStorageSync('key', 'value')
} catch (e) {
console.error(e)
}
4.6.3、异步API
大多数 API 都是异步 API,如 wx.request,wx.login 等。这类 API 接口通常都接受一个 Object
类型的参数,这个参数都支持按需指定以下字段来接收接口调用结果:
Object 参数说明 | ||
参数名 | 类型 | 说明 |
success | function | 接口调用成功的回调函数 |
fail | function | 接口调用成功的回调函数 |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
其他 | Any | 接口定义的其他参数 |
回调函数的参数 | ||
属性 | 类型 | 说明 |
errMsg | string | 错误信息,如果调用成功返回 ${apiName}:ok |
errCode | number | 错误码,仅部分 API 支持,具体含义请参考对应 API 文档,成功时为 0 。 |
其他 | Any | 接口返回的其他数据 |
wx.login({
success(res) {
console.log(res.code)
}
})
异步 API 返回 Promise
基础库 2.10.2 版本起,异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise,否则仍按回调方式执行,无返回值。
注意事项
- 部分接口如
downloadFile
,request
,uploadFile
,connectSocket
,createCamera
(小游戏)本身就有返回值, 它们的 promisify 需要开发者自行封装。 - 当没有回调参数时,异步接口返回 promise。此时若函数调用失败进入 fail 逻辑, 会报错提示
Uncaught (in promise)
,开发者可通过 catch 来进行捕获。 - wx.onUnhandledRejection 可以监听未处理的 Promise 拒绝事件。
// callback 形式调用
wx.chooseImage({
success(res) {
console.log('res:', res)
}
})
// promise 形式调用
wx.chooseImage().then(res => console.log('res: ', res))
4.6.4、云开发 API
开通并使用微信云开发,即可使用云开发API,在小程序端直接调用服务端的云函数。
wx.cloud.callFunction({
// 云函数名称
name: 'cloudFunc',
// 传给云函数的参数
data: {
a: 1,
b: 2,
},
success: function(res) {
console.log(res.result) // 示例
},
fail: console.error
})
// 此外,云函数同样支持 promise 形式调用
5、小程序的WXML
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构
5.1、数据绑定
WXML 中的动态数据均来自对应 Page 的 data。
数据绑定使用 Mustache 语法(双大括号)将变量包起来.
5.1.1、简单绑定代码示例
.wxml文件:
<view> {{ message }} </view>
.js文件
Page({
data: {
message: 'Hello World!'
}
})
5.1.2、组件属性(需要在双引号之内)
Hello World的id="item-0"
.wxml文件:
<view id="item-{{id}}">Hello World </view>
.js文件
Page({
data: {
id: 0
}
})
5.1.3、控制属性(需要在双引号之内)
.wxml文件:
<view wx:if="{{condition}}"> </view>
.js文件
Page({
data: {
condition: true
}
})
5.1.4、 关键字(需要在双引号之内)
代码示例
<checkbox checked="{{false}}"> </checkbox>
true
:boolean 类型的 true,代表真值。false
: boolean 类型的 false,代表假值。
特别注意:不要直接写 checked="false"
,其计算结果是一个字符串,转成 boolean 类型后代表真值
5.1.5、运算
可以在 {{}}
内进行简单的运算,支持的有如下几种方式:
三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
算数运算
.wxml文件
<view> {{a + b}} + {{c}} + d </view>
.js文件
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
逻辑判断
<view wx:if="{{length > 5}}"> </view>
字符串运算
.wxml文件
<view>{{"hello" + name}}</view>
.js文件
Page({
data:{
name: 'World'
}
})
数据路径运算
.wxml文件
<view>{{object.key}} {{array[0]}}</view>
.js文件
Page({
data: {
object: {
key: 'Hello '
},
array: ['World']
}
})
组合
.wxml文件
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
.js文件
Page({
data: {
zero: 0
}
})
最终组合成数组[0, 1, 2, 3, 4]
对象
.wxml文件
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
.js文件
Page({
data: {
a: 1,
b: 2
}
})
最终组合成的对象是 {for: 1, bar: 2}
5.2、列表渲染
5.2.1、wx:for
在组件上使用 wx:for
控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index
,数组当前项的变量名默认为 item
.wxml文件
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
.js文件
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
使用 wx:for-item 可以指定数组当前元素的变量名,
使用 wx:for-index 可以指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
5.2.2、block wx:if
类似 block wx:if
,也可以将 wx:for
用在<block/>
标签上,以渲染一个包含多节点的结构块。例如:
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
5.2.3、wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中, 并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key
来指定列表中项目的唯一的标识符。
wx:key
的值以两种形式提供
- 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
- 保留关键字
*this
代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
如不提供 wx:key
,会报一个 warning
, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略
注意事项1:当 wx:for
的值为字符串时,会将字符串解析成字符串数组
注意事项2:花括号和引号之间如果有空格,将最终被解析成为字符串
5.3、条件渲染
5.3.1、wx:if
在框架中,使用 wx:if=""
来判断是否需要渲染该代码块,也可以用 wx:elif
和 wx:else
来添加一个 else 块:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
5.3.2、block wx:if
因为 wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意: <block/>
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
5.3.1、wx:if VS hidden
因为 wx:if
之中的模板也可能包含数据绑定,所以当 wx:if
的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if
也是惰性的,如果在初始渲染条件为 false
,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。相比之下,hidden
就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。一般来说,wx:if
有更高的切换消耗而 hidden
有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden
更好,如果在运行时条件不大可能改变则 wx:if
较好。
5.4、模板
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
5.4.1、定义模板
使用 name 属性,作为模板的名字。然后在<template/>
内定义代码片段,如:
<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
5.4.2、使用模板
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:
.wxml文件
<template is="msgItem" data="{{...item}}"/>
.js文件
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
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>
5.5、引用
WXML 提供两种文件引用方式import
和include。
5.5.1、import
import
可以在该文件中使用目标文件定义的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
。
5.5.2、include
include
可以将目标文件除了 <template/>
<wxs/>
外的整个代码引入,相当于是拷贝到 include
位置,如:
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
6、小程序的WXSS
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。用来决定 WXML 的组件应该怎么显示。WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的特性有
- 尺寸单位
- 样式导入
6.1、尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
6.2、样式导入
使用@import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;
表示语句结束
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
6.3、内联样式
框架组件上支持使用 style、class 属性来控制组件的样式
- style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
<view style="color:{{color}};" />
- class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上
.
,样式类名之间用空格分隔
<view class="normal_view" />
6.4、全局样式与局部样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器
7、小程序的WXS
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML
,可以构建出页面的结构。WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。我觉得我用不到
详情介绍:微信官方文档-WXS语法介绍
8、事件系统
微信的事件是视图层到逻辑层的通讯方式,可以将用户的行为反馈到逻辑层进行处理,可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息,如 id, dataset, touches。
注意:个人觉得这个就相当于Qt的信号与槽+事件合体
详情介绍:微信官方文档-事件系统
8.1、普通事件的绑定
如bindtap,当用户点击该组件的时候会在该页面对应的 Page 中找到相应的事件处理函数
<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>
在相应的 Page 定义中写上相应的事件处理函数,参数是event。
Page({
tapName: function(event) {
console.log(event)
}
})
除 bind
外,也可以用 catch
来绑定事件。还可以使用 mut-bind
来绑定事件。
与 bind
不同, catch
会阻止事件向上冒泡。
一个 mut-bind
触发后,如果事件冒泡到其他节点上,其他节点上的 mut-bind
绑定函数不会被触发,但 bind
绑定函数和 catch
绑定函数依旧会被触发。换而言之,所有 mut-bind
是“互斥”的,只会有其中一个绑定函数被触发。同时,它完全不影响 bind
和 catch
的绑定效果。
8.2、事件详解
事件分为冒泡事件和非冒泡事件:
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
- 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
WXML的冒泡事件列表:
类型 | 触发条件 |
---|---|
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 设备,重按时会触发 |
注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如 form 的submit
事件,input 的input
事件,scroll-view 的scroll
事件,(详见各个组件)
8.3、事件对象
如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。
BaseEvent 基础事件对象属性列表:
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型 |
timeStamp | Integer | 事件生成时的时间戳 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
mark | Object | 事件标记数据 |
CustomEvent 自定义事件对象属性列表(继承 BaseEvent):
属性 | 类型 | 说明 |
---|---|---|
detail | Object | 额外的信息 |
TouchEvent 触摸事件对象属性列表(继承 BaseEvent):
属性 | 类型 | 说明 |
---|---|---|
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
特殊事件: canvas 中的触摸事件不可冒泡,所以没有 currentTarget
9、简易双向绑定
在 WXML 中,普通的属性的绑定是单向的。例如:
<input value="{{value}}" />
如果使用 this.setData({ value: 'leaf' })
来更新 value
,this.data.value
和输入框的中显示的值都会被更新为 leaf
;但如果用户修改了输入框里的值,却不会同时改变 this.data.value
。
如果需要在用户输入的同时改变 this.data.value
,需要借助简易双向绑定机制。此时,可以在对应项目之前加入 model:
前缀:
<input model:value="{{value}}" />
这样,如果输入框的值被改变了, this.data.value
也会同时改变。同时, WXML 中所有绑定了 value
的位置也会被一同更新, 数据监听器 也会被正常触发。