微信小程序全局变量改变监听的实现方法
问题来源
最近工作需要写小程序页面，其中有个页面情况为：父页面中包含了一个组件页面，组件页面中又包含了另外一个组件页面。
需求为：点击最后一个组件页面中的一个view，需要显示最外层父页面中的一个弹出层，并且动态的展示值，这个值的来源就是最后一个组件页面中的内容。
处理办法
当时想到的就是使用全局变量，在 app.js 中定义好全局变量，点击组件页面时就修改全局变量的值，父页面同样使用全局变量的值，这样一来就可以动态打开/关闭弹出层且传递值了。
下面先看看 app.js 中怎么定义的：
globalData: {
openid: '',
userInfo: null,
_showPictureDetail: false,
_pictureTime: '',
_pictureAddress: '',
//改变量用户存放全局变量修改过程中的值传递, 传递对象
data: {}
}
在其他页面就使用 getApp().globalData.参数名 = 值 的形式来改变参数值， 使用 getApp().globalData.参数名 的形式来获取值。
这样能正常赋值，但是由于都是在同一个界面展示，我需要更新值后，马上得到最新的值。上面简单的设置获取就不起作用了。
那么，就需要监听 globalData 中的属性了。
首先是 app.js：
//app 全局属性监听
watch: function (method) {
var obj = this.globalData;
Object.defineProperty(obj, "data", { //这里的 data 对应 上面 globalData 中的 data
configurable: true,
enumerable: true,
set: function (value) { //动态赋值，传递对象，为 globalData 中对应变量赋值
this._showPictureDetail = value.showPictureDetail;
this._pictureTime = value.pictureTime;
this._pictureAddress = value.pictureAddress;
method(value);
},
get: function () { //获取全局变量值，直接返回全部
return this.globalData;
}
})
},
接下来就是在组件页面事件中动态赋值：
//图片拍摄详情查看
viewPictureDetailInfo: function (e) {
// 修改 app 全局属性值， 由于 globalData.data 是个对象，因为涉及到修改多个参数，所以需要传递对象
app.globalData.data = {
'_showPictureDetail': true,
'_pictureTime': e.currentTarget.dataset.phototime,
'_pictureAddress': e.currentTarget.dataset.address
}
},
最后就是在最外层父页面添加 app.js 监听回调，动态修改变量值，以达到动态打开/关闭弹出层和展示内容了：
// 首先需要在父页面 onLoad() 方法中添加监听以及指定监听回调方法
// 设置 App 监听回调
// 如果其他页面修改了 app.js 中的 showPictureDetail 值, 就会触发回调
getApp().watch(self.watchBack)
//定义监听回调方法
//app 监听回调方法
watchBack: function (value) { //这里的value 就是 app.js 中 watch 方法中的 set, 返回整个 globalData
this.setData({
showPictureDetail: value._showPictureDetail,
pictureTime: value._pictureTime,
pictureAddress: value._pictureAddress
});
},
这样，在父页面中使用 showPictureDetail..这几个变量就可以动态展示了。
PS：我这边的业务需求涉及到多个变量的监听，如果你只有一个变量的监听，那么只需要修改 app.js 中 watch 方法的 Object.defineProperty 内容由对象传递变为单个值传递即可。在更新值和获取值时传递就是一个值，而不是对象。
可以参考：https://www.jb51.net/article/165365.htm
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
相关文章
今天学习的是window对象，还是有点用的。2010-01-01
这篇文章主要介绍了javascript在IE下trim函数无法使用的解决方法,分别叙述了javascript以及jQuery下的解决方案,对于WEB前端javascript设计人员进行浏览器兼容性调试有不错的借鉴价值,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了Javascript模仿淘宝信用评价功能实现方法,以完整实例形式分析了JavaScript响应鼠标事件动态改变页面元素的相关技巧,并附带了完整的实例代码供读者下载参考,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了jquery结合CSS使用validate实现漂亮的验证,需要的朋友可以参考下2015-01-01
这篇文章主要为大家介绍了弥补localStorage容量缺陷的方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要为大家详细介绍了JavaScript利用键盘码控制div移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
本文主要对JavaScript的自动垃圾收集机制进行简要分析，并介绍了垃圾收集的方式：标记清除（mark-and-sweep）和引用计数（reference counting），需要的朋友一起来看下吧2016-12-12
无论是在开发中还是面试时,在js中判断变量是否相等,都是一个比较常见的问题,这篇文章主要给大家介绍了关于Js判断两个数组是否相等的几种常见场景,需要的朋友可以参考下2024-07-07
学习bootstrapTable 一直没有找到 单选框的选定的和取值的教程,接下来通过本文给大家分享BootStrapTable 单选及取值的实现方法，非常不错，需要的朋友参考下2017-01-01
JS创建优美的页面滑动块效果 - Glider.js...2007-09-09
最新评论