微信小程序（4）进阶

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 + 1van-button>
<van-button type="danger" bindtap="btnHandler" data-step="{{-1}}">numA - 1van-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 + 1van-button>
<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB - 1van-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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！