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


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中Array 对象相关的几个方法
Dec 22 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
js实现带积分弹球小游戏
Jul 21 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
解决laravel session失效的问题
2019/10/14 PHP
JS基础之undefined与null的区别分析
2011/08/08 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
python运行时间的几种方法
2016/06/17 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
美国电视购物:QVC
2017/02/06 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
市场营销管理毕业生自荐信
2014/03/03 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
小学教师工作总结2015
2015/04/07 职场文书
简短清晨问候语
2015/11/10 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
开网店计划分析
2019/07/30 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS