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

data

全局变量

160 浏览量更新于2023-05-05 评论收藏 45KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

问题来源问题来源

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

需求为：需求为：点击最后一个组件页面中的一个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)

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38713586

粉丝: 3
资源: 933

会员权益专享

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

评论0

会员权益专享

最新资源

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

评论0

微信小程序在其他页面监听globalData中值的变化

微信小程序如何实现全局重新加载

详解小程序如何避免多次点击，重复触发事件

微信小程序数据传递与全局状态管理对半圆进度条的影响

使用微信开发者工具进行微信小程序开发

微信小程序框架与组件介绍

微信小程序开发入门指南

微信小程序页面结构及布局

微信小程序全局点击事件监听

微信小程序 app,.js

怎么创建微信小程序的store

微信小程序传参的所有方法

微信小程序控制台的数据怎么传到前端

微信小程序 如何全局监控网络状态，并给出提示

微信小程序如何实现页面之间的数据共享

微信小程序如何记录当前页面的浏览位置 代码

设计一个微信小程序有多个页面

微信小程序有哪些传值(传递数据)方法

微信小程序怎么使用路由守卫

微信小程序js方法互相调用传值

会员权益专享

最新资源

微信小程序如何全局监控网络状态，并给出提示

微信小程序如何记录当前页面的浏览位置代码