感慨一下!!!

从开始开发 wenaox 从开始到现在,,时不时更新一下,改一改 bug,却发现已经快 1 年了 orz

虽然很少人用 hhh,但偶尔也会有人提一些问题,我就知道还有人用的~

感兴趣的朋友直接去 github 看文档吧(捂脸

点击我查看 wenaox 文档

不介意给个 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 导致的生命周期的重复

开源协议

MIT

Wenaox 一款轻量性能好的微信小程序状态管理库的更多相关文章

  1. 推荐一款轻量小众却高效免费开源windows热键脚本语言Autohotkey

    写在前面的话 Autohotkey是一款轻量小众但高效免费开源的windows热键脚本语言,游戏操纵.鼠标操作.键盘快捷重定义,快捷短语等等,只有你想不到,没有它做不到,神器中的神器呀,相见恨晚. 安 ...

  2. 五款轻量型bug管理工具横向测评

    五款轻量型bug管理工具横向测评 最近正在使用的本地bug管理软件又出问题了,已经记不清这是第几次了,每次出现问题都要耗费大量的时间精力去网上寻找解决方案,劳心劳力.为了避免再次出现这样的情况,我决定 ...

  3. Droplet——一款轻量的Golang应用层框架

    Github地址 如标题所描述的,Droplet 是一个 轻量 的 中间层框架,何为中间层呢? 通常来说,我们的程序(注意这里我们仅仅讨论程序的范围,而非作为一个系统,因此这里不设计如 LB.Gate ...

  4. 2016年31款轻量高效的开源JavaScript插件和库

    目前有很多网站设计师和开发者喜欢使用由JavaScript开发的插件和库,但同时面临一个苦恼的问题:它们中的大多数实在是太累赘而且常常降低网站的性能.其实,其中也有不少轻量级的插件和库,它们不仅轻巧有 ...

  5. Dzz任务板初版完成笔记-仿trello私有部署的一款轻量团队任务协作工具。

    刚完成了第一个版本Dzz任务板的设计开发,记录下设计思路和完成情况. Dzz任务板是DzzOffice中的团队协作套件中的一款应用,它需要安装在DzzOffice中使用. 主界面中需要能够快速简单的创 ...

  6. 2016年31款轻量高效的开源 JavaScript 插件和库

    目前有很多网站设计师和开发者喜欢使用由JavaScript开发的插件和库,但同时面临一个苦恼的问题:它们中的大多数实在是太累赘而且常常降低网站的性能.其实,其中也有不少轻量级的插件和库,它们不仅轻巧有 ...

  7. 2016 年 31 款轻量高效的开源 JavaScript 插件和库

    目前有很多网站设计师和开发者喜欢使用由JavaScript开发的插件和库,但同时面临一个苦恼的问题:它们中的大多数实在是太累赘而且常常降低网站的性能.其实,其中也有不少轻量级的插件和库,它们不仅轻巧有 ...

  8. 轻量易用的微信Sdk发布——Magicodes.Wx.Sdk

    概述 最简洁最易于使用的微信Sdk,包括公众号Sdk.小程序Sdk.企业微信Sdk等,以及Abp VNext集成. GitHub地址:https://github.com/xin-lai/Magico ...

  9. 阿里云轻量服务器价格及轻量与ECS服务器区别比较

    https://yq.aliyun.com/articles/221647 摘要: 阿里云轻量应用服务器价格表及介绍,关于轻量应用服务器和ECS服务器的性能对比 阿里云轻量应用服务器是阿里云新推出的服 ...

随机推荐

  1. Cannot capture jmeter traffic in fiddler

    Cannot capture jmeter traffic in fiddler First, change Fiddler's port back to 8888 as it was origina ...

  2. [转] cmake源码编译安装jsoncpp

    1.下载jsoncpp源码 wget https://github.com/open-source-parsers/jsoncpp/archive/master.zip 2.解压缩源码文件 unzip ...

  3. 2-4 【接口Interface Flex布局】让顶部导航滚动

    可以把复杂的类型做命名.例如接口中没有定义年龄,在定义person的时候 如果写了age那么就会报错.因为我们接口中并没有定义年龄. 可选属性,只读属性 新的布局方式 下面这里menu设置类型为Top ...

  4. 使用draw.io桌面版代替visio制作流程图

    前言 draw.io是一款在github上的开源产品,由于需要构建在线文档,需要插入画图类型, 对比多款开源产品,最终选择了draw.io. draw.io图标资源非常的丰富,方便导入图标资源,基本上 ...

  5. 关于LPC MUD的关键字及其它重要术语

    关于LPMUD的关键字及其它重要术语 前面的内容中对LPC语言和 lpmud 做了介绍,也完成了学习开发的准备工作,为了更好的学习,这里先对基本术语做一个说明. 关键字(Keywords):LPC语言 ...

  6. node端代理浏览器路由 解决浏览器跨域问题

    var _ = require('lodash'); var request = require("request"); /* @LM 2017-02-16 node端代理浏览器路 ...

  7. [LeetCode] 377. Combination Sum IV 组合之和 IV

    Given an integer array with all positive numbers and no duplicates, find the number of possible comb ...

  8. ue4读取灰度图生成三维地形mesh

    转自:https://www.cnblogs.com/gucheng/p/10116857.html 新建ue c++工程. 在Build.cs中添加"ProceduralMeshCompo ...

  9. 修改jar的.class文件,并重新打包

    使用javassist修改.class文件,并重新打包 Javassist是一款字节码编辑工具,可以直接编辑和生成Java生成的字节码,以达到对.class文件进行动态修改的效果.熟练使用这套工具,可 ...

  10. 日志收集系统ELK搭建

    一.ELK简介 在传统项目中,如果在生产环境中,有多台不同的服务器集群,如果生产环境需要通过日志定位项目的Bug的话,需要在每台节点上使用传统的命令方式查询,这样效率非常低下.因此我们需要集中化的管理 ...