- 知道如何自定义小程序组件
- 知道组件中的 behaviors 的作用
- 知道如何安装与配置 vant-weapp 组件库
- 知道如何使用 MobX 实现全局数据共享
- 知道如何对 API 进行 Promise 化
- 在根目录下，创建
components文件夹 components文件夹右键点击新建 component- 每个组件有 4 个文件，分别是
.js、.json、.wxss、.wxml
推荐将不同组件放在不同的文件夹中：
组件的引用方式有两种：
- 局部引用：组件只能在当前引用的页面中使用
- 全局引用：组件可以在每个小程序页面中使用
在页面的.json配置文件中引用组件
{
"usingComponents": {
"my-test01": "/components/test1/test"
}
}<!-- WXML -->
<my-test01></my-test01>在app.json中引用组件，这样所有的小程序页面都可以使用组件
{
"pages": {},
"window": {},
"usingComponents": {
"my-test02": "/components/test2/test"
}
}根据组件的使用频率和范围，来选择合适的引用方式：
- 如何某个组件在多个页面中经常用到，建议使用全局引用
- 如果某个组件只在特定的页面中才用到，建议使用局部引用
从表面来看，组件和页面都是由4个文件组成的，但是组件和页面的文件有明显不同：
- 组件的
.json文件需要声明："component": true - 组件的
.js文件调用的是Component()函数 - 组件的事件处理函数集中在
methods节点中
默认情况下，自定义组件的样式只能对当前组件有效，不会影响其他组件的 UI 结构
- 组件 A 的样式不会影响组件 B 的样式
- 组件 A 的样式不会影响小程序的样式
- 小程序的样式不会影响组件的样式
app.wxss的全局样式对于组件无效- 只有
class选择器有样式隔离效果，id、属性、标签选择器不会有影响
建议：在组件和引用组件的页面中建议使用 class 选择器不要使用 ID、属性、标签选择器
默认情况下，组件样式隔离开启，如果想要外界控制组件的样式，那么可以通过stylesolation修改组件的样式隔离选项
// 在 组件.js 中
Component({
options: {
// isolated：开启隔离
styleIsolation: "isolated",
// apply-shard：外部可以影响组件样式，组件样式不会影响外部样式
styleIsolation: "apply-shared",
// shared：组件与外部的样式可以互相影响
styleIsolation: "shared"
}
})或在组件.json中
{
"styleIsolation": "isolated",
"styleIsolation": "apply-shared",
"styleIsolation": "shared"
}| 可选值 | 默认值 | 描述 |
|---|---|---|
| isolated | 是 | 启动样式隔离 |
| apply-shared | 否 | 页面的样式可以影响组件样式，组件样式无法影响页面样式 |
| shared | 否 | 页面与组件之间的样式互相影响 |
在小程序组件中，用于组件模板渲染的私有数据，需要定义在 data 节点下：
Component({
// 组件的初始数据
data: {
count: 0
}
})在小程序组件中，事件的处理函数与自定义函数需要定义在 methods 节点中：
Component({
// 包括事件处理函数与自定义函数
methods: {
// 事件处理函数
addCount() {
this.setData({
count: this.data.count + 1
})
this._showCount()
},
// 自定义函数建议以 _ 开头
_showCount() {
wx.showToast({
title: "count的值为：" + this.data.conut,
icon: "none"
})
}
}
})在小程序组件中，properties 是组件的对外属性，用来接收外界传入组件的值：
// 组件.js
Component({
properties: {
// 完整的定义属性方式【带有默认值】
max: {
// 属性值的类型
type: Number,
// 属性默认值
value: 10
},
// 简略版的定义定义属性方式【不带有默认值】
max: Number
},
// 如何使用？
this.properties.max
})<!-- 外界引入组件，传入属性 -->
<my-component max="10"></my-component>在小程序的组件中，properties 属性和 data 数据的用法是相同的，他们都是可读可写的，但是：
-
data 更倾向于储存组件的私有属性
-
properties 更倾向于储存外界传递过来的数据
-
data 和 properties 都储存在了同一个对象上
Component({
methods: {
showInfo() {
console.log(this.data === this.properties) // true
}
}
})由于 data 与 properties 没有区别，所以可以使用this.setData()来修改 properties 的值：
<!-- 组件.wxml -->
<view> 最大值：{{max}} </view>// 组件.js
Component({
properties: {
max: Number
},
methods: {
addMax() {
this.setData({
max: this.properties.max + 1
})
}
}
})数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。类似于 Vue 中的watch侦听器
Component({
observers: {
"字段A, 字段B": function (字段A的值, 字段B的值) {
// doSomthing...
}
}
})<!-- 组件的 UI 结构 -->
<view>{{n1}} * {{n2}} = {{sum}}</view>
<button bindtap="addN1">n1自增</button>
<button bindtap="addN2">n2自增</button>// 组件的 JS 文件
Component({
data: {
n1: 0,
n2: 0,
sum: 0
},
methods: {
addN1() {
this.setData({
n1: this.data.n1 + 1
})
},
addN2() {
this.setData({
n2: this.data.n2 + 1
})
},
},
observers: {
'n1, n2': function(n1, n2) {
this.setData({
// 通过监听器自动计算 sum 的值
sum: n1 + n2
})
}
}
})数据监听器支持监听对象中单个或者多个属性的变化，示例语法如下：
Component({
observers: {
"对象.属性A, 对象.属性B": function(属性A的新值, 属性B的新值) {
// 触发此监听器的 3 种情况：
// 【为属性赋值】使用 setData(属性值 = )
// 【直接为对象赋值】使用 setData(对象 = 0)
}
}
})如果某个对象需要监听的属性太多，为了方便可以使用通配符**来监听对象中所有属性的变化：
Component({
observers: {
"obj.**": function(newObj) {
//newObj就是所有新值的集合
}
}
})概念：纯数据字段指的是那些不用于界面渲染的 data 字段。
应用场景：某些 data 的字段既不会渲染在页面中，也不会传递给其他组件，这个时候这个字段就可以作为纯数据字段
好处：纯数据字段可以提高页面更新的性能
在Component构造器的options节点种，指定pureDataPattern为一个正则表达式，字段名符合这个正则表达式的字段就将会成为纯数据字段：
Component({
options: {
// 指定 _ 开头的字段为纯数据字段
pureDataPattern: /^_/
},
data: {
// a 不是纯数据字段
a: '0',
// _a 是纯数据字段
_a: '0',
}
})标 * 为常用
| 生命周期函数 | 参数 | 描述说明 |
|---|---|---|
| created* | 无 | 在组件实例刚刚被创建时被执行 |
| attached* | 无 | 在组件实例进入页面节点树时执行 |
| ready | 无 | 在组件在视图层布局完毕后执行 |
| moved | 无 | 在组件实例被移动到节点树另一个位置时执行 |
| detached* | 无 | 在组件实例被移除页面节点时执行 |
| error | Object Error | 每当组件方法抛出错误时执行 |
在小程序组件中，最主要的生命周期函数为created、attached、detached，他们的特点如下：
created：在组件实例刚被创建好时，会触发此函数- 此时还不能调用
setData - 通常在这个阶段，只应该用于给组件的
this添加一些自定义属性或方法
- 此时还不能调用
attached：在组件完全初始化完成后，进入页面节点树后触发- 此时，
this.data初始化完毕 - 这个生命周期函数很有用，大部分的初始化工作都在这个函数中进行（例如请求初始数据）
- 此时，
detached：在组件离开页面节点树时，会触发此函数- 当退出一个页面时，会触发该页面的所有组件的
detached生命周期函数 - 在该函数中可以做一些清理性质的工作
- 当退出一个页面时，会触发该页面的所有组件的
在小程序组件中，生命周期函数可以直接定义在Component构造函数的第一级参数种，可以在lifetimes字段内进行声明（这种是官方推荐方式，优先级最高）
Component({
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
// ...
})有时，自定义组件需要依赖页面的状态变化，此时就需要用到组件所在页面的生命周期
组件所在页面的生命周期函数有如下 3 个：
| 生命周期函数 | 参数 | 描述 |
|---|---|---|
| show | 无 | 组件所在页面展示 |
| hide | 无 | 组件所在页面隐藏 |
| resize | Object Size | 组件所在页面尺寸发生变化 |
组件所在页面的生命周期函数，需要定义在组件的pageLifetimes节点中
Component({
pageLifetimes: {
show: function() {
// 页面被展示
},
hide: function() {
// 页面被隐藏
},
resize: function(size) {
// 页面尺寸变化
}
}
})在自定义的 WXML 结构中，可以提供一个<slot>节点（插槽），用于承载组件使用者提供的 WXML 结构
小程序默认每个组件只能使用一个<slot>进行占位，这种情况就是单个插槽
<!-- 组件的封装者 -->
<view>
<view>这是组件的内部节点</view>
<!-- 对于不确定的内容，可以使用 slot 进行占位，具体内容需要调用者确定 -->
<slot></slot>
</view>
<!-- 组件的调用者 -->
<component-tag-name>
<!-- 这部分会被插入到 slot 插槽位置 -->
<view>这里是插入到 slot 插槽的内容</view>
</component-tag-name>如果需要用到多个<slot>可以在组件的.js文件中，配置以下内容：
Component({
options: {
multipleSlots: true // 启动多个 slot 插槽
}
})以name属性来区分不同的插槽：
<!-- 组件的封装者 -->
<view>
<slot name="s1"></slot>
<slot name="s2"></slot>
</view>
<!-- 组件的调用者 -->
<component-tag-name>
<view slot="s1">这里插入到 s1 的 slot</view>
<view slot="s2">这里插入到 s2 的 slot</view>
</component-tag-name>- 属性绑定
- 用于父组件向子组件传递数据，仅能设置 JSON 格式兼容的数据
- 事件绑定
- 用于子组件向父组件传递数据，可以传递任意数据
- 获取组件实例
- 父组件可以通过
this.selectComponent()获取到子组件实例 - 这样就可以访问子组件的任意属性与方法
- 父组件可以通过
属性绑定用于实现父向子传递数据，并仅能传递普通类型的数据，无法传递方法：
// 父组件的 data 节点
data: {
count: 0
}<!-- 父组件的 WXML 结构 -->
<son-component count="{{count}}"></son-component>子组件在properties声明并接收属性
// 子组件 js
Component({
properties: {
count: Number
}
})事件绑定用于实现子向父传递数据，能传递任何类型的数据，使用步骤如下：
// 1. 在父组件的 JS 中定义一个函数，该函数将通过事件绑定的方式传递到子组件
Component({
methods: {
test: function() {
// doSomething...
}
}
})<!-- 2. 在父组件的 WXML 中，通过自定义事件的方式将函数传递 -->
<son-component bind:test="test"></son-component>// 3. 在子组件中，获取到自定义事件，并触发事件，将数据传递给父组件
Component({
methods: {
example: function() {
// 通过 triggerEvent 来触发父组件方法
this.triggerEvent('test', { value: '你好，父组件' })
}
}
})// 4. 在父组件的 JS 中获取到值
Component({
methods: {
test: function(e) {
// 通过 e.detail 获取到子组件传递的值
console.log(e.detail.value) // 你好，父组件
}
}
})可以在父组件调用this.selectComponent('id 或 class 选择器')，获取到子组件实例对象
<!-- 父组件 WXML -->
<son-component class="sonComponent" id="ca"></son-component>// 父组件 JS
getChild: function() {
// 通过 selectComponent 来获取子组件实例
const sonComponet = this.selectComponent('.sonComponent 或者 #ca')
// 可以获取子组件的任意属性和方法
sonComponent.xx()
}behaviors 是小程序中，用于实现组件代码共享的特性，类似于 Vue 中的mixins
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。每个组件可以引用多个 behavior，behavior 也可以引用其它 behavior。
调用Behavior(Object object)方法即可创建一个共享的 behavior 实例对象，供所有的组件使用：
// 调用 Behavior() 方法，创建实例对象
// 使用 module.exports 向外暴露 behavior
module.exports = Behavior({
// 属性节点
properties: {},
// 私有属性节点
data: { user: 'aa' },
// 事件处理函数或其他自定义方法节点
methods: {}
// 其他节点......
})在组件中，使用require()方法导入需要的 behavior，挂载后即可访问 behavior 中的数据或方法，示例代码如下：
// 1. 使用 require() 导入指定 behavior
const behaviorTest = require('../behaviors/test')
Component({
// 2. 将导入的 behaviors，挂载到 behaviors 数据节点中
behaviors: [behaviorTest],
// 组件的其他节点...
})| 定义段 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| properties | Object Map | 否 | 同组件的属性 |
| data | Object | 否 | 同组件的数据 |
| methods | Object | 否 | 同自定义组件的方法 |
| behaviors | String Array | 否 | 引入其它的 behavior |
| created | Function | 否 | 生命周期函数 |
| attached | Function | 否 | 生命周期函数 |
| ready | Function | 否 | 生命周期函数 |
| moved | Function | 否 | 生命周期函数 |
| detached | Function | 否 | 生命周期函数 |
组件和它引用的 behavior 中可以包含同名的字段，此时可以参考如下 3 种同名时的处理规则：
- 同名的数据字段（data）
- 同名的属性（properties）或方法（methods）
- 同名的生命周期函数
关于详细的覆盖和组合规则，可以参考微信小程序官方文档给出的说明：
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html
目前，小程序已支持使用 npm 安装第三方包，但是有以下限制：
- 不支持依赖于 Node.js 内置库的包
- 不支持依赖于浏览器内置对象的包
- 不支持依赖于 C++ 插件的包
Vant Weapp 是有赞前端团队开发的一套小程序 UI 组件库，基于 Vue.js
官方文档地址：https://youzan.github.io/vant-weapp
在小程序项目中，安装 Vant 组件库主要分为3步：
- 通过 npm 安装
- 修改 app.json
- 修改 project.config.json
详细操作步骤，参考：
https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang
构建好 Vant 组件库后，可以在app.json的usingComponents节点引入需要的组件，之后可以在 WXML 中直接使用
// app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}<!-- 某个 WXML -->
<van-button type="primary">按钮</van-button>Vant Weapp 使用 CSS 变量来实现定制主题：https://youzan.github.io/vant-weapp/#/theme
关于 CSS 变量的用法，参考官方文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties
示例：
在app.wxss中，写入 CSS 变量，即可对全局生效：
page {
--button-border-radius: 10px;
--button-default-color: #f2f3f5;
--toast-max-width: 100px;
--toast-background-color: pink;
}默认情况下，小程序提供的异步 API 都是基于回调函数实现的，例如，请求网络数据需要这么写：
wx.request({
method: '',
url: '',
data: { },
success: () => {},
fail: () => {},
complete: () => {}
})容易造成回调地狱问题，可读性可维护性差
在小程序中，实现 API Promise 化主要依赖于miniprogram-api-promise这个第三方的 npm 包。它的安装和使用步骤如下：
# 1. 通过 npm 安装
npm i miniprogram-api-promise --S// 2. 在小程序入口文件 app.js 中，只需要调用一次 promisifyAll()
// 即可对所有的请求 promise 化
import { promisifyAll, promisify } from 'miniprogram-api-promise';
const wxp = {}
// 对所有的请求进行 Promise 化
promisifyAll(wx, wxp)
wxp.getSystemInfo().then(console.log)
// 兼容使用
wxp.getSystemInfo({success(res) {console.log(res)}})
// 单独对某个请求方法进行 Promise 化
promisify(wx.getSystemInfo)().then(console.log)async getUserInfo(){
const res = await wxp.request({
method: "GET",
url: 'xxx.com',
data: { username: 'zs' }
})
console.log(res)
}全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。
开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。
在小程序中，可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。其中：
mobx-miniprogram用来创建 Store 实例对象mobx-miniprogram-bindings用来把 Store 中的共享数据或方法，绑定到组件或页面中使用
在项目中运行如下的命令，安装 MobX 相关的包：
npm install --save mobx-miniprogram mobx-miniprogram-bindings// store.js
import { observable, action } from 'mobx-miniprogram'
export const store = observable({
// 数据字段
numA: 1,
numB: 2,
// 计算属性
get sum() {
return this.numA + this.numB
},
// actions，用于修改 store 中的数据字段
update: action(function () {
const sum = this.sum
this.numA = this.numB
this.numB = sum
})
})import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from './store'
Page({
data: {
someData: '...'
},
onLoad() {
// 将数据绑定到页面上
this.storeBindings = createStoreBindings(this, {
store,
fields: ['numA', 'numB', 'sum'],
actions: ['update'],
})
},
onUnload() {
// 页面销毁生命周期函数，卸载绑定
this.storeBindings.destroyStoreBindings()
},
myMethod() {
this.data.sum // 来自于 MobX store 的字段
}
})在页面 WXML 上使用：
<!-- WXML -->
<view>{{numA}} + {{numB}} = {{sum}}</view>import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from './store'
Component({
behaviors: [storeBindingsBehavior],
data: {
someData: '...'
},
storeBindings: {
store,
fields: {
numA: () => store.numA,
numB: (store) => store.numB,
sum: 'sum'
},
actions: {
buttonTap: 'update'
},
},
methods: {
myMethod() {
this.data.sum // 来自于 MobX store 的字段
}
}
})将页面、自定义组件和 store 绑定有两种方式： behavior 绑定 和 手工绑定 。
- 使用
behaviors的方式，仅适用于Component里面 - 手工绑定必须使用
createStoreBindings来创建绑定，但是在生命周期函数中必须使用this.storeBindings.destroyStoreBindings()来清理掉绑定，否则将造成内存泄露！
分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需加载
- 可以优化小程序的初次启动时间
- 在多团队开发时可以更好的解耦协作
分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间。
分包后，小程序项目由1个主包 + 多个分包组成：
- 主包：一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源
- 分包：只包含当前分包的资源和页面
- 在小程序启动时，默认会下载主包并启动主包内页面
- tabBar 页面需要放在主包中
- 当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示
- 非 tabBar 页面可以按照功能的不同，划分为不同的分包之后，进行按需下载
目前，小程序分包的大小有以下两个限制：
- 整个小程序的包不能超过 16MB （主包 + 所有分包）
- 单个分包/主包不可以超过 2M
在app.json的subpackages中声明分包
{
// 主包的所有页面
"pages": [
"pages/index",
"pages/logs"
],
// 分包的页面
"subpackages": [
{
"root": "packageA", // 第一个分包的根目录
"pages": [ // 当前分包下所有页面的相对路径
"pages/user",
"pages/userinfo"
]
},{
"root": "packageB", // 第二个分包的根目录
"name": "pack2", // 分包的别名
"pages": [
"pages/cart",
"pages/product"
]
}
]
}- 小程序会按
subpackages的配置进行分包，subpackages 之外的目录将被打包到主包中 - 主包也有自己的 pages
- tabBar 页面必须在主包中
- 分包之间不能有相互嵌套
- 主包无法引用分包内的私有资源
- 分包之间不能相互引用私有资源
- 分包可以引用主包内的公共资源
独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行。
最主要的区别：是否依赖于主包才能运行
- 普通分包必须依赖于主包才能运行
- 独立分包可以在不下载主包的情况下独立运行
开发者可以按需，将某些具有一定功能独立性的页面配置到独立分包中。原因如下：
- 当小程序从普通的分包页面启动时，需要首先下载主包
- 而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度
注意：一个小程序中可以有多个独立分包。
{
// 主包的所有页面
"pages": [
"pages/index",
"pages/logs"
],
// 分包的页面
"subpackages": [
{
"root": "packageA", // 第一个分包的根目录
"pages": [ // 当前分包下所有页面的相对路径
"pages/user",
"pages/userinfo"
]
},{
"root": "packageB", // 第二个分包的根目录
"name": "pack2", // 分包的别名
"pages": [
"pages/cart",
"pages/product"
],
"independent": true // 设置此节点，该分包为独立分包
}
]
}独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源！例如：
- 主包无法引用独立分包的资源
- 独立分包之间，无法引用私有资源
- 独立分包与普通分包无法引用私有资源
- 独立分包无法引用主包公共资源
分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。
预下载分包的行为，会在进入指定的页面时触发。在app.json中，使用preloadRule节点定义分包的预下载规则，示例代码如下：
{
"preloadRule": {
// 触发预下载的路径
"pages/contact/contact": {
// network 表示在指定的网络模式下下载
// 可选值：all（不限网络）wifi（仅限在 wifi 模式下）
// 默认值：wifi
"network": "all",
// packages 表示进入页面后，需要下载哪些包
"packages": ['pack1', 'pack2']
}
}
}同一个分包中的页面享有共同的预下载大小限额 2M，例如：
不允许，分包 A+B+C > 2M
允许，分包 A+B+C < 2M