GitHub: https://github.com/WozHuang/mp-extend

主要目标

微信小程序官方没有提供类似vuex、redux全局状态管理的解决方案,但是在一个完整的项目中各组件的数据一致性是必须要保证,因此需要开发一个能够实现小程序全局状态管理的解决方案。

设计思路

参考omix后,我觉得其中实现全局状态管理的方式与小程序本身的写法有点差异

  1. 小程序使用setData,omix直接使用封装的this.store修改
  2. 小程序官方的示例中以app.globalData作为全局属性,omix中使用自己定义的一个store对象

相对来说omix对代码有一点入侵,我更倾向于使用官方的代码实现,但是微信并没有提供全局setData的能力,只能自己实现一个了。

源码实现

globalData源码依赖于mp-extend提供的全局混入能力。

核心内容:

  1. 在App.onLaunch 时保存 app.globalData

  2. 在Page.onLoad 时使用 setData 将 app.globalData 保存到页面中,以便可以用 this.data.$globalData 的方式取到当前 app.globalData 的值(页面中以{{$globalData}} 的方式取值),避免手动 setData 的麻烦

  3. 对所有Page对象添加方法 $globalSetData,实现全局setData的能力,自动修改所有页面中的data.$globalData

注:根据小程序官方文档中的描述,不应当对非显示的页面进行setData,因此在代码实现中对非显示的页面并不直接进行setData操作,而是暂存在一个数组中,等到页面显示时在onShow阶段setData(在回到上一层页面时显示的数据可能会有延迟,因此这个setData的时机可以根据需求决定,对于简单的项目直接对所有页面setData即可)

最终结果

  1. 页面中 this.data.$globalData 可以取到 app.globalData 的值

  2. 页面中 this.$globalSetData 修改 app.globalData 的值并自动更新所有页面的 $globalData

参考资料
omi

小程序全局状态管理,在页面中获取globalData和使用globalSetData的更多相关文章

  1. 微信小程序全局状态管理 wxscv

    微信小程序中,数据状态不同页面中不能跨页面同步更新,也就是缺失类似vuex,mobx,redux全局的数据状态管理功能. 有些人移植了这些库,但是毕竟不是微信小程序生态的东西. Tencent也发布了 ...

  2. 微信小程序之状态管理A

    其实这个标题 不是很对 主要是最近小程序项目中 有这么一个状态 所有商品都共用一个商品详情页面  大概就是这样子  为了公司 保险起见,一些展示的内容已经处理 但是无伤大雅 就是这么两个按钮 左侧粉色 ...

  3. 微信小程序之状态管理B

    书接上文哈 咱们定义了个状态管理对象 逻辑应该是这样的 if (json.product.activity.type == "Coin1") { this.activity.coi ...

  4. 小程序:如何在wxml页面中调用JavaScript函数

    早上过来遇到一个这样的bug: 在计算百分比的时候没有保留小数点后2位,从而导致一些无法整除的结果显示太长 一开始,我以为这是一个很普通的bug,既然wxml在页面{{}}内支持简单的运算,我想也应该 ...

  5. 微信小程序-全局配置、组件、页面跳转、用户信息等

    全局配置 三个页面 app.json pages字段 "pages":[ "pages/index/index", # 首页 "pages/home/ ...

  6. uni-app 微信小程序全局分享

    实际使用中,经常需要小程序分享到好友或者朋友圈,一般而言是一个个页面去设置. 官网分享介绍:https://uniapp.dcloud.io/api/plugins/share?id=onsharea ...

  7. 微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由

    前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...

  8. 「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-08/ 小程序如何加载的呢?生命周期!源码:https://github.com/limingios ...

  9. 微信小程序把玩(五)页面生命周期

    原文:微信小程序把玩(五)页面生命周期 这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写. 以下是官网给出的生命周期函数方法和状态图 上面的生周期函数图对于做Android 或者IOS ...

随机推荐

  1. C++基础 (8) 第八天 数组指针 模板指针 C语言中的多态 模板函数

    1昨日回顾 2 多态的练习-圆的图形 3多态的练习-程序员薪资 4员工管理案例-抽象类和技术员工的实现 employee.h: employee.cpp: technician.h: technici ...

  2. 如何构建通用 api 中间层

    零.问题的由来 开门见山地说,这篇文章是一篇安利软文~,安利的对象就是最近搞的 tua-api. 顾名思义,这就是一款辅助获取接口数据的工具. 发请求相关的工具辣么多,那我为啥要用你呢? 理想状态下, ...

  3. 2015 Multi-University Training Contest 10 hdu 5406 CRB and Apple

    CRB and Apple Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  4. 使用动态代理实现dao接口

    使用动态代理实现dao接口的实现类 MyBatis允许只声明一个dao接口,而无需写dao实现类的方式实现数据库操作.前提是必须保证Mapper文件中的<mapper>标签的namespa ...

  5. Newton均差插值性质证明

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemh1cWl1aHVp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  6. 解决的方法:mysql_connect()不支持请检查mysql模块是否正确载入

    故障现象:linux 安装discuz 错误提示:mysql_connect() 不支持请检查mysql模块是否正确载入. 解决的方法:查看/usr/lib/php/modules/ (64位的看/u ...

  7. HDU 2732 Leapin&#39; Lizards(拆点+最大流)

    HDU 2732 Leapin' Lizards 题目链接 题意:有一些蜥蜴在一个迷宫里面,有一个跳跃力表示能跳到多远的柱子,然后每根柱子最多被跳一定次数,求这些蜥蜴还有多少是不管怎样都逃不出来的. ...

  8. Linux系统编程——多线程实现多任务

    概述 每一个进程都拥有自己的数据段.代码段和堆栈段.这就造成进程在进行创建.切换.撤销操作时,须要较大的系统开销. 为了降低系统开销,从进程中演化出了线程.为了让进程完毕一定的工作.进程必须至少包括一 ...

  9. Auto property synthesis will not synthesize property &#39;delegate&#39;; it will be implemented by its super

    今天在XCode6.3上面重写TabBar的时候,自己定义tabBar的代理遇到的一个问题 在重写tabBar的代理的时候遇到了一个警告. 解决方法: 在.m文件里 警告消失

  10. android帧动画,移动位置,缩放,改变透明度等动画解说

    1.苦逼的需求又来了,须要实现一些动画效果,第一个想到的是播放gif图片,可是这样会占包的资源,而且清晰度不高,于是想着程序实现,自己用帧动画+缩放+移动+透明度 实现了一些想要的效果,这里跟大家分享 ...