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

 更新时间:2019年07月15日 09:52:46   作者:Dream_saddle  
这篇文章主要给大家介绍了关于微信小程序全局变量改变监听的实现方法,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

问题来源

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

需求为:点击最后一个组件页面中的一个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://www.jb51.net/article/165365.htm

总结

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

您可能感兴趣的文章:

相关文章

  • js实现的简洁网页滑动tab菜单效果代码

    js实现的简洁网页滑动tab菜单效果代码

    这篇文章主要介绍了js实现的简洁网页滑动tab菜单效果代码,可实现简单的鼠标滑过tab标签切换的功能,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • js实现多图左右切换功能

    js实现多图左右切换功能

    这篇文章主要介绍了js实现多图左右切换功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • javascript 初学教程及五子棋小程序的简单实现

    javascript 初学教程及五子棋小程序的简单实现

    下面小编就为大家带来一篇javascript 初学教程及五子棋小程序的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Bootstrap滚动监听(Scrollspy)插件详解

    Bootstrap滚动监听(Scrollspy)插件详解

    滚动监听插件是用来根据滚动条所处在的位置自动更新导航项目, 显示导航项目高亮显示。这篇文章主要介绍了Bootstrap滚动监听(Scrollspy)插件的相关资料,需要的朋友可以参考下
    2016-04-04
  • JS相册图片抖动放大展示效果的示例代码

    JS相册图片抖动放大展示效果的示例代码

    这篇文章主要介绍了JS相册图片抖动放大展示效果的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • 5种JavaScript脚本加载的方式

    5种JavaScript脚本加载的方式

    这篇文章主要为大家详细介绍了5种JavaScript脚本加载的方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • layer ui插件显示tips时,修改字体颜色的实现方法

    layer ui插件显示tips时,修改字体颜色的实现方法

    今天小编就为大家分享一篇layer ui插件显示tips时,修改字体颜色的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 详解Typescript 内置的模块导入兼容方式

    详解Typescript 内置的模块导入兼容方式

    这篇文章主要介绍了详解Typescript 内置的模块导入兼容方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 浅谈js中的this问题

    浅谈js中的this问题

    下面小编就为大家带来一篇浅谈js中的this问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JavaScript获取伪元素(Pseudo-Element)属性的方法技巧

    JavaScript获取伪元素(Pseudo-Element)属性的方法技巧

    这篇文章主要介绍了JavaScript获取伪元素(Pseudo-Element)属性的方法技巧,本文直接给出实现代码,需要的朋友可以参考下
    2015-03-03

最新评论