微信小程序简介
- 运行环境不同，网页运行在浏览器环境中，小程序运行在微信环境中
- API不同，由于运行环境不同，所以在小程序中，无法调用DOM和BOM的API。但是，小程序中可以调用微信环境提供的各种API，例如：地理定位、扫码、支付等等
- 开发模式不同
- 网页的开发模式：浏览器+代码编辑器
- 小程序有自己的一套标准开发模式：申请小程序开发账号，安装小程序开发者工具，创建和配置小程序项目
项目结构
- pages 用来存放所以小程序页面
- utils 用来存放工具性质的模块
- app.js 小程序项目的入口文件
- app.json 小程序项目的全局配置文件
- app.wxss 小程序项目的全局样式文件
- project.config.json 项目的配置文件
- 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事件来相应用户的触摸行为。
- 通过bindtap，可以为组件绑定tap触摸事件，语法如下：
<button type="primary" bindtap="btnTapHandler">按钮</button> - 在页面的.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事件响应文本框的输入事件，语法格式如下：
- 通过bindinput，可以为文本框绑定输入事件：
<input type="primary" bindinput="inputHandler"></input> - 在页面的.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 文件是小程序的全局配置文件。常用的配置项如下：
- pages：记录当前小程序所有页面的存放路径
- window：全局设置小程序窗口的外观
- tabBar：设置小程序底部的tabBar效果
- 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个组成部分
- backgroundColor：tabBar 的背景色
- selectedIconPath：选中时的图片路径
- borderStyle：tabBar 上边框的颜色
- iconPath：未选中时的图片路径
- selectedColor：tab 上的文字选中时的颜色
- 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 |
网络数据请求
小程序中网络数据请求的限制
出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制
- 只能请求HTTPS类型的接口
- 必须将接口的域名添加到信任列表中
配置 request 合法域名
需求描述：假设在自己的微信小程序中，希望请求https://www.xxx.com/域名下的接口
配置步骤：登录微信小程序管理后台 → 开发 → 开发设置 → 服务器域名 → 修改 request 合法域名
注意事项：
- 域名只支持 https 协议
- 域名不能使用 IP 地址或 localhost
- 域名必须经过 ICP 备案
- 服务器域名一个月内最多可申请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请求“，而是叫做 ”发起网络数据请求“。
页面导航
小程序中实现页面导航的两种方式
-
声明式导航
- 在页面上声明一个 < navigator > 导航组件
- 通过点击< navigator > 组件实现页面跳转
-
编程式导航
- 调用小程序的导航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有自己的数据类型
- number 数值类型、string字符串类型、boolean布尔类型、object对象类型
- function函数类型、array数组类型、date日期类型、regexp正则
- wxs不支持类似于ES6及以上的语法形式
- 不支持：let、const、解构辅助、展开运算符、箭头函数、对象属性简写等等。。
- 支持：var 定义变量、普通function函数类似于ES5的语法
- wxs遵循CommonJS规范
- module 对象
- request() 函数
- module.exports 对象
基础语法
内嵌wxs脚本
wxs代码可以编写wxml文件中的< wxs > 标签内，就像JavaScript代码可以编写在html中的< script >标签内一样。
wxml文件中的每个 < wxs ></ 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代码是隔离的。体现在如下两方面：
- wxs不能调用js中定义的函数
- wxs不能调用小程序提供的API
性能好
- 在IOS设备上，小程序内的WXS会比JavaScript代码块2 ~ 20倍
- 在android设备上，二者的运行效率无差异
自定义组件
组件的创建与引用
创建组件
- 在项目的根目录中，鼠标右键手动创建components → test文件夹
- 在新建的components → test文件上，鼠标右键，点击 新建 Component
- 键入组件的名称后回车，会自动生成组件对应的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。他们各自的特点如下：
- 组件实例刚被创建好的时候，created 生命周期函数会被触发
- 此时还不能调用 setData
- 通常在这个生命周期中，只应该用于给组件的this添加一些自定义的属性字段
- 在组件完全初始化完成、进入页面节点树后，attached 生命周期函数会被触发
- 此时，this.data 以被初始化完毕
- 这个生命周期很有用，绝大多初始化的工作可以在这个时机进行（例如发送请求获取初始化数据）
- 在组件离开页面节点树后，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中方式
- 属性绑定：用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据
- 事件绑定：用于子组件像父组件传递数据，可以传递任意数据
- 获取组件实例：父组件还可以通过 this.selectComponent() 获取子组件实例对象，这样就可以之间访问子组件的任意数据和方法
属性绑定
属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。父组件的实例代码如下：
// 父组件的 data 节点
data: {
count: 0
}
// 父组件的 wxml 结构
<my-test count="{{ count }}"></my-test>
子组件在 properties 节点中声明对应的属性并使用。示例代码如下
// 子组件的 properties 节点
properties: {
count: Number
}
// 子组件的 wxml 结构
<view> {{ count }} </view>
事件绑定
事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下：
- 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
- 在父组件的 wxml 中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件
- 在子组件的 js 中，通过调用 this.triggerEvent(‘自定义事件名称’, {/ 参数对象/})**，将数据发送到父组件
- 在父组件的 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个限制：
- 不支持依赖于 Node.js 内置库的包
- 不支持依赖于 浏览器内置对象的包
- 不支持依赖于 C++插件的包
使用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)
}
}
})
扫一扫
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
