wenaox下載 - wenaox原始碼下載

wenaox

Ai源碼

1.0.0

下載

Wenaox

一個輕量效能好的微信小程式的狀態管理函式庫（已有多個線上專案）

该库我已不再维护，但需要的话可以提pr或者各自fork单独修改

前言
特點
效能
開始
- 安裝
- 實例化store
- 在中大型小程式中的實踐
- 在app 中初始化
- 建立頁面
- 在自訂元件中使用
- 跨頁面同步數據
- 支持async await 以及laoding
- 支援中介軟體
- 支援小程式自訂的tabbar 的資料更新
例子
聯絡我
Change Log
開源協議

前言

工作中在開發小程式的時候，發現組件間通訊或跨頁通訊會把程式搞得混亂不堪，變得極難維護和擴展，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 } 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 中初始化

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

在頭部引入regeneratorRuntime 即可使用async/await

 import { regeneratorRuntime } from  'wenaox'

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 ( ) ;
} ;