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

一个简单的介绍

微信小程序的开发范式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 进行抽象和包装,保持传统微信小程序开发姿势,同时开放部分原生能力,让其具有「可插件化」的能力。

一些官方插件 —

得益于 Core 的「可插件化」特性,封装复杂逻辑,实现可插拔。官方对于常见的需求提供了一些插件:如增强存储、发布/订阅、状态机、Logger、缓存策略等。

一套开箱即用的项目框架 -

描述了一种项目的组织形式,开箱即用,集成了 BeautyWe Core ,并且提供了如:全局窗口、开发规范、多环境开发、全局配置、NPM 等解决方案。

一个CLI工具 -

提供快速创建应用、页面、插件,以及项目构建功能的命令行工具。并且还支持自定义的创建模板。

一个简单的例子

下载

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

用 BeautyWe 包装你的应用

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

之后,你就能使用 BeautyWe Plugin 提供的能力了。

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

开放原生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 → ...

下面深入一下插件化的原理:

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

工作原理是这样的:

经过 new BtApp(...) 包装,所有的钩子函数,都会有一个独立的执行队列,

首先会把原生的各个钩子函数 push 到对应的队列中。然后每 use 插件的时候,都会分解插件的钩子函数,往对应的队列 push。

当 Native App(原生)触发某个钩子的时候,BtApp 会以 Promise Series 的形式按循序执行对应队列里面的函数。

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

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