微信小程序的開發范式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 包裝你的應用

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

開放原生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());

過期控制

// 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 class="good" wx:for="listPage.goods.data">
 ...
</view>
<view class="no-more" wx:if="listPage.goods.hasMore === false">
 沒有更多了
</view>

listpage 還支持多數據列表等其他更多配置，詳情看： @beautywe/plugin-listpage

緩存策略 Cache

@beautywe/plugin-cache 提供了一個微信小程序端緩存策略，其底層由 super-cache 提供支持。

特性

• 提供一套「服務端接口耗時慢，但加載性能要求高」場景的解決方案
• 滿足最基本的緩存需求，讀取（get）和保存（set）
• 支持針對緩存進行邏輯代理
• 靈活可配置的數據存儲方式

How it work

一般的請求數據的形式是，頁面加載的時候，從服務端獲取數據，然后等待數據返回之后，進行頁面渲染：

但這種模式，會受到服務端接口耗時，網絡環境等因素影響到加載性能。

對于加載性能要求高的頁面（如首頁），一般的 Web 開發我們有很多解決方案（如服務端渲染，服務端緩存，SSR 等）。
但是也有一些環境不能使用這種技術（如微信小程序）。

Super Cache 提供了一個中間數據緩存的解決方案：

思路：

• 當你需要獲取一個數據的時候，如果有緩存，先把舊的數據給你。
• 然后再從服務端獲取新的數據，刷新緩存。
• 如果一開始沒有緩存，則請求服務端數據，再把數據返回。
• 下一次請求緩存，從第一步開始。

這種解決方案，舍棄了一點數據的實時性（非第一次請求，只能獲取上一次最新數據），大大提高了前端的加載性能。
適合的場景：

• 數據實時性要求不高。
• 服務端接口耗時長。

使用

import { BtApp } from '@beautywe/core';
import cache from '@beautywe/plugin-cache';

const app = new BtApp();
app.use(cache({
 adapters: [{
 key: 'name',
 data() {
 return API.fetch('xxx/name');
 }
 }]
}));

假設 API.fetch('xxx/name') 是請求服務器接口，返回數據：data_from_server

那么：

app.cache.get('name').then((value) => {
 // value: 'data_from_server' 
});

更多的配置，詳情看：@beautywe/plugin-cache

日志 Logger

由 @beautywe/logger-plugin 提供的一個輕量的日志處理方案，它支持：

• 可控的 log level
• 自定義前綴
• 日志統一處理

使用

import { BtApp } from '@beautywe/core';
import logger from '@beautywe/plugin-logger';

const page = new BtApp();

page.use(logger({
 // options
}));

API

page.logger.info('this is info');
page.logger.warn('this is warn');
page.logger.error('this is error');
page.logger.debug('this is debug');

// 輸出
// [info] this is info
// [warn] this is warn
// [error] this is error
// [debug] this is debug

Level control

可通過配置來控制哪些 level 該打印：

page.use(logger({
 level: 'warn',
}));

那么 warn 以上的 log （info, debug）就不會被打印，這種滿足于開發和生成環境對 log 的不同需求。

level 等級如下：

Logger.LEVEL = {
 error: 1,
 warn: 2,
 info: 3,
 debug: 4,
};

更多的配置，詳情看： @beautywe/plugin-logger

BeautyWe Framework

@beautywe/core 和 @beautywe/plugin-... 給小程序提供了：

• 開放原生，支持插件化 —— by core
• 各種插件 —— by plugins

但是，還有很多的開發中實際還會遇到的痛點，是上面兩個解決不到的。

如項目的組織、規范、工程化、配置、多環境等等

這些就是，「BeautyWe Framework」要解決的范疇。

它作為一套開箱即用的項目框架，提供了這些功能：

• 集成 BeautyWe Core
• NPM 支持
• 全局窗口
• 全局 Page，Component
• 全局配置文件
• 多環境開發
• Example Pages
• 正常項目需要的標配：ES2015+,sass,uglify,watch 等
• 以及我們認為良好的項目規范（eslint，commit log，目錄結構等）

也是由于篇幅原因，挑幾個有趣的來講講，更多的可以看看官方文檔：BeautyWe

快速創建

首先安裝 @beautywe/cli

$ npm i @beautywe/cli -g

創建應用

$ beautywe new app

> appName: my-app
> version: 0.0.1
> appid: 123456
> 這樣可以么:
> {
> "appName": "my-app",
> "version": "0.0.1",
> "appid": "123456"
> }

回答幾個問題之后，項目就生成了：

my-app
├── gulpfile.js
├── package.json
└── src
 ├── app.js
 ├── app.json
 ├── app.scss
 ├── assets
 ├── components
 ├── config
 ├── examples
 ├── libs
 ├── npm
 ├── pages
 └── project.config.json

創建頁面、組件、插件

頁面

• 主包頁面：beautywe new page <path|name>
• 分包頁面：beautywe new page --subpkg <subPackageName> <path|name>

組件

beautywe new component <name>

插件

beautywe new plugin <name>

自定義模板

在 ./.templates 目錄中，存放著快速創建命令的創建模板：

$ tree .templates

.templates
├── component
│ ├── index.js
│ ├── index.json
│ ├── index.scss
│ └── index.wxml
├── page
│ ├── index.js
│ ├── index.json
│ ├── index.scss
│ └── index.wxml
└── plugin
 └── index.js

可以修改里面的模板，來滿足項目級別的自定義模板創建。

全局窗口

我們都知道微信小程序是「單窗口」的交互平臺，一個頁面對應一個窗口。

而在業務開發中，往往會有諸如這種述求：

• 自定義的 toast 樣式
• 頁面底部 copyright
• 全局的 loading 樣式
• 全局的懸浮控件

......

稍微不優雅的實現可以是分別做成獨立的組件，然后每一個頁面都引入進來。

這種做法，我們會有很多的重復代碼，并且每次新建頁面，都要引入一遍，后期維護也會很繁瑣。

而「全局窗口」的概念是：希望所有頁面之上有一塊地方，全局性的邏輯和交互，可以往里面擱。

global-view 組件

這是一個自定義組件，源碼在 /src/components/global-view

每個頁面的 wxml 只需要在頂層包一層：

<global-view id="global-view">
 ...
</global-view>

需要全局實現的交互、樣式、組件，只需要維護這個組件就足夠了。

全局配置文件

在 src/config/ 目錄中，可以存放各種全局的配置文件，并且支持以 Node.js 的方式運行。（得益于 Node.js Power 特性）。

如 src/config/logger.js:

const env = process.env.RUN_ENV || 'dev';

const logger = Object.assign({
 prefix: 'BeautyWe',
 level: 'debug',
}, {
 // 開發環境的配置
 dev: {
 level: 'debug',
 },
 // 測試環境的配置
 test: {
 level: 'info',
 },
 // 線上環境的配置
 prod: {
 level: 'warn',
 },
}[env] || {});

module.exports.logger = logger;

然后我們可以這樣讀取到 config 內容：

import { logger } from '/config/index';

// logger.level 會根據環境不同而不同。

Beautywe Framework 默認會把 config 集成到 getApp() 的示例中：

getApp().config;

多環境開發

BeautyWe Framework 支持多環境開發，其中預設了三套策略：

• dev
• test
• prod

我們可以通過命令來運行這三個構建策略：

beautywe run dev
beautywe run test
beautywe run prod

三套環境的差異

Beautywe Framework 源碼默認在兩方面使用了多環境：

• 構建任務（gulpfile.js/env/...）
• 全局配置（src/config/...）

構建任務的差異

Node.js Power

Beautywe Framework 的代碼有兩種運行環境：

• Node.js 運行環境，如構建任務等。
• 微信小程序運行環境，如打包到 dist 文件夾的代碼。

運行過程

Node.js Power 本質是一種靜態編譯的實現。
把某個文件在 Node.js 環境運行的結果，輸出到微信小程序運行環境中，以此來滿足特定的需求。

Node.js Power 會把項目中 src 目錄下類似 xxx.nodepower.js 命名的文件，以 Node.js 來運行，
然后把運行的結果，以「字面量對象」的形式寫到 dist 目錄下對應的同名文件 xxx.nodepower.js 文件去。

以 src/config/index.nodepower.js 為例：

const fs = require('fs');
const path = require('path');

const files = fs.readdirSync(path.join(__dirname));

const result = {};

files
 .filter(name => name !== 'index.js')
 .forEach((name) => {
 Object.assign(result, require(path.join(__dirname, `./${name}`)));
 });

module.exports = result;

該文件，經過 Node.js Power 構建之后:

dist/config/index.nodepower.js:

module.exports = {
 "appInfo": {
 "version": "0.0.1",
 "env": "test",
 "appid": "wx85fc0d03fb0b224d",
 "name": "beautywe-framework-test-app"
 },
 "logger": {
 "prefix": "BeautyWe",
 "level": "info"
 }
};

這就滿足了，隨意往 src/config/ 目錄中擴展配置文件，都能被自動打包。

Node.js Power 已經被集成到多環境開發的 dev, test, prod 中去。

當然，你可以手動運行這個構建任務：

$ gulp nodejs-power

NPM

BeautyWe Framework 實現支持 npm 的原理很簡單，總結一句話：

使用 webpack 打包 src/npm/index.js ，以 commonjs 格式輸出到 dist/npm/index.js


這樣做的好處：

• 實現簡單。
• 讓 npm 包能集中管理，每次引入依賴，都好好的想一下，避免泛濫（尤其在多人開發中）。
• 使用 ll dist/npm/index.js 命令能快速看到項目中的 npm 包使占了多少容量。

新增 npm 依賴

在 src/npm/index.js 文件中，進行 export：

export { default as beautywe } from '@beautywe/core';

然后在其他文件 import：

import { beautywe } from './npm/index';

更多

總的來說，BeautyWe 是一套微信小程序的開發范式。

core 和 plugins 擴展原生，提供復雜邏輯的封裝和插拔式使用。

而 framework 則負責提供一整套針對于微信小程序的企業級項目解決方案，開箱即用。

其中還有更多的內容，歡迎瀏覽官網：beautywejs.com

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。