在微信小程序中，全局变量的使用常常用于跨页面的数据共享，特别是在有层级关系的页面间通信。本篇文章将深入探讨如何实现微信小程序全局变量的改变监听，以便在值发生变化时实时更新页面状态。
我们需要在`app.js`中定义全局变量`globalData`。例如：
```javascript
App({
globalData: {
openid: '',
userInfo: null,
_showPictureDetail: false,
_pictureTime: '',
_pictureAddress: '', // 变量用于存放全局变量修改过程中的值传递
data: {}
},
// 全局属性监听
watch: function (method) {
var obj = this.globalData;
Object.defineProperty(obj, "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;
}
});
}
});
```
在这个例子中，我们创建了一个`data`对象，它会被监听以捕获任何变化。`set`方法用于设置新的值，同时调用`method`函数将新的值传递给监听者。`get`方法用于获取当前的全局数据。
当需要修改全局变量时，可以在组件页面中执行以下操作：
```javascript
// 图片拍摄详情查看
viewPictureDetailInfo: function (e) {
// 修改 app 全局属性值，由于 globalData.data 是个对象，因为涉及到修改多个参数，所以需要传递对象
app.globalData.data = {
'_showPictureDetail': true,
'_pictureTime': e.currentTarget.dataset.phototime,
'_pictureAddress': e.currentTarget.dataset.address
};
}
```
在最外层的父页面，我们需要监听这些全局变量的变化并作出响应。这可以通过在`onLoad`方法中注册监听回调来实现：
```javascript
// 父页面的 onLoad() 方法中添加监听及指定监听回调方法
onLoad: function () {
// 设置 App 监听回调
getApp().watch(this.watchBack);
},
// 定义监听回调方法
watchBack: function (value) {
// 这里的value 就是 app.js 中 watch 方法中的 set, 返回整个 globalData
this.setData({
showPictureDetail: value._showPictureDetail,
pictureTime: value._pictureTime,
pictureAddress: value._pictureAddress
});
}
```
`watchBack`方法会在全局变量改变时被调用，它接收`set`方法传来的最新值，并使用`setData`更新父页面的状态，从而动态展示内容。
如果只需要监听单个变量，可以简化`app.js`中的`watch`方法，只监听那个特定的变量。例如，如果只需要监听`_showPictureDetail`，可以修改为：
```javascript
Object.defineProperty(obj, "_showPictureDetail", {
configurable: true,
enumerable: true,
set: function (value) {
this._showPictureDetail = value;
method(value);
},
get: function () {
return this.globalData._showPictureDetail;
}
});
```
通过以上步骤，我们实现了微信小程序全局变量的改变监听。这种方式在处理跨页面数据同步和更新时非常有用，特别是在涉及多级嵌套组件的情况下。不过，要注意全局变量的使用可能会引发数据管理复杂性，因此在设计小程序时，应尽可能减少全局变量的依赖，合理利用`Page`间的通信机制如`wx.navigateTo`的`params`或`wx.setStorageSync`等。
