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

问题来源

最近工做须要写小程序页面，其中有个页面状况为：父页面中包含了一个组件页面，组件页面中又包含了另一个组件页面。需求为：点击最后一个组件页面中的一个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 内容由对象传递变为单个值传递便可。在更新值和获取值时传递就是一个值，而不是对象。

能够参考：http://www.javashuo.com/article/p-cwzipyno-bb.html

原文出处：https://www.cnblogs.com/dream-saddle/p/11180053.html