微信小程序全局变量改变监听的实现方法


Posted in Javascript onJuly 15, 2019

问题来源

最近工作需要写小程序页面,其中有个页面情况为:父页面中包含了一个组件页面,组件页面中又包含了另外一个组件页面。

需求为:点击最后一个组件页面中的一个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 内容由对象传递变为单个值传递即可。在更新值和获取值时传递就是一个值,而不是对象。

可以参考:https://3water.com/article/165365.htm

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
react中props 的使用及进行限制的方法
Apr 28 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 #Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 #Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 #Javascript
详解vuex的简单todolist例子
Jul 14 #Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 #Javascript
微信小程序解析富文本过程详解
Jul 13 #Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 #Javascript
You might like
DIY实用性框形天线
2021/03/02 无线电
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
php生成圆角图片的方法
2015/04/07 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
Python实现全局变量的两个解决方法
2014/07/03 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
煤矿班组长的职责
2013/12/25 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
构建和谐校园倡议书
2015/01/19 职场文书