微信小程序的开发范式BeautyWe.js入门详解-创新互联
一个简单的介绍
在达拉特等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、成都网站建设 网站设计制作按需网站设计,公司网站建设,企业网站建设,品牌网站设计,成都全网营销推广,成都外贸网站制作,达拉特网站建设费用合理。BeautyWe.js 是什么?
它是一套专注于微信小程序的企业级开发范式,它的愿景是:
让企业级的微信小程序项目中的代码,更加简单、漂亮。
为什么要这样命名呢?
Write beautiful code for wechat mini program by the beautiful we!
「We」 既是我们的 We,也是微信的 We,Both beautiful!
那么它有什么卖点呢?
- 专注于微信小程序环境,写原汁原味的微信小程序代码。
- 由于只专注于微信小程序,它的源码也很简单。
- 插件化的编程方式,让复杂逻辑更容易封装。
- 再加上一些配套设施:
- 一些官方插件。
- 一套开箱即用,包含了工程化、项目规范以及微信小程序环境独特问题解决方案的框架。
- 一个CLI工具,帮你快速创建应用,页面,组件等。
它由以下几部分组成:
一个插件化的核心 - BeautyWe Core
对 App、Page 进行抽象和包装,保持传统微信小程序开发姿势,同时开放部分原生能力,让其具有「可插件化」的能力。
一些官方插件 — BeautyWe Plugins
得益于 Core 的「可插件化」特性,封装复杂逻辑,实现可插拔。官方对于常见的需求提供了一些插件:如增强存储、发布/订阅、状态机、Logger、缓存策略等。
一套开箱即用的项目框架 - BeautyWe Framework
描述了一种项目的组织形式,开箱即用,集成了 BeautyWe Core ,并且提供了如:全局窗口、开发规范、多环境开发、全局配置、NPM 等解决方案。
一个CLI工具 - BeautyWe Cli
提供快速创建应用、页面、插件,以及项目构建功能的命令行工具。并且还支持自定义的创建模板。
一个简单的例子
下载
用 BeautyWe 包装你的应用
开放原生App/Page,支持插件化
new BtApp({...}) 的执行结果是对原生的应用进行包装,其中包含了「插件化」的处理,然后返回一个新的实例,这个实例适配原生的 App()
方法。
下面来讲讲「插件化」到底做了什么事情。
首先,插件化开放了原生 App 的四种能力:
1.Data 域
把插件的 Data 域合并到原生 App 的 Data 域中,这一块很容易理解。
2.原生钩子函数
使原生钩子函数(如 onShow
, onLoad
)可插件化。让原生App与多个插件可以同时监听同一个钩子函数。如何工作的,下面会细说。
3.事件钩子函数
使事件钩子函数(与 view 层交互的钩子函数),尽管在实现上有一些差异,但是实现原理跟「原生钩子函数」一样的。
4.自定义方法
让插件能够给使用者提供 API。为了保证插件提供的 API 足够的优雅,支持当调用插件 API 的时候(如 event 插件 this.event.on(...)
),API 方法内部仍然能通过 this
获取到原生实例。
钩子函数的插件化
原生钩子函数,事件钩子函数我们统一称为「钩子函数」。
对于每一个钩子函数,内部是维护一个以 Series Promise 方式执行的执行队列。
以 onShow
为例,将会以这样的形式执行:
native.onShow → pluginA.onShow → pluginB.onShow → ...
下面深入一下插件化的原理:
- 经过
new BtApp(...)
包装,所有的钩子函数,都会有一个独立的执行队列, - 首先会把原生的各个钩子函数
push
到对应的队列中。然后每 use 插件的时候,都会分解插件的钩子函数,往对应的队列push
。 - 当
Native App
(原生)触发某个钩子的时候,BtApp
会以 Promise Series 的形式按循序执行对应队列里面的函数。 - 特殊的,
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
它们的使用很简单,哪里需要插哪里。
由于篇幅的原因,下面挑几个比较有趣的来讲讲,更多的可以看看官方文档:BeautyWe
增强存储 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());
网站栏目:微信小程序的开发范式BeautyWe.js入门详解-创新互联
本文路径:http://pwwzsj.com/article/dhcojh.html