1.Vant Weapp
https://youzan.github.io/vant-weapp/
npm init -y
npm i @vant/weapp -S --production
2.实现API promise化
npm install --save miniprogram-api-promise@1.0.4
//app.js
import { promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx,wxp)
//.wxml
<van-button type="primary" bindtap="getInfo">主要按钮</van-button>
//.js
async getIngo(){
const {data: res} = await wx.p.request({
method: 'GET',
url: '',
data: {name:'zs',age:20}
})
console.log(res)
},
3. 全局数据共享
全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。
开发中常用的全局数据共享方案有:Vuex、Redux、MobX等。
在小程序中,可使用 mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。其中:
mobx-miniprogram 用来创建 Store 实例对象
mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法,绑定到组件或页面中使用
npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
store.js
//用来创建Store的实例对象
import {action, observable} from 'mobx-miniprogram'
export const store = observable({
//数据字段
numA:1,
numB:2,
//计算属性,get表示只读
get sum(){
return this.numA+this.numB
},
//action方法,用来修改store中的值
updateNumA:action(function(step){
this.numA+=step
}),
updateNumB:action(function(step){
this.numB+=step
}),
}
)
将store中的成员绑定到页面中
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Page({
onLoad: function (options) {
this.storeBindings=createStoreBindings(this,{
store,
fields:['numA','numB','sum'],
actions:['updateNumA']
})
},
onUnload: function () {
this.storeBindings.destroyStoreBindings()
},
btnHandler(e){
this.updateNumA(e.target.dataset.step)
},
})
在页面中使用store中的成员
<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button type="primary" bindtap="btnHandler" data-step="{{1}}">numA + 1</van-button>
<van-button type="danger" bindtap="btnHandler" data-step="{{-1}}">numA - 1</van-button>
将store中的成员绑定到组件中
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Component({
behaviors:[storeBindingsBehavior],
storeBindings:{
store,
fields:{
numA:'numA',
numB:'numB',
sum:'sum'
},
actions:{
updateNumB:'updateNumB'
}
},
methods: {
btnHandler2(e){
this.updateNumB(e.target.dataset.step)
}
}
})
在组件中使用store中的成员
<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB + 1</van-button>
<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB - 1</van-button>
4.分包
4.1普通分包
//app.json
{
"pages":[ // 主包的所有页面
"pages/index",
"pages/logs"
],
"subpackages":[ // 通过 subpackages节点,声明分包的结构
{
"root":"packageA",// 第一个分包的根目录
"pages":[ // 当前分包下,所有页面的相对存放路径
"pages/cat"
"pages/dog"
},{
"root":"packageB",// 第二个分包的根目录
"name": "pack2",// 分包的别名
"pages":[ // 当前分包下,所有页面的相对存放路径
"pages/apple",
"pages/banana"
]
}
]
}
打包原则:
小程序会按 subpackages 的配置进行分包,subpackages 之外的目录将被打包到主包中
主包也可以有自己的 pages(即最外层的 pages字段)
tabBar 页面必须在主包内
分包之间不能互相嵌套
引用原则:
主包无法引用分包内的私有资源
分包之间不能相互引用私有资源
分包可以引用主包内的公共资源
4.2独立分包
开发者可以按需,将某些具有一定功能独立性的页面配置到独立分包中。原因如下:
当小程序从普通的分包页面启动时,需要首先下载主包,而独立分包不依赖主包即可运行,
,可以很大程度上提升分包页面的启动速度
添加"independent":true节点
//app.json
{
"pages":[ // 主包的所有页面
"pages/index",
"pages/logs"
],
"subpackages":[ // 通过 subpackages节点,声明分包的结构
{
"root":"packageA",// 第一个分包的根目录
"pages":[ // 当前分包下,所有页面的相对存放路径
"pages/cat"
"pages/dog"
},{
"root":"packageB",// 第二个分包的根目录
"name": "pack2",// 分包的别名
"pages":[ // 当前分包下,所有页面的相对存放路径
"pages/apple",
"pages/banana"
],
"independent":true
}
]
}
独立分包和普通分包以及主包之间,是相互隔绝的,不能相互引用彼此的资源!例如:
1.主包无法引用独立分包内的私有资源
2.独立分包之间,不能相互引用私有资源
3.独立分包和普通分包之间,不能相互引用私有资源
4.特别注意:独立分包中不能引用主包内的公共资源
4.3分包预下载
{
"preloadRule":{ // 分包顶下载的规则
"pages/contact/contact":{ // 触发分包预下载的贝面路径
// network 表示在指定的网络模式下进行预下载,
// 可选值为:all(不限网络)和 wifi(仅 wifi 模式下进行预下载)
// 默认值为:wifi
"network":"all",
// packages 表示进入页面后,预下载哪些分包
// 可以通过 root 或 name 指定预下载哪些分包
"packages":["pkgA"]
}
}
}
分包预下载的限制:
同一个分包中的页面享有共同的预下载大小限额
2M