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


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技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 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
php array_merge下进行数组合并的代码
2008/07/22 PHP
PHP生成带有雪花背景的验证码
2008/09/28 PHP
解析strtr函数的效率问题
2013/06/26 PHP
php实现Session存储到Redis
2015/11/11 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
Node.js的特点详解
2017/02/03 Javascript
js的对象与函数详解
2019/01/21 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
实例说明Python中比较运算符的使用
2015/05/13 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
大学生的应聘自我评价
2013/12/13 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
基层党员对照检查材料
2014/08/25 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
付款证明格式范文
2015/06/19 职场文书
话题作文之呼唤
2019/12/18 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
JUnit5常用注解的使用
2021/07/02 Java/Android