微信小程序

微信小程序简介

1. 运行环境不同，网页运行在浏览器环境中，小程序运行在微信环境中
2. API不同，由于运行环境不同，所以在小程序中，无法调用DOM和BOM的API。但是，小程序中可以调用微信环境提供的各种API，例如：地理定位、扫码、支付等等
3. 开发模式不同
   • 网页的开发模式：浏览器+代码编辑器
   • 小程序有自己的一套标准开发模式：申请小程序开发账号，安装小程序开发者工具，创建和配置小程序项目

项目结构

1. pages 用来存放所以小程序页面
2. utils 用来存放工具性质的模块
3. app.js 小程序项目的入口文件
4. app.json 小程序项目的全局配置文件
5. app.wxss 小程序项目的全局样式文件
6. project.config.json 项目的配置文件
7. sitemap.json 用来配置小程序及其页面是否允许被微信索引

事件绑定

常用的事件

类型	绑定事件	事件描述
tap	bindtap 或 bind:tap	手指触摸后马上离开，类似于HTML中的click事件
input	bindinput 或 bind:input	文本框的输入事件
change	bindchange 或 bind:change	状态改变时触发

事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象 event，它的详细属性如下表所示：

属性	类型	说明
type	String	事件类型
inputStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

target 和 currentTarget 的区别

target是触发该事件的源头，而currentTarget则是当前事件所绑定的组件。举例如下

<view bindtap="outerHandler">
  <button type="primary">按钮</button>
</view>

点击内部的按钮时，点击事件以冒泡方式向外扩散，也会触发外出view的tap事件处理函数。此时，对于外出的view来说：

• e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件。
• e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前view组件

bindtap 的语法格式

在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来相应用户的触摸行为。

1. 通过bindtap，可以为组件绑定tap触摸事件，语法如下：

   	<button type="primary" bindtap="btnTapHandler">按钮</button>
   

2. 在页面的.js文件中定义相应的事件处理函数，事件参数通过形参event（一般简写成e）来接收：

   Page({
   	btnTapHandler (e) {	 // 按钮 tap 事件处理函数
   		console.log(e)  // 事件参数对象
   	}
   })
   

在事件处理函数中为data中的数据赋值

通过调用 this.setData(dataObject) 方法，可以给页面data中的数据重新赋值。示例如下：

Page({
	data: {
		count: 0
	},
	btnTapHandler (e) {
		this.setData({
      		count: this.data.count += 1
    	})
	}
})

事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正常工作

	<button type="primary" bindtap="btnTapHandler(123)">按钮</button>

因为小程序会把bindtap的属性值，统一当成事件名来处理，相当于要调用一个名称为btnTapHandler(123)的事件处理函数

自定义事件传参
可以为组件提供data-* 自定义属性传参，其中 * 就代表的是参数的名字，示例如下：

	<button type="primary" bindtap="btnTapHandler" data-info="{{ 10 }}">按钮</button>

最终info会被解析为参数的名字，数值10会被解析为参数的值

获取参数
在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下：

btnTapHandler (event) {
	// dataset 是一个对象，包含了所有通过 data-* 传递过来的参数项
    this.setData({
      count: this.data.count + event.target.dataset.info
    })
  },

bindinput 的语法格式

在小程序中，通过input事件响应文本框的输入事件，语法格式如下：

1. 通过bindinput，可以为文本框绑定输入事件：

   <input type="primary" bindinput="inputHandler"></input>
   

2. 在页面的.js文件中定义事件处理函数：

   inputHandler (event) {
   	// event.datail.value 是变化后的值，文本框最新的值
    },
   

文本框和data之间的数据同步

动态绑定input框中的value属性值

	<input type="primary" bindinput="inputHandler"></input>

inputHandler (event) {
   this.setData({
     inputMessage: event.detail.value
   })
},
  data: {
    inputMessage: '初始值'
  }

列表渲染

wx:for

通过 wx:for 可以根据知道的数组，循环渲染重复的组件结构，语法示例如下：

data: {
	arr: ['xxx', 'aaa', 'vcvvv']
}

<view wx:for="{{arr}}">
  当前项：{{ item }}  索引{{ index }}
</view>

默认情况下，当前循环项的索引用index表示；当前循环项item表示

手动指定索引和当前项的变量名

• 使用wx:for-index 可以指定当前循环项的索引的变量名，默认是index
• 使用wx:for-item 可以指定当前项的变量名，默认是item

示例代码如下：

// data数据
data: {
	arr: ['xxx', 'aaa', 'vcvvv']
}

// wxml
<view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="value">
  {{ value }}  {{ idx }}
</view>

wx:key 的使用

类似于 Vue列表渲染中的:key，小程序在实现列表渲染时。也建议渲染出来的列表项指定唯一的key值，从而提升渲染的效率，示例代码如下：

// data数据
data: {
	arr: [
      { id: 0, name: '张三' },
      { id: 1, name: '李四' },
      { id: 2, name: '王五' },
    ]
}

// wxml
<view wx:for="{{arr}}" wx:key="item.id">
  {{ item.name }}
</view>

全局配置

全局配置文件及常用的配置项

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：

1. pages：记录当前小程序所有页面的存放路径
2. window：全局设置小程序窗口的外观
3. tabBar：设置小程序底部的tabBar效果
4. style：是否启用新版的组件样式

了解 window 节点常用的配置项

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如#000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

tabBar

什么是tabBar
tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：

• 底部tabBar
• 顶部tabBar

注意：

• tabBar中只能配置最少2个、最大5个tab页签
• 当渲染顶部tabBar时，不显示icon，只显示文本

tabBar 的6个组成部分

1. backgroundColor：tabBar 的背景色
2. selectedIconPath：选中时的图片路径
3. borderStyle：tabBar 上边框的颜色
4. iconPath：未选中时的图片路径
5. selectedColor：tab 上的文字选中时的颜色
6. color：tab 上文字的默认（未选中）颜色

tabBar 节点的配置项

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar 的位置，仅支持 bottom / top
borderStyle	String	否	black	tabBar 上边框的颜色，仅支持 black / white
color	HexColor	否		tab 上文字的默认（未选择）颜色
selectedColor	HexColor	否		tab 上的文字选中时的颜色
backgroundColor	HexColor	否		tabBar 的背景色
list	Array	是		tab 页签的列表，最少2个，最多5个tab

每个 tab 项的配置选中

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在pages中预先定义
text	String	是	tab 上显示的文字
iconPath	String	否	未选中时的图片路径；当position为top时，不显示icon
selectedIconPath	String	否	选中时的图标路径；当position为top时，不显示icon

网络数据请求

小程序中网络数据请求的限制

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制

1. 只能请求HTTPS类型的接口
2. 必须将接口的域名添加到信任列表中

配置 request 合法域名

需求描述：假设在自己的微信小程序中，希望请求https://www.xxx.com/域名下的接口
配置步骤：登录微信小程序管理后台 → 开发 → 开发设置 → 服务器域名 → 修改 request 合法域名

注意事项：

1. 域名只支持 https 协议
2. 域名不能使用 IP 地址或 localhost
3. 域名必须经过 ICP 备案
4. 服务器域名一个月内最多可申请5次修改

发起 GET 请求

调用微信小程序提供的 wx.request() 方法，可以发起GET数据请求，示例代码如下：

wx.request({
   // 请求的接口地址，必须基于HTTPS协议
   url: 'url',
   // 请求方式
   method: 'GET',
   // 发送到服务器的数据
   data: {
     name: '张三',
     age: 18
   },
   // 请求成功之后的回调
   success: (res) => {
     console.log(res)
   }
})

在页面刚加载时请求数据

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数，示例代码如下：

  /**
  * 生命周期函数--监听页面加载
  */
  onLoad: function (options) {
    this.getSwiperList()
    this.getmenuList()
  },
  // 获取轮播图的数据
  getSwiperList () {},
  // 获取菜单的数据
  getmenuList () {}

跳过 request 合法域名校验

如果后端程序员仅仅提供了http协议的接口、暂时没有提供https协议的接口。此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启【开发环境不校验请求域名、TLS版本及HTTPS证书】选项，跳过 request 合法域名的校验
注意： 跳过 request 合法域名校验的选项，仅限在开发调试阶段使用

关于 跨域 和 Ajax 的说明

跨域问题只存在于基于浏览器的开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象的，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做 ”发起Ajax请求“，而是叫做 ”发起网络数据请求“。

页面导航

小程序中实现页面导航的两种方式

• 声明式导航

  1. 在页面上声明一个 < navigator > 导航组件
  2. 通过点击< navigator > 组件实现页面跳转

• 编程式导航

  1. 调用小程序的导航API，实现页面跳转

声明式导航

导航到tabBar页面

在使用< navigator > 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type属性，其中：

• url 表示要跳转的页面地址，必须以 / 开头
• open-type 表示跳转的方式，必须为 swiperTab

示例代码如下：

 <navigator url="/pages/message/message" open-type="switchTab">跳转到消息页</navigator>

导航到非tabBar页面

非tabBar页面指的是没有配置为tabBar的页面
在使用< navigator > 组件跳转到普通的非tabBar 页面时，需要指定 url 属性和 open-type属性，其中：

• url 表示要跳转的页面地址，必须以 / 开头
• open-type 表示跳转的方式，必须为 navigate

示例代码如下：

 <navigator url="/pages/message/message" open-type="navigate">跳转到info页面</navigator>

注意：为了简便，在导航到非tabBar页面时，open-type=“navigate” 属性可以省略。

后退导航

如果要后退到上一页面或者多级页面，则需要指定open-type属性和delta属性，其中：

• open-type 的值必须是 navigateBack，表示要进行后退导航
• delta 的值必须是数字，表示要后退的层级

示例代码如下：

<navigator open-type="navigateBack" delta="1">后退</navigator></navigator>

注意：为了简便，如果只是后退到上一页面，则可以省略delta属性，因为默认值就是1

编程式导航

导航到tabBar页面

调用 wx.switchTab(Object object) 方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下：

属性	类型	是否必选	说明
url	String	是	需要跳转的tabBar页面的路径，路径后不能带参数
success	function	否	接口调用成功后的回调函数
fail	function	否	接口调用失败后的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码如下：

<button bindtap="gotoMessage">方法跳转</button>

 gotoMessage () {
   wx.switchTab({
     url: '/pages/message/message',
     success: () => {
       console.log('跳转成功')
     }
   })
 },

导航到非tabBar页面

调用 wx.navigateTo(Object object) 方法，可以跳转到非tabBar页面。其中Object参数对象的属性列表如下：

属性	类型	是否必选	说明
url	String	是	需要跳转的非tabBar页面的路径，路径后可以带参数
success	function	否	接口调用成功后的回调函数
fail	function	否	接口调用失败后的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码如下：

<button bindtap="getToInfo">到info页面</button>

 getToInfo () {
   wx.navigateTo({
     url: '/pages/info/info',
     success: () => {
       console.log('跳转成功')
     }
   })
 },

后退导航

调用 wx.navigateBack(Object object) 方法，可以返回上上衣页面或多级页面。其中Object参数可选的列表如下：

属性	类型	默认值	是否必选	说明
delta	number	1	是	返回的页面数，如果delta大于现有的页面数，则返回首页
success	function		否	接口调用成功后的回调函数
fail	function		否	接口调用失败后的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码如下：

<button bindtap="toBack">后退</button>

toBack () {
  wx.navigateBack()
}

导航传参

声明式导航传参

navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

• 参数与路径之间使用 ？分割
• 参数键与参数值用 = 分割
• 不同参数用 & 分割

<navigator url="/pages/info/info?name=张三&age=18">跳转到info页面</navigator>

参数在这里：

编程式导航传参

调用 wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数，代码示例如下：

<button bindtap="gotoInfo2">带参数过去</button>

gotoInfo2 () {
  wx.navigateTo({
    url: '/pages/info/info?name=张三&age=18',
  })
}

在 onLoad 中接收导航参数

通过 声明式导航传参或者编程式导航传参所携带的参数，可以之间在 onLoad 事件中之间获取到，示例代码如下：

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)	// {name: "张三", age: "18"}
  },

页面事件

下拉刷新事件

启用下拉刷新

启用下拉刷新有两种方式：

• 全局开启下拉刷新：在app.json的window节点中，将enablePullDownRefresh设置为true
• 局部开启下拉刷新：在页面的.json配置文件中，将enablePullDownRefresh设置为true

在实际开发中，推荐使用第二种方式，为需要的页面单独开启下拉刷新的效果。

配置下拉刷新窗口的样式

在全局或页面的.json配置文件中，通过backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式，其中：

• backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
• backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

监听页面的下拉刷新事件

在页面的.js文件中，通过onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。

停止下拉刷新的效果

当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动隐藏loading效果。此时，调用 stopPullDownRefresh() 可以停止当前页面的下拉刷新。示例：

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 当数据重置成功后，调用此函数，关闭下拉刷新的效果
    wx.stopPullDownRefresh()
  },

上拉触底事件

监听页面的上拉触底事件

在页面的.js文件中，通过onReachBottom()函数即可监听当前页面的上拉触底事件。示例代码如下：

 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离，可以在全局或页面.json配置文件中，通过onReachBottomDistance 属性来配置上拉触底的距离。小程序默认的触底距离是50px，在实际开发中，可以根据自己的需求修改这个默认值。

生命周期

生命周期的分类

在小程序中，生命周期分为两类，分别是：

• 应用生命周期：特指小程序从启动 → 运行 → 销毁过程
• 页面生命周期：特质小程序中，每个页面的加载 → 渲染 → 销毁的过程

其中，页面的生命周期范围较小，应用程序的生命周期范围较大

什么是生命周期函数

生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。

生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在onLoad生命周期中初始化页面的数据。

注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

应用的生命周期函数

小程序的应用生命周期函数需要在app.js中进行声明，示例代码如下：

App({
  // 小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化的工作。
  onLaunch () {},
  // 小程序启动，或从后台进入前台时触发
  onShow () {},
  // 小程序从前台进入后台时触发
  onHide () {}
})

页面的生命周期

小程序的页面生命周期函数需要在页面的.js文件中进行声明，示例代码如下：

Page({
  onLoad (options) { },  // 监听页面加载，一个页面只调用一次
  onShow () {},          // 监听页面显示
  onReady () {},         // 监听页面初次渲染完成，一个页面只调用一次
  onHide () {},          // 监听页面隐藏
  onUnload () {},          // 监听页面卸载，一个页面只调用一次
})

WXS脚本

什么是 WXS

WXS （WeiXin Script）是小程序独有的一套脚本语言，结合WXML，可以构建出页面的UI结构。

wxs的应用场景

wxml中无法调用在页面的.js中定义的函数，但是，wxml中可以调用wxs中定义的函数。因此，小程序中wxs的典型应用场景就是“过滤器”。

wxs和JavaScript的关系

虽然wxs的语法类似于JavaScript，但是wxs和JavaScript是完全不同的两种语言：

• wxs有自己的数据类型
  1. number 数值类型、string字符串类型、boolean布尔类型、object对象类型
  2. function函数类型、array数组类型、date日期类型、regexp正则
• wxs不支持类似于ES6及以上的语法形式
  1. 不支持：let、const、解构辅助、展开运算符、箭头函数、对象属性简写等等。。
  2. 支持：var 定义变量、普通function函数类似于ES5的语法
• wxs遵循CommonJS规范
  1. module 对象
  2. request() 函数
  3. module.exports 对象

基础语法

内嵌wxs脚本

wxs代码可以编写wxml文件中的< wxs > 标签内，就像JavaScript代码可以编写在html中的< script >标签内一样。

wxml文件中的每个 < wxs > 标签，必选提供module属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员：

<text>{{ m1.toUpper('pages/contact/contact.wxml') }}</text>

<wxs module="m1">
  // 将文本转换为大写
  module.exports.toUpper = function (str) {
    return str.toUpperCase()
  }
</wxs>

定义外联的wxs脚本

wxs代码还可以编写在以.wxs为后缀名的文件内，就像JavaScript代码可以编写在.js为后缀名的文件中一样。示例代码如下：

// tools.wxs 文件
function toLower(str) {
  return str.toLowerCase(str)
}
module.exports = {
  // 不支持简写，必选要写全
  toLower: toLower
}

使用外联的wxs脚本

在wxml中引入外联的wxs脚本时，必须为 < wxs > 标签添加 module 和 src 属性，其中module用来指定模块的名称，src用来指定要引入的脚本的路径，且必须是相对路径。

示例代码如下：

<text>{{ m2.toLower('pages/contact/contact.wxml') }}</text>

<!-- 引用外联的 tools.wxs 脚本，并命名为m2 -->
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

WXS的特点

与JavaScript不同

为了降低wxs（WeiXin Script）的学习成本，wxs语言在设计时借鉴了大量的JavaScript的语法。但是本质上，wxs和JavaScript是完全不同的两种语言！

不能作为组件的事件回调

wxs典型的应用场景就是”过滤器“，经常配合 Mustache 语法进行使用，例如：

<text>{{ m2.toLower('pages/contact/contact.wxml') }}</text>

但是，在wxs中定义的函数不能作为组件的事件回调函数。例如，下面的用法就是错误的：

<button bindtap="m2.toLower">按钮</button>

隔离性

隔离性指的是wxs的运行环境和其他JavaScript代码是隔离的。体现在如下两方面：

1. wxs不能调用js中定义的函数
2. wxs不能调用小程序提供的API

性能好

• 在IOS设备上，小程序内的WXS会比JavaScript代码块2 ~ 20倍
• 在android设备上，二者的运行效率无差异

自定义组件

组件的创建与引用

创建组件

1. 在项目的根目录中，鼠标右键手动创建components → test文件夹
2. 在新建的components → test文件上，鼠标右键，点击 新建 Component
3. 键入组件的名称后回车，会自动生成组件对应的4个文件，后缀名分别为 .js，.json，.wxss，.wxml

注意：为了保证目录的结构清晰，建议把不同的组件，存放到单独目录中

引用组件

组件的引用方式为“局部引用” 和 “全局引用”，顾名思义：

• 局部引用：组件只能在当前被引用的页面内使用
• 全局引用：组件可以在每个小程序页面中使用

局部引用组件

在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”。示例代码如下：

// 在页面的 .json 文件中，引入组件
{
  "usingComponents": {
    "my-test1": "/components/test1/test1"
  }
}

// 在页面的 .wxml 文件中，使用组件
<my-test1></my-test1>

全局引用组件

在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”。示例代码如下：

// app.json 文件中，引入组件
{
  "usingComponents": {
    "my-test1": "/components/test1/test1"
  }
}

// 在页面的 .wxml 文件中，使用组件
<my-test1></my-test1>

组件和页面的区别

从表面上来看，组件和页面都是由 .js，.json，.wxml，.wxss这四个文件组成的，但是，组件和页面的 .js 与 .json 文件有明显的不同

• 组件的 .json 文件中需要声明 “component”: true属性，就是这个是组件
• 组件的 .js 文件中调用的是 ***Component()***函数
• 组件的事件处理函数需要定义到 methods节点中，跟Vue的methods差不多

自定义组件的样式

组件样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响组件之外的UI结构

注意：app.wxss中的全局样式对组件无效，只有 class 选择器会有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离影响，建议在组件和引用组件页面中使用 class 选择器，不要使用id、属性、标签选择器。

修改组件的样式隔离选项

默认情况下，自定义的样式隔离特性能够防止组件内外样式互相干扰问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 stylelsolation修改组件的样式隔离选项，用法如下：

// 在组件的 .js 文件中新增如下配置
Component({
  options: {
    styleIsolation: 'isolated'
  },
})

// 或者在组件的 .json 文件中新增如下配置
{
  "styleIsolation": "isolated"
}

stylelsolation 的可选值

可选值	默认值	描述
isolated	是	表示启用样式隔离，在自定义组件内外，使用 class 指定的样式不会互相影响
apply-shared	否	表示页面wxss样式将影响到自定义组件，但自定义组件wxss中指定的样式不会影响页面
shared	否	表示页面wxss样式将影响到自定义组件，自定义组件wxss中指定的样式也会影响页面和其他设置了apply-shared 或 shared 的自定义组件

properties 属性

在小程序中，properties 是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下：

Component({
  // 属性定义，用来接收父组件传递过来的消息
  properties: {
    // 完整写法
    max: {
      type: Number,
      value: 10 // 默认值，vue中使用的是 default 这里使用的是 value
    },
    min: Number // 简化写法，没有默认值
  },
})

// 在 wxml 中使用
<my-test1 max="10"></my-test1>

和vue中的组件传递差不多，不过这里的properties是可读可写的

data 和 properties 的区别

在小程序的组件中，properties 属性和 data 数据的用法相同，他们都是可读可写的，只不过 data 更倾向于存储组件的私有数据，properties 更倾向于存储外界传递到组件中的数据，修改properties 里的值和修改data的值的时候一样都是用setData

Component({
  data: {
    text: 'demo'
  },
  properties: {
    val: {
      type: String,
      value: 'aaa'
    }
  },
  methods: {
    demo () {
      console.log(this.data) // 输出结果 { text: 'demo', val: 'aaa' }
      console.log(this.properties)  // 输出结果 { text: 'demo', val: 'aaa' }
      console.log(this.data === this.properties)  // true
    }
  }
})

数据监听器

什么是数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的功能类似于vue中的 watch 侦听器。在小程序中，数据监听器的基本语法格式如下：

Component({
  observers: {
    '字段A,字段B': function (字段A的新值，字段B的新值) {
      
    }
  }
})

纯数据字段

使用规则

在Component 构造器的options节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段，代码如下：

Component({
  options: {
    // 指定所有以下划线开头的数据字段为纯数据字段
    pureDataPattern: /^_/
  },
  data: {
    t1: 'xxx',  // 普通字段
    _t2: true   // 纯数据字段
  }
})

组件的生命周期

组件全部的生命周期函数

小程序组件可用的全部生命周期如下表所示：

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被页面节点树移除时执行
error	Object Error	每当组件方法抛出错误时执行

组件主要的生命周期函数

在小程序中，最重要的生命周期函数有3个，分别是created、attached、detached。他们各自的特点如下：

1. 组件实例刚被创建好的时候，created 生命周期函数会被触发
   • 此时还不能调用 setData
   • 通常在这个生命周期中，只应该用于给组件的this添加一些自定义的属性字段
2. 在组件完全初始化完成、进入页面节点树后，attached 生命周期函数会被触发
   • 此时，this.data 以被初始化完毕
   • 这个生命周期很有用，绝大多初始化的工作可以在这个时机进行（例如发送请求获取初始化数据）
3. 在组件离开页面节点树后，datached 生命周期函数会被触发
   • 退出一个页面时，会触发页面内每个自定义组件的 datached 生命周期函数
   • 此时适合做一些清理性质的工作（例如接触当前页面的事件监听）

lifetimes 节点

在小程序组件中，生命周期函数可以直接定义在 Component 构造器的第一级参数中，可以在lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。示例代码如下：

Component({
  // 推荐用法
  
  lifetimes: {
    attached() {},    //  在组件实例进入页面节点树时执行
    detached() {},    //  在组件实例被页面节点树移除时执行
  },
  // 以下是旧的定义方式
  attached () {},   //  在组件实例进入页面节点树时执行
  detached () {}    //  在组件实例被页面节点树移除时执行
})

组件所在页面的生命周期

什么是组件所在页面的生命周期

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。
在自定义组件中，组件所在页面的生命周期函数有如下3个，分别是：

生命周期函数	参数	描述说明
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	Object size	组件所在的页面尺寸变化时执行

pageLifetimes 节点

组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中，示例代码如下：

Component({
  pageLifetimes: {
    show: function () {},    // 页面被展示
    hide: function () {},    // 页面被隐藏
    resize: function () {}    // 页面尺寸变化
  }
})

插槽

什么是插槽

在自定义组件的 wxml 结构中，可以提供一个 < slot > 节点（插槽），用于承载组件使用提供者的 wxml 结果。类似于Vue中的插槽。

单个插槽

在小程序中，默认每个自定义组件中只允许使用一个 < slot > 进行占位，这种个数上的限制叫做单个插槽。示例代码如下：

<!-- 这是封装好的组件 -->
<view class="my-components">
  <view>我是组件内的内部节点</view>
  <!-- 对于不确定的内容可以使用插槽 具体的内容由插槽的使用者提供-->
  <slot></slot>
</view>

<!-- 组件的使用者 -->
<my-components>
  <view>这是插入到组件slot中的内容</view>
</my-components>

启用多个插槽

在小程序的自定义组件中，需要使用多插槽时，可以在组件的 .js 文件中，通过如下方式进行启用。示例代码如下：

<!-- 这是封装好的组件 -->
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启动多 slot 支持
  }
})

定义多个插槽

可以在组件的 .wxml 中使用多个< slot > 标签，以不同的name来区分不同的插槽。示例代码如下：

<!-- 组件模板 -->
<view class="my-commonents">
  <!-- name为s1的插槽 -->
  <slot name="s1"></slot>
   <!-- name为s2的插槽 -->
  <slot name="s2"></slot>
   <!-- name为s3的插槽 -->
  <slot name="s3"></slot>
</view>

使用多个插槽

在使用带有多个插槽的自定义组件时，需要用 slot属性来将节点插入到不同的 < slot > 中。示例代码如下：

<!-- 引用组件的页面模板 -->
<my-test>
  <view slot="s1">使用了s1</view>
  <view slot="s2">使用了s2</view>
</my-test>

父子组件之间的通信

父子组件之间通信的3中方式

1. 属性绑定：用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据
2. 事件绑定：用于子组件像父组件传递数据，可以传递任意数据
3. 获取组件实例：父组件还可以通过 this.selectComponent() 获取子组件实例对象，这样就可以之间访问子组件的任意数据和方法

属性绑定

属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。父组件的实例代码如下：

// 父组件的 data 节点
data: {
  count: 0
}

// 父组件的 wxml 结构
<my-test count="{{ count }}"></my-test>

子组件在 properties 节点中声明对应的属性并使用。示例代码如下

// 子组件的 properties 节点
properties: {
  count: Number
}

// 子组件的 wxml 结构
<view> {{ count }} </view>

事件绑定

事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下：

1. 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
2. 在父组件的 wxml 中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件
3. 在子组件的 js 中，通过调用 this.triggerEvent(‘自定义事件名称’, {/ 参数对象/})**，将数据发送到父组件
4. 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据

// 父组件先定义好方法
// 这是父组件的js
demo (e) { console.log(e.detaill) }
// 这是父组件的 wxml
<my-test1 bind:demo="aa"></my-test1>

// 这是子组件的 wxml
<button bindtap="btn">触发父组件的东西</button>
// 这是子组件的 js
methods: {
  btn () {
    this.triggerEvent('demo', {
      name: 'xxx',
      age: 18
    })
  }
}

获取组件实例

可在父组件里调用 this.selectComponent(“id或class选择器”)，获取子组件的实例对象，从而之间访问组件的任意数据和方法。调用时需要传入一个选择器，例如 this.selectComponent(‘.my-test’)

// wxml 结构
<my-test1 bind:demo="aa" class="my-child"></my-test1>
<button bindtap="getChild">获取子组件实例</button>

// js 结构
getChild () {
  const child = this.selectComponent('.my-child')
  // 调用子组件里的setData方法
  child.setData({ add: '11' })
  // 调用子组件里的btn方法
  child.btn()
}

behaviors

什么是 behaviors

behaviors是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的“mixins”

behaviors 的工作方式

每个 behaviors 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。

创建 behaviors

调用 Behavior(Object object) 方法即可创建一个共享的behavior实例对象，供所有的组件使用：

// 调用 Behavior() 方法，创建实例对象
// 并使用 module.exports 将behavior实例对象共享出去
module.exports = Behavior({
  // 属性节点
  properties: {},
  // 私有数据节点
  data: { name: '张三' },
  // 事件处理函数和自定义方法节点
  methods: {},
  // 其他节点
})

导入并使用 behaviors

在组件中，使用 require() 方法导入需要的 behavior，挂在后即可访问 behavior 中的数据或方法，实例代码如下：

// 使用 require() 导入需要的自定义 behavior 模块
const myBehavior = require('../../behavior/my-behavior')

Component({
  // 将导入的 behavior 实例对象,挂载到 behaviors 数组节点中,即可生效
  behaviors: [myBehavior]
})

使用npm包

小程序对npm的支持与限制

目前，小程序中已经支持使用 npm 安装第三方包，从而 提高小程序的开发效率。但是，在小程序中使用 npm 包有如下3个限制：

1. 不支持依赖于 Node.js 内置库的包
2. 不支持依赖于 浏览器内置对象的包
3. 不支持依赖于 C++插件的包

使用npm

使用npm，跳转到微信开发文档

API Promise化

实现 API Promise 化

在小程序中，实现 API Promise 化主要依赖于 miniprogram-api-promise 这个第三方的 npm 包。它的安装和使用步骤如下：

安装
npm install --save miniprogram-api-promise

使用

// 在小程序入口文件中（app.js），只需调用一次 promisifAll() 方法即可实现异步 API 的promise化

import { promisifAll } from 'miniprogram-api-promise'

const wxp = wx.p = {}
promisifAll(wx, wxp)

调用 Promise 化之后的异步API

async getInfo () {
  const { data } = await wx.p.request({
	method: 'GET',
	url: 'https://wwww.xxxxxx',
	data: { name: 'a', age: 18 }
  })
  console.log(data)
}

全局数据共享

小程序中的全局数据共享方案

在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。

• mobx-miniprogram 用来创建 Store 实例对象
• mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用。

Mobx安装完后要删除 miniprogram_npm目录重新构建npm

使用 mobx

在目录中创建一个store目录，在里面创建个index.js文件，

// 这个文件中，专门来创建 Store 的实例对象
import { obServable, action } from 'mobx-miniprogram'

export const store = obServable({
	num1: 1,
	num2: 2,
	// 计算属性
	get sum() {
		return this.num1 + this.num2
	},
	// action 方法，用来修改store 中的数据
	updateNum1: action(function (step) {
		this.num1 + step
	})
})

在页面中使用、更新 store

import { createStoreBindings } from "mobx-miniprogram-bindings"
import store from "../../store/index"


Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['num1', 'num2', 'sum'],
      actions: ['updateNum1']
    })
  },
  xxx() {
	// 调用	updateNum1
	this.updateNum1(1)
  },
  // 页面卸载时,销毁当前页面的 store 绑定
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  }
})

在组件中使用、更新 store

import { storeBindingsBehavior } from "mobx-miniprogram-bindings"
import { store } from "../../store/index"

Component({
   // 通过 storeBindingsBehavior 来实现自动绑定
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: ['count'],
    actions: ['increase']
  }，
  methods: {
    // count 递增
    increaseHandle() {
      this.increase(1)
    }
  }
})