微信小程序之基础指南

2023-11-18

1、申请账号

2、微信开发者工具

3、小程序代码构成

3.1、JSON配置

3.1.1、小程序全局配置app.json

4.3.1、使用 Page 构造器注册页面

4.3.2、页面中使用behaviors

4.3.3、使用 Component 构造器构造页面

5.3.1、wx:if VS hidden

腾讯的微信开发的教程是真的详细+齐全，如果你仔细看，几乎能解决你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 的位置也会被一同更新，数据监听器也会被正常触发。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)