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

　　

　　

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

　　

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

　　

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

　　 　　 　　onLoad () { 　　app.getUserInfo () 　　不要犹豫(用户信息=比;{ 　　 　　}）．抓住(呃=比;{/*错误处理*/});//如果同时需要用户信息和openid,可能就是如下形式: 　　Promise.all ([app.getUserInfo (), app.getOpenid ())) 　　不要犹豫(res=比;{ 　　 　　}）．抓住(呃=比;{/*错误处理*/}); 　　} 　　 　　

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

　　


　　

　　

<强>双向绑定
　　

　　

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

　　

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

　　

<强>观察者模式
　　

　　

在页面级的onLoad监听<代码> app.globalData 各个键名的事件,而在app.js的onLoad中则使用<代码> Object.defineProperty 重新定义<代码> app.globalData> app.globalData> 　　

　　

<强>模块化的引用
　　

　　

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

　　

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

　　

<强>封装页
　　

　　

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

　　

在页面onLoad时先遍历表属性,对<代码>应用程序。globalData 进行监听,可以参考vue的手表用法。
　　

　　

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

　　

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

　　


　　

　　 　　 　　npm我wx-watch - s -生产 　　 　　

使用
　　

　　 　　//app.js 　　var {watchData}=要求('/miniprogram_npm/wx-watch/index.js '); 　　 　　应用程序({ 　　onLaunch () { 　　this.watchData ();/*监听这个。globalData的变化,并触发事件,其他页面监听的值必须在globalData中预先定义,否则无法监听*/}, 　　watchData, 　　globalData: { 　　用户信息:空, 　　} 　　});//其他需要监听globalData的页面. js 　　var {getPage}=要求(“. ./. ./miniprogram_npm wx-watch/index.js '); 　　const应用=getApp ();/* * 　　* getPage(页面参数,应用)应用必传,因为封装的时候访问不到,就只能传参了 　　*/getPage ({ 　　看:{ 　　用户信息(用户信息,oldUserInfo) { 　　console.log('来自app.glodalData的用户信息”); 　　} 　　},//其他参数 　　},app) 　　 　　

github:,github.com/ma125120/wx…

　　

　　

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

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