特殊的,onLaunch 和 onLoad 的执行队列中,会在队列顶部插入一个初始化的任务(initialize),它会以同步的方式按循序执行 Initialize Queue 里面的函数。这正是插件生命周期函数中的 plugin.initialize。
这种设计能提供以下功能:
1.可插件化
只需要往对应钩子函数的事件队列中插入任务。
2.支持异步
由于是以 Promise Series 方式运行的,其中一个任务返回一个 Promise,下一个任务会等待这个任务完成再开始。如果发生错误,会流转到原生的 onError() 中。
3.解决了微信小程序 app.js 中 getApp() === undefinded 问题
造成这个问题,本质是因为 App() 的时候,原生实例未创建。但是由于 Promise 在 event loop 中是一个微任务,被注册在下一次循环。所以 Promise 执行的时候 App() 早已经完成了。
一些官方插件
BeautyWe 官方提供了一系列的插件:
增强存储: Storage
数据列表:List Page
缓存策略:Cache
日志:Logger
事件发布/订阅:Event
状态机:Status
它们的使用很简单,哪里需要插哪里。
由于篇幅的原因,下面挑几个比较有趣的来讲讲,更多的可以看看官方文档:
增强存储 Storage
该功能由 @beautywe/plugin-storage 提供。
由于微信小程序原生的数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用。
所以该插件在 wx.getStorage/setStorage 的基础上,提供了两种扩展能力:
过期控制
版本隔离
一些简单的例子
安装
import { BtApp } from '@beautywe/core'; import storage from '@beautywe/plugin-storage'; const app = new BtApp(); app.use(storage());
过期控制
// 7天后过期 app.storage.set('name', 'jc', { expire: 7 });
版本隔离
app.use({ appVersion: '0.0.1' }); app.set('name', 'jc'); // 返回 jc app.get('name'); // 当版本更新后 app.use({ appVersion: '0.0.2' }); // 返回 undefined; app.get('name');
更多的查看 @beautywe/plugin-storage 官方文档
数据列表 List Page
对于十分常见的数据列表分页的业务场景, @beautywe/plugin-listpage 提供了一套打包方案:
满足常用「数据列表分页」的业务场景
支持分页
支持多个数据列表
自动捕捉下拉重载:onPullDownRefresh
自动捕捉上拉加载:onReachBottom
自带请求锁,防止帕金森氏手抖用户
简单优雅的 API
一个简单的例子:
import BeautyWe from '@beautywe/core'; import listpage from '@beautywe/plugin-listpage'; const page = new BeautyWe.BtPage(); // 使用 listpage 插件 page.use(listpage({ lists: [{ name: 'goods', // 数据名 pageSize: 20, // 每页多少条数据,默认 10 // 每一页的数据源,没次加载页面时,会调用函数,然后取返回的数据。 fetchPageData({ pageNo, pageSize }) { // 获取数据 return API.getGoodsList({ pageNo, pageSize }) // 有时候,需要对服务器的数据进行处理,dataCooker 是你定义的函数。 .then((rawData) => dataCooker(rawData)); }, }], enabledPullDownRefresh: true, // 开启下拉重载, 默认 false enabledReachBottom: true, // 开启上拉加载, 默认 false })); // goods 数据会被加载到,goods 为上面定义的 name // this.data.listPage.goods = { // data: [...], // 视图层,通过该字段来获取具体的数据 // hasMore: true, // 视图层,通过该字段来识别是否有下一页 // currentPage: 1, // 视图层,通过该字段来识别当前第几页 // totalPage: undefined, // }
只需要告诉 listpage 如何获取数据,它会自动处理「下拉重载」、「上拉翻页」的操作,然后把数据更新到 this.data.listPage.goods 下。
View 层只需要描述数据怎么展示:
<view wx:for="listPage.goods.data"> ... </view> <view wx:if="listPage.goods.hasMore === false"> 没有更多了 </view>
listpage 还支持多数据列表等其他更多配置,详情看: @beautywe/plugin-listpage
缓存策略 Cache
@beautywe/plugin-cache 提供了一个微信小程序端缓存策略,其底层由 super-cache 提供支持。
特性
提供一套「服务端接口耗时慢,但加载性能要求高」场景的解决方案
满足最基本的缓存需求,读取(get)和保存(set)
支持针对缓存进行逻辑代理
灵活可配置的数据存储方式
How it work
一般的请求数据的形式是,页面加载的时候,从服务端获取数据,然后等待数据返回之后,进行页面渲染:
但这种模式,会受到服务端接口耗时,网络环境等因素影响到加载性能。