官網：beautywe.com
Repo: beautywe

一個簡單的介紹

BeautyWe.js 是什么？

它是一套專注于微信小程序的企業級開發范式，它的愿景是：

讓企業級的微信小程序項目中的代碼，更加簡單、漂亮。

為什么要這樣命名呢？

Write beautiful code for wechat mini program by the beautiful we!

「We」既是我們的 We，也是微信的 We，Both beautiful！

那么它有什么賣點呢？

專注于微信小程序環境，寫原汁原味的微信小程序代碼。
由于只專注于微信小程序，它的源碼也很簡單。
插件化的編程方式，讓復雜邏輯更容易封裝。
再加上一些配套設施：
1. 一些官方插件。
2. 一套開箱即用，包含了工程化、項目規范以及微信小程序環境獨特問題解決方案的框架。
3. 一個CLI工具，幫你快速創建應用，頁面，組件等。

它由以下幾部分組成：

一個插件化的核心 - BeautyWe Core
對 App、Page 進行抽象和包裝，保持傳統微信小程序開發姿勢，同時開放部分原生能力，讓其具有「可插件化」的能力。
一些官方插件 — BeautyWe Plugins
得益于 Core 的「可插件化」特性，封裝復雜邏輯，實現可插拔。官方對于常見的需求提供了一些插件：如增強存儲、發布/訂閱、狀態機、Logger、緩存策略等。
一套開箱即用的項目框架 - BeautyWe Framework
描述了一種項目的組織形式，開箱即用，集成了 BeautyWe Core ，并且提供了如：全局窗口、開發規范、多環境開發、全局配置、NPM 等解決方案。
一個CLI工具 - BeautyWe Cli
提供快速創建應用、頁面、插件，以及項目構建功能的命令行工具。并且還支持自定義的創建模板。

一個簡單的例子

下載

image

用 BeautyWe 包裝你的應用

image

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

image

開放原生App/Page，支持插件化

new BtApp({...}) 的執行結果是對原生的應用進行包裝，其中包含了「插件化」的處理，然后返回一個新的實例，這個實例適配原生的 App() 方法。

下面來講講「插件化」到底做了什么事情。

首先，插件化開放了原生 App 的四種能力：

Data 域
把插件的 Data 域合并到原生 App 的 Data 域中，這一塊很容易理解。
原生鉤子函數
使原生鉤子函數（如 onShow, onLoad）可插件化。讓原生App與多個插件可以同時監聽同一個鉤子函數。如何工作的，下面會細說。
事件鉤子函數
使事件鉤子函數（與 view 層交互的鉤子函數），盡管在實現上有一些差異，但是實現原理跟「原生鉤子函數」一樣的。
自定義方法
讓插件能夠給使用者提供 API。為了保證插件提供的 API 足夠的優雅，支持當調用插件 API 的時候（如 event 插件 this.event.on(...))，API 方法內部仍然能通過 this 獲取到原生實例。

鉤子函數的插件化

原生鉤子函數，事件鉤子函數我們統一稱為「鉤子函數」。

對于每一個鉤子函數，內部是維護一個以 Series Promise 方式執行的執行隊列。

以 onShow 為例，將會以這樣的形式執行：

native.onShow → pluginA.onShow → pluginB.onShow → ...

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

beautywe pluggable

工作原理是這樣的：

經過 new BtApp(...) 包裝，所有的鉤子函數，都會有一個獨立的執行隊列，
首先會把原生的各個鉤子函數 push 到對應的隊列中。然后每 use 插件的時候，都會分解插件的鉤子函數，往對應的隊列 push。
當 Native App（原生）觸發某個鉤子的時候，BtApp 會以 Promise Series 的形式按循序執行對應隊列里面的函數。
特殊的，onLaunch 和 onLoad 的執行隊列中，會在隊列頂部插入一個初始化的任務（initialize），它會以同步的方式按循序執行 Initialize Queue 里面的函數。這正是插件生命周期函數中的 plugin.initialize。

這種設計能提供以下功能：

可插件化。
只需要往對應鉤子函數的事件隊列中插入任務。
支持異步。
由于是以 Promise Series 方式運行的，其中一個任務返回一個 Promise，下一個任務會等待這個任務完成再開始。如果發生錯誤，會流轉到原生的 onError() 中。
解決了微信小程序 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

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

image

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

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

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

image

思路：

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

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

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

使用

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/...）

構建任務的差異

構建任務	說明	dev	test	prod
clean	清除dist文件	√	√	√
copy	復制資源文件	√	√	√
scripts	編譯JS文件	√	√	√
sass	編譯scss文件	√	√	√
npm	編譯npm文件	√	√	√
nodejs-power	編譯Node.js文件	√	√	√
watch	監聽文件修改	√
scripts-min	壓縮JS文件			√
sass-min	壓縮scss文件			√
npm-min	壓縮npm文件			√
image-min	壓縮圖片文件			√
clean-example	清除示例頁面			√

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-works

這樣做的好處：

實現簡單。
讓 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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

BeautyWe.js 一套專注于微信小程序的開發范式

BeautyWe.js 一套專注于微信小程序的開發范式

一個簡單的介紹

一個簡單的例子

開放原生App/Page，支持插件化

鉤子函數的插件化

一些官方插件

增強存儲 Storage

數據列表 List Page

緩存策略 Cache

特性

How it work

使用

日志 Logger

使用

BeautyWe Framework

快速創建

創建應用

創建頁面、組件、插件

自定義模板

全局窗口

global-view 組件

全局配置文件

多環境開發

三套環境的差異

構建任務的差異

Node.js Power

運行過程

NPM

新增 npm 依賴

更多

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

BeautyWe.js 一套專注于微信小程序的開發范式

一個簡單的介紹

一個簡單的例子

開放原生App/Page，支持插件化

鉤子函數的插件化

一些官方插件

增強存儲 Storage

數據列表 List Page

緩存策略 Cache

特性

How it work

使用

日志 Logger

使用

BeautyWe Framework

快速創建

創建應用

創建頁面、組件、插件

自定義模板

全局窗口

global-view 組件

全局配置文件

多環境開發

三套環境的差異

構建任務的差異

Node.js Power

運行過程

NPM

新增 npm 依賴

更多

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频