微信小程序的开发范式BeautyWe.js入门详解(2)

特殊的,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

一般的请求数据的形式是,页面加载的时候,从服务端获取数据,然后等待数据返回之后,进行页面渲染:

微信小程序的开发范式BeautyWe.js入门详解

但这种模式,会受到服务端接口耗时,网络环境等因素影响到加载性能。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/4cf29f65f699682ba0e16e36c0ad0734.html