使用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 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 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
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
php 保留字列表
2012/10/04 PHP
php微信公众平台开发类实例
2015/04/01 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
Python中Collection的使用小技巧
2014/08/18 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
英文版销售经理个人求职信
2013/11/20 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书