微信小程序全局变量改变监听的实现方法
2 浏览量
2020-12-01
07:50:58
上传
评论
收藏 45KB PDF 举报
微信小程序全局变量改变监听的实现方法微信小程序全局变量改变监听的实现方法
问题来源问题来源
最近工作需要写小程序页面，其中有个页面情况为：父页面中包含了一个组件页面，组件页面中又包含了另外一个组件页面。
需求为：需求为：点击最后一个组件页面中的一个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)
资源评论
weixin_38713586
- 粉丝: 3
- 资源: 933
最新资源
- libADLMIDI1-1.5.1-bp155.1.7.aarch64.rpm
- 基于python和resnet50的垃圾分类识别项目源码+全部数据.zip
- C语言进阶学习资料，关于预处理，文件处理，结构体，位移运算的学习 大学生期末复习资料，程序设计课程复习资料
- c++少儿编程专业教师使用资料
- box1234567890
- 少儿编程资料，c++少儿编程专业资料
- libADLMIDI1-1.5.1-bp156.2.6.aarch64.rpm
- java源码 仿360buy京东商城源码 京东JavaWeb项目源代码.rar
- libADLMIDI1-1.5.1-1.2.riscv64.rpm
- 基于ASP的BS架构工艺品展示系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
