微信小程序全局变量改变监听的实现方法
问题来源
最近工作需要写小程序页面，其中有个页面情况为：父页面中包含了一个组件页面，组件页面中又包含了另外一个组件页面。
需求为：点击最后一个组件页面中的一个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){
varobj=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(){//获取全局变量值，直接返回全部
returnthis.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.nhooo.com/article/165365.htm