微信小程序的开发范式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());