使用watch在微信小程序中实现全局状态共享


Posted in Javascript onJune 03, 2019

问题

在之前开发微信小程序的时候,获取用户信息、openid还有地理位置这些信息的时候,都是采用Promise的方式异步获取,但是这样的话在页面和App.js中都获取就可能造成请求重复的问题。

比如为了在每个页面都能获取到这些共享信息,都会选择在App.js中进行获取,然后在页面级进行获取,这两次获取的时间间隔较小时就可能导致前一个请求还未获取到数据,后一个请求就会再次进行获取,这样就产生了两次请求。

还有一个问题就是书写麻烦(虽然也能通过async await简化),比如

onLoad() {
 app.getUserInfo()
 .then(userInfo => {
 
 }).catch(err => { /* 错误处理 */ });
 
 // 如果同时需要userInfo和openid,可能就是如下形式:
 Promise.all([app.getUserInfo(), app.getOpenid()])
 .then(res => {
 
 }).catch(err => { /* 错误处理 */ });
}

正好周末的时候突然想到了vue的watch语法,利用一些相关的知识,就可以解决这个麻烦的问题了。

解决思路

双向绑定

vue的双向绑定原理,3.0将会采用Proxy监听数据变化,不过考虑到小程序这边的Proxy兼容性我不知道,所以采用了2.0的Object.defineProperty来监听数据的变化。

主要还是拦截设置的操作,在进行赋值时,将新旧值通知至监听者。

观察者模式

在页面级的onLoad监听app.globalData各个键名的事件,而在app.js的onLoad中则使用Object.defineProperty重新定义app.globalData,这样一旦app.globalData相应的键值发生了变化,就会通知监听的页面该值发生了变化。

模块化的引用

观察者模式导出的是一个对象(类实例),而不是一个类,所以在导入的时候这个对象是共享的,就可以通过这个对象将app.js和其他页面联系起来。

至于模块加载的实质,ES6模块加载的机制,与CommonJS模块完全不同。感兴趣的可以去看看这个。

封装Page

小程序的Page函数本身是不支持watch,但是我们可以自定义一个函数,进行参数合并就可以了。

在页面onLoad时先遍历watch属性,对app.globalData进行监听,可以参考vue的watch用法。

页面onUnload时就会进行销毁,此时也应该取消监听,这些我都封装过了,不用手动处理了。

有了这些思路,用不了多久,一个雏形就出来了,经过手动测试,感觉没什么问题,我就发布到npm了,大家感兴趣的可以安装体验一下。

安装

npm i wx-watch -S --production

使用

// app.js
var { watchData, } = require('/miniprogram_npm/wx-watch/index.js');

App({
 onLaunch() {
 this.watchData(); /* 监听this.globalData的变化,并触发事件,其他页面监听的值必须在globalData中预先定义,否则无法监听 */
 },
 watchData,
 globalData: {
 userInfo: null,
 }
});

// 其他需要监听globalData的页面.js
var { getPage } = require('../../miniprogram_npm/wx-watch/index.js');
const app = getApp();

/**
 * getPage(页面参数,app) app必传,因为封装的时候访问不到,就只能传参了
*/
getPage({
 watch: {
 userInfo(userInfo, oldUserInfo) {
 console.log(`来自app.glodalData的userInfo`);
 }
 },
 // 其他参数
}, app)

github:  github.com/ma125120/wx…

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
jQuery 动态酷效果实现总结
Dec 27 Javascript
基于JQuery的日期联动实现代码
Feb 24 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
深入理解JS异步编程-Promise
Jun 03 #Javascript
模块化react-router配置方法详解
Jun 03 #Javascript
react 组件传值的三种方法
Jun 03 #Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 #Javascript
Node.js 的 GC 机制详解
Jun 03 #Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 #Javascript
react-native滑动吸顶效果的实现过程
Jun 03 #Javascript
You might like
短波的认识
2021/03/01 无线电
队列在编程中的实际应用(php)
2010/09/04 PHP
php获取随机数组列表的方法
2014/11/13 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
PHP编写RESTful接口
2016/02/23 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
遍历jquery对象的代码分享
2011/11/02 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
vue中监听返回键问题
2019/08/28 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python编写微信公众号首图思路详解
2019/12/13 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
计算机毕业大学生求职信
2014/06/26 职场文书
捐助感谢信
2015/01/22 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android