微信小程序-全局数据共享/页面间通信

一.全局数据共享

声明全局的变量,在app.js文件里

复制代码
App({

  //全局共享的数据
  globalData:{
    token:''
  },

  //设置全局数据
  setToken(token){
    this.globalData.token=token
  }


})

使用 getApp() 获取全局App实例

复制代码
//返回全局唯一的APP实例
const appInstance=getApp()

Page({

  login(){
    console.log(appInstance)
    appInstance.setToken('11111')
  }

})

二.页面间通信

上级页面使用回调函数参数eventChannel的emit方法发送数据给下级页面

使用events对象处理下级页面返回的数据

复制代码
Page({
  //点击按钮触发事件处理函数
  handler(){
    wx.navigateTo({
      url: '/pages/list/list',
      events:{
        //key:被打开页面的发射的事件
        //value:回调函数
        currentEvent:(res)=>{
          console.log(res)
        }
      },
      success(res){
        //通过回调函数获取eventChannel并发射数据
        res.eventChannel.emit('myevent',{
          name:'tom'
        })
      }
    })
  }
})

下级页面使用eventChanel的on方法监听发送的数据,使用emit方法发送数据给上级页面

复制代码
Page({
  onLoad(){
    //获取eventChannel事件
    const eventChanel = this.getOpenerEventChannel()

    //监听发射的事件
    eventChanel.on('myevent',(res)=>{
      console.log(res)
    })

    //也可以发数据
    eventChanel.emit("currentEvent",{age:10})
  }

})
相关推荐
游戏开发爱好者811 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang11 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金13 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq14 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷14 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯14 小时前
小程序自定义组件学习笔记
微信小程序
阿眠16 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184119 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
xmdoor21 小时前
微信小程序:酒店预订管理系统
微信小程序·酒店预订·酒店系统·酒店管理
大锦终1 天前
【Linux】第一个小程序—进度条
linux·运维·服务器·小程序