感慨一下！！！ 從開始開發 wenaox 從開始到現在，，時不時更新一下，改一改 bug，卻發現已經快 1 年了 orz 雖然很少人用 hhh，但偶爾也會有人提一些問題，我就知道還有人用的~ 感興趣的朋友直接去 github 看 "文檔" 吧（捂臉 "點擊我查看 wenaox 文檔" 不介意給個 s ...
感慨一下！！！
從開始開發 wenaox 從開始到現在，，時不時更新一下，改一改 bug，卻發現已經快 1 年了 orz
雖然很少人用 hhh，但偶爾也會有人提一些問題，我就知道還有人用的~
感興趣的朋友直接去 github 看文檔吧（捂臉
不介意給個 star，鼓勵下我(厚臉皮 ing)
以下內容來自 wenaox 文檔
Wenaox
一個輕量性能好的微信小程式的狀態管理庫（已有多個線上項目）
前言
工作中在開發小程式的時候，發現組件間通訊或跨頁通訊會把程式搞得混亂不堪，變得極難維護和擴展，setData 的性能不是很好，浪費很多的資源，所以封裝了一個 wenaox 作為使用，後決定開源出來給大家使用
如果覺得有什麼問題或者建議，歡迎提 issue 和 pr，覺得不錯，可以給個 star，鼓勵一下 2333
特點
- 支持中間件
- 中大型項目可多個 contro 區分模塊
- asyncs 自帶 loading
- 輕量、性能好
性能
- 每次更新數據確保後臺態頁面停止刷新數據而在重新進入前臺的時候開始
- 採取 diff 新舊數據，保證一次只更新最少量的數據
開始
安裝
雖然可以直接引入，但是建議使用 npm 安裝開發，將會很方便
npm i -S wenaox
or
yarn add wenaox關於小程式如何構建 npm
實例化 store
新建一個 store.js
import { Store, regeneratorRuntime } from 'wenaox';
//數據
const state = {
count: 0,
};
//方法
const methods = {
//修改state的方法(只允許通過syncs的方法進行修改)
syncs: {
addCount(state, payload) {
state.count = state.count + 1;
},
},
//包含副作用的方法
asyncs: {
asyncAddCount(payload, rootState) {
setTimeout(() => {
this.addCount(c);
});
},
},
};
//註冊store
const store = new Store({ state, methods });store 中的 state 和 methods 列印如下:
{
"state": { "count": 0 },
"methods": { "addCount": fn, "asyncAddCount": fn }
//略
}在中大型小程式中的實踐
在中大型小程式中的實踐中，共用的狀態和方法將會很多，如果全部都定義在一起會很混亂，所以提供一個多 contro 的機制，可以根據頁面或者功能來進行劃分
// 下麵是多 contro 的註冊寫法
const store = new Store({ controA: { state, methods } });
將會 Store 對 store 的 state 和 methods 通過 contro 的變數名進行一個細化區分:
{
"state": { "controA": { "count": 0 } },
"methods": { "controA": { "addCount": fn, "asyncAddCount": fn } }
//略
}在 app.js 中初始化
//app.js
import { Provider } from 'wenaox';
import store from 'xxx路徑/store';
const appConfig = {
//some config
};
App(Provider(store)(appConfig));創建頁面
-在 page.js 中連接 state 和 methods
import { orm } from 'wenaox';
// 返回需要的state和methods
const mapState = state => ({
count: state.count,
});
const mapMethods = methods => ({
addCount: methods.addCount,
asyncAddCount: methods.asyncAddCount,
});
const pageConfig = {
//some config
};
// 使用orm連接
Page(orm(mapState, mapMethods)(pageConfig));
- 在 page.wxml 中使用
<view class="count">count</view>
<button bindtap="addCount">count + 1</button>
<button bindtap="asyncAddCount">async count + 1</button>點擊按鈕就會發生變化！一個簡單的計數器！
在自定義組件中使用
由於小程式中的屬性沒有分辨組件還是 page 頁面所以我另外寫了一個對 自定義組件 的方法就是 ormComp
所以在自定義組件中使用的話僅僅只需要 js 中的 orm 替換成 ormComp 就可以了
Component(ormComp(mapState, mapMethods)(compConfig));跨頁面同步數據
使用 wenaox 你不用關心跨頁數據同步，任何地方的修改，都會同步到使用到的地方［僅限於正在顯示的頁面/組建］
這是因為 wenaox 在頁面棧中 hide 的頁面不執行更新，而是等待 onshow 事件才重新進行更新，這是為了更好的性能！
支持 async/await 以及 laoding
const methods = {
// ...略
asyncs: {
async asyncAddCount(payload, rootState) {
await new Promise(resolve => {
setTimeout(resolve, 2000);
});
this.addCount(1);
},
},
};而在使用 async/await 之後自動會生成一個 loading 變數
{
"loading": state.loading.asyncAddCount
}可以在 mapState 中引入,再也不用手動寫 loading 了!!
當然你不用的話,你不引入 對應的 loading 變數的話,wenaox 也不會再對 對應的 loading 進行更新,避免性能損失
支持中間件
wenaox 為了方便,提供了中間件的一個開發和使用,下麵是一個 wenaox 的一個 log 的中間件
保證流動完所有的中間件才進行更新數據
const log = store => next => (fn, payload) => {
console.group('改變前：', store.state);
next(fn, payload);
console.log('改變後：', store.state);
console.groupEnd();
};支持小程式自定義的 tabbar 的數據更新
小程式是可以自定義 tabbar 的,通過 wenaox 可以隨時更改底部的 tab 的數量以及跳轉的方法
所有的具體在下麵的例子中也有展示
例子
聯繫我
Change Log
- v1.1.0
- [重構] data 直接綁定，增快速度
- [不相容] page 頁中初始化 mapState 將不再提供 options 參數
- v1.0.0
- [相容] 自定義 tabbar 的 custom-tab-bar 組件的數據綁定
- [修複] 由於 newState 導致的生命周期的重覆
