学习微信小程序的跨页面通信和数据传递

一、前言

随着移动互联网的迅猛发展，微信小程序越来越受到大家的关注，为了便于用户使用和开发者开发，微信小程序不仅提供了各种组件和API，还提供了跨页面的通信和数据传递功能，本篇文章主要介绍微信小程序中跨页面通信和数据传递的几种方式。

二、跨页面通信和数据传递方式

1.使用全局变量

使用全局变量是最简单的一种方式，它只需要在app.js文件中定义一个全局变量，然后在需要传递数据的页面中通过 getApp() 方法获取到全局变量，在其他页面中进行使用即可。具体代码实现如下：

定义全局变量：

// app.js
App({
  globalData: {
    userInfo: null
  }
})

 

设置数据：

// A页面
const app = getApp()

Page({
  data: {
    userInfo: {}
  },
  onLoad: function() {
    app.globalData.userInfo = {
      avatarUrl: 'https://github.com/xxx.jpg',
      nickName: '小明'
    }
  }
})

 

获取数据：

// B页面
const app = getApp()

Page({
  data: {
    userInfo: {}
  },
  onLoad: function() {
    this.setData({
      userInfo: app.globalData.userInfo
    })
  }
})

 

需要注意的是，全局变量在小程序中只有一个实例