问题来源

最近工作需要写小程序页面，其中有个页面情况为：父页面中包含了一个组件页面，组件页面中又包含了另外一个组件页面。需求为：点击最后一个组件页面中的一个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 中的 dataconfigurable: 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, 返回整个 globalDatathis.setData({showPictureDetail: value._showPictureDetail,pictureTime: value._pictureTime,pictureAddress: value._pictureAddress});},

这样，在父页面中使用 showPictureDetail..这几个变量就可以动态展示了。

PS：我这边的业务需求涉及到多个变量的监听，如果你只有一个变量的监听，那么只需要修改 app.js 中 watch 方法的 Object.defineProperty 内容由对象传递变为单个值传递即可。在更新值和获取值时传递就是一个值，而不是对象。

可以参考：https://blog.csdn.net/qq_40126542/article/details/88838834

转载于:https://www.cnblogs.com/dream-saddle/p/11180053.html

微信小程序全局变量改变监听相关推荐

微信小程序实现watch监听，无需页面引入！！！
目录 1监听函数实现 2.页面Page重写(实现无需引入) 3完整代码实现 4微信小程序代码片段大家都知道小程序其实和Vue的写法以及原理都存在很大的相同,但是里有watch监听可以监听data定义 ...
H5及微信小程序实测可用——监听手机返回键操作
目录 1.自定义导航(只能拦截左上角返回) 2.内嵌H5实现拦截物理键返回(均可监听) 微信小程序开发过程中我们经常遇到需要监听点击左上角返回.手机物理返回键或者左滑返回的需求微信原生是没有API支 ...
微信小程序实现watch监听数据变化
起因:众所周知,微信小程序的数据监听器observers只能在自定义组件中使用,如果想要在页面中实现类似的功能,就只有通过其他的方法.其一就是通过模拟vue的watch来监听数据变化. 实现如下: 1 ...
微信小程序使用watch监听数据变化
众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法 ...
微信小程序实现数据监听
Component({properties: {// 这里定义了innerText属性,属性值可以在组件使用时指定},data: {// 这里是一些组件内部数据//content: 'sdcedc', ...
微信小程序全局变量（globalData）和缓存（StorageSync）的区别和具体用法
微信小程序全局变量(globalData)和缓存(StorageSync)的区别和具体用法一.缓存(StorageSync)本地存储 1.小程序中的本地存储有同步功能,可用于保存用户信息(用户登录后 ...
微信小游戏的电量监听
在说小游戏的电量监听事件之前,我想先提一下小程序的电量监听事件. 在微信小程序中,是没有电量监听事件的,因为小程序没有全屏,手机端的电量和wifi等信息一直可以看得到,所以小程序里就没有这样的api了 ...
微信小程序会改变大世界吗？
微信小程序来了, 我们期待很久.关于"小程序"的信息还不是很多,但结合官方的表述已经可以看到一些端倪了.微信小程序会改变大世界吗?以下是徐磊的观点 "应用号"怎 ...
微信小程序全局变量异步函数_微信小程序制作简述
在官网下载微信小程序开发工具,有前端基础就能做,语法类似VUE 微信小程序简单来说就是前端页面,接受后端数据再展现出来即可,所以样式操作占小程序开发的半壁江山小程序单页面目录: CSS---> ...

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

问题来源

处理办法

微信小程序全局变量改变监听相关推荐

最新文章

热门文章