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


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 相关文章推荐
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
简单的三步vuex入门
May 20 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
mysql 全文搜索 技巧
2007/04/27 PHP
php 静态化实现代码
2009/03/20 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
PHP模板解析类实例
2015/07/09 PHP
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
python3.5仿微软计算器程序
2020/03/30 Python
Python创建xml文件示例
2017/03/22 Python
django中的setting最佳配置小结
2017/11/21 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
python实现Zabbix-API监控
2018/09/17 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
python绘制高斯曲线
2021/02/19 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
门卫岗位职责
2013/11/15 职场文书
银行存款证明样本
2014/01/17 职场文书
新员工入职感言
2014/02/01 职场文书
国窖1573广告词
2014/03/21 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
关于环保的宣传稿
2015/07/23 职场文书
2019公司管理制度
2019/04/19 职场文书
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL