问题来源
最近工作需要写小程序页面, 其中有个页面情况为: 父页面中包含了一个组件页面, 组件页面中又包含了另外一个组件页面. 需求为: 点击最后一个组件页面中的一个 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.cnblogs.com/dream-saddle/p/11180053.html