微信小程序全局变量改变监听

发布时间：2020-12-14 19:15:03 所属栏目：资源来源：网络整理

导读：问题来源最近工作需要写小程序页面，其中有个页面情况为：父页面中包含了一个组件页面，组件页面中又包含了另外一个组件页面。需求为：点击最后一个组件页面中的一个view，需要显示最外层父页面中的一个弹出层，并且动态的展示值，这个值的来源就是最后

问题来源

最近工作需要写小程序页面，其中有个页面情况为：父页面中包含了一个组件页面，组件页面中又包含了另外一个组件页面。需求为：点击最后一个组件页面中的一个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: function (value) { //动态赋值，传递对象，为 globalData 中对应变量赋值 this._showPictureDetail = value.showPictureDetail; this._pictureTime = value.pictureTime; this._pictureAddress = value.pictureAddress; method(value); },get: function () { //获取全局变量值，直接返回全部 return this.globalData; } }) },

接下来就是在组件页面事件中动态赋值：

: e.currentTarget.dataset.phototime,'_pictureAddress': e.currentTarget.dataset.address } },sans-serif;">最后就是在最外层父页面添加 app.js 监听回调，动态修改变量值，以达到动态打开/关闭弹出层和展示内容了：