微信小程序,响应式监听全局函数

本文详细介绍了如何在项目中创建和使用自定义事件系统。通过在utils目录下新建event.js文件,实现了一个简单的Event类,支持事件的监听、触发和移除。在app.js等文件中导入并实例化Event类,即可实现跨组件或页面间的数据通信。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在utils下新建一个文件event.js,把下面的代码复制到该文件下

class Event {
on(event, fn, ctx) {
if (typeof fn != “function”) {
console.error(‘fn must be a function’)
return
}
this._stores = this._stores || {};
(this._stores[event] = this._stores[event] || []).push({ cb: fn, ctx: ctx })
}
emit(event) {
this._stores = this._stores || {}
var store = this._stores[event], args
if (store) {
store = store.slice(0)
args = [].slice.call(arguments, 1)
for (var i = 0, len = store.length; i < len; i++) {
store[i].cb.apply(store[i].ctx, args)
}
}
}
off(event, fn, ctx) {
this._stores = this._stores || {}
// all
if (!arguments.length) {
this._stores = {}
return
}
// specific event
var store = this._stores[event]
if (!store) return
// remove all handlers
if (arguments.length === 1) {
delete this._stores[event]
return
}
// remove specific handler
var cb
for (var i = 0, len = store.length; i < len; i++) {
cb = store[i].cb
if (store[i].ctx === ctx) {
store.splice(i, 1)
break
}
}
return
}
}
module.exports = {
Event
}

二,导入
在你需要的文件里导入(例如:在app.js文件导入)
import {Event} from ‘/utils/events.js’

三,实例化和发射事件
onShow: function() {
//实例化
wx.event = new Event()

//发射事件给消息页面监听
wx.event.emit('change', {})  //change是自定义的事件,{}是发射的参数

},
wx.event.emit(‘change’, {}) //change是自定义的事件,{}是发射的参数

四, 使用

onShow: function () {
//监听app.js发射的change事件,页面卸载的时候要停止监听event.off
wx.event.on(‘change’, function () {
that.setData({
messageNum: App.globalData.messageNum
})
})
},
五, 销毁监听
最好在页面销毁的时候停止监听,这样子可以节约性能,要不然就一直监听
// 生命周期函数–监听页面卸载
onUnload: function () {
//你监听的页面
wx.event.off(‘change’)
},

<think>好的,我现在需要回答用户关于微信小程序中如何读取全局变量的问题。首先,我得回忆一下微信小程序的框架结构,特别是全局变量的相关知识。 用户可能已经知道全局变量是在整个小程序中都可以访问的数据,但具体如何设置和读取可能不太清楚。我需要分步骤解释,先从定义全局变量开始,然后是读取的方法,可能还要提到注意事项,比如生命周期和响应式的问题。 首先,设置全局变量通常是在app.js文件中使用App()函数里的globalData属性。比如在onLaunch里定义,或者在需要的时候赋值。这部分需要示例代码,但要注意用户可能对代码结构不太熟悉,所以得用简单的例子说明。 接下来,读取全局变量有两种情况:在App Service层(如其他页面或app.js本身)和在页面层。对于页面层,用户需要先获取小程序实例,然后访问globalData。比如const app = getApp(); app.globalData.userInfo。这里要注意getApp()的使用限制,比如不能在App()函数内部使用,以及页面渲染完成后才能调用。 然后,在App Service层,比如其他JS模块,可能需要直接引用app.js导出的实例,但通常还是通过getApp()来获取,这样更统一。需要提醒用户关于模块化的引用方式。 另外,全局变量不是响应式的这一点很重要。如果数据变化了,页面不会自动更新,需要手动触发setData或者使用其他状态管理方法。这可能是一个常见的误区,需要特别强调。 用户可能会有疑问,如何更新全局变量并同步到页面。这时候可能需要举例说明,比如在页面中修改globalData后,如何手动更新页面数据,或者使用事件监听等高级方法。 还要注意全局变量的生命周期,它会在小程序关闭后销毁,所以持久化存储需要用缓存API,比如wx.setStorageSync。这里可以简要提到,但可能超出当前问题范围,不过作为补充信息有帮助。 最后,是否需要给出一个完整的示例步骤?比如步骤一设置全局变量,步骤二在页面中获取,步骤三修改和更新。这样结构更清晰,用户更容易跟随。 总结回答的结构应该是: 1. 定义全局变量:在app.js的globalData中。 2. 读取方法:在页面中使用getApp()获取实例,访问globalData。 3. 注意事项:非响应式,生命周期,持久化存储。 需要检查是否有遗漏的细节,比如globalData是否可以动态添加属性,或者是否需要考虑多个页面同时修改时的同步问题。不过对于基础问题,可能不需要深入到这里,保持回答简洁明了即可。 现在组织语言,确保步骤清晰,示例正确,语法无误,并且用中文口语化表达,避免技术术语过多,必要时解释术语。比如解释App Service和Page的关系,或者getApp()的作用。 可能还需要提到在页面JS文件中,应该在onLoad或onShow生命周期函数中获取全局变量,以确保app实例已经初始化。比如,在页面加载时获取用户信息。 最后,检查是否需要提示用户关于globalData的安全使用,比如避免滥用全局变量,合理规划数据结构,或者建议使用缓存和本地存储作为补充。但根据问题,可能不需要扩展太多,专注于读取方法即可。</think>在微信小程序中,全局变量的使用分为**定义**和**读取**两个核心步骤。以下是具体操作指南: --- ### 一、如何定义全局变量 全局变量需在 `app.js` 文件中通过 `App()` 函数的 `globalData` 属性定义: ```javascript // app.js App({ globalData: { userInfo: null, // 用户信息 themeColor: '#FF0000' // 主题颜色 }, onLaunch() { // 小程序初始化时执行 } }) ``` --- ### 二、如何读取全局变量 在不同场景中读取全局变量的方法略有不同: #### 1. **在页面逻辑层(Page)中读取** 通过 `getApp()` 方法获取小程序实例,再访问 `globalData`: ```javascript // pages/index/index.js Page({ onLoad() { const app = getApp(); // 获取全局实例 console.log(app.globalData.userInfo); // 读取用户信息 console.log(app.globalData.themeColor); // 读取主题颜色 } }) ``` #### 2. **在 App Service 层(如其他JS模块)读取** 直接引用 `app.js` 导出的实例: ```javascript // utils/util.js const app = getApp(); // 同样通过 getApp() 获取实例 console.log(app.globalData.themeColor); ``` --- ### 三、关键注意事项 1. **非响应式问题** `globalData` 的修改**不会自动触发页面更新**。若需同步数据到页面,需手动调用 `setData` 或结合事件机制(如 `EventChannel`)。 ```javascript // 修改全局变量后手动更新页面 const app = getApp(); app.globalData.themeColor = '#00FF00'; this.setData({ themeColor: app.globalData.themeColor }); ``` 2. **生命周期限制** 全局变量在小程序关闭后会被销毁。若需持久化存储,应使用 `wx.setStorageSync` 等缓存 API。 3. **避免滥用全局变量** 建议仅将**跨页面共享数据**存入 `globalData`,其他数据尽量放在页面或组件的局部作用域中。 --- ### 四、完整操作示例 1. **定义全局变量** 在 `app.js` 中初始化数据: ```javascript // app.js App({ globalData: { token: 'abc123', systemInfo: null }, onLaunch() { this.globalData.systemInfo = wx.getSystemInfoSync(); } }) ``` 2. **在页面中读取和修改** ```javascript // pages/profile/profile.js Page({ onShow() { const app = getApp(); const token = app.globalData.token; const systemInfo = app.globalData.systemInfo; console.log('设备信息:', systemInfo); // 修改全局变量 app.globalData.token = 'new_token_456'; } }) ``` --- ### 五、扩展建议 - **状态管理**:若项目复杂,可引入 `mobx-miniprogram` 或 `westore` 等状态管理库实现响应式更新。 - **数据安全**:敏感数据(如用户凭证)建议结合 `wx.setStorageSync` 加密存储。 通过合理使用全局变量,能有效管理跨页面数据共享问题。若有进一步疑问,可提供具体场景继续探讨!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值