微信小程序页面之间的传值方式

在微信小程序的开发过程中，页面之间的传值是一个常见的操作。根据多年的实践，我就我所知道的小程序页面之间的传值方式，进行简单的总结。希望能够帮助大家。

一、URL参数传递

原理

这种方式类似于网页开发中的URL传参。在微信小程序中，我们可以通过在navigator组件的url属性中添加参数来实现页面间传值（这种方式类似于浏览器路由中的search进行传值）。例如，当我们从页面A跳转到页面B时，可以在navigator的url中添加类似?key=value的参数。
页面B可以通过onLoad生命周期函数获取这些参数。onLoad函数的参数options是一个对象，其中包含了从其他页面传递过来的参数。

示例代码

在页面A的wxml文件中，假设我们有一个navigator组件用于跳转到页面B：

javascript 复制代码

<navigator url="'/pages/pageB/pageB?name=John&age=20">跳转到页面B</navigator>

或者在页面A中的控制脚本中，我们点击一个按钮，调用方法navigateTo，来进行跳转到页面B：

javascript 复制代码

wx.navigateTo({
  url: '/pages/pageB/pageB?name=John&age=20'
});

在页面B的js文件中，在onLoad函数中获取参数：

javascript 复制代码

Page({
    onLoad: function(options) {
        console.log(options.name); // 输出: John
        console.log(options.age); // 输出: 20
    }
});

二、全局变量

原理

微信小程序提供了app.js文件，它是整个小程序的全局应用对象。我们可以在app.js中定义全局变量，然后在不同的页面中访问和修改这些变量。这种方式适用于在多个页面之间共享数据，并且数据的改变可能会影响多个页面的显示情况。

示例代码

在app.js文件中定义全局变量：

javascript 复制代码

App({
    globalData: {
        userInfo: null
    }
});

在页面A中设置全局变量的值：

javascript 复制代码

const app = getApp();
Page({
    onLoad: function() {
        app.globalData.userInfo = {name: 'Alice', age: 22};
    }
});

在页面B中获取全局变量的值：

javascript 复制代码

const app = getApp();
Page({
    onLoad: function() {
        console.log(app.globalData.userInfo);
    }
});

三、事件总线（Event Bus）

原理

事件总线是一种基于发布 - 订阅模式的传值方式。我们可以创建一个事件中心，在一个页面发布事件并传递数据，然后在其他订阅了该事件的页面接收数据。
这种方式比较灵活，适用于页面之间没有直接关联（如不是父子关系等）的情况。

示例代码

首先创建一个事件总线的工具文件（例如eventBus.js）：

javascript 复制代码

let eventBus = {
    eventList: {},
        on: function(eventName, callback) {
            if (!this.eventList[eventName]) {
                this.eventList[eventName] = [];
            }
            this.eventList[eventName].push(callback);
        },
        emit: function(eventName, data) {
            if (this.eventList[eventName]) {
                this.eventList[eventName].forEach(callback => {
                callback(data);
            });
        }
    }
};
module.exports = eventBus;

在页面A中发布事件并传递数据：

javascript 复制代码

const eventBus = require('../../utils/eventBus.js');
Page({
onLoad: function() {
    let data = {message: '这是从页面A传递的数据'};
        eventBus.emit('dataTransferEvent', data);
    }
});

在页面B中订阅事件并接收数据：

javascript 复制代码

const eventBus = require('../../utils/eventBus.js');
Page({
    onLoad: function() {
        eventBus.on('dataTransferEvent', function(data) {
            console.log(data.message);
        });
    }
});

四、使用本地存储（Storage）

原理

微信小程序提供了本地存储wx.setStorageSync和wx.getStorageSync等方法。我们可以在一个页面将数据存储到本地存储中，然后在另一个页面从本地存储中获取数据。这种方式相对来说比较适合数据持久化存储和跨会话（用户关闭小程序后重新打开）的数据传递。

示例代码

在页面A中存储数据：

javascript 复制代码

Page({
    onLoad: function() {
        let data = {key: 'value'};
        wx.setStorageSync('dataKey', data);
    }
});

在页面B中获取数据：

javascript 复制代码

Page({
    onLoad: function() {
        let retrievedData = wx.getStorageSync('dataKey');
        console.log(retrievedData);
    }
});

五、使用页面栈（只对当前页面栈中存在的页面生效）

A页面部分js代码

javascript 复制代码

 Page({
   data:{
     name:'斗帝蓝电霸王龙Pro',
     age:22
   },
   eatFood:function(food){
     console.log('eating '+ food)    
   }
 })

B页面部分js代码

javascript 复制代码

 Page({
   onLoad: function (options) {
     // 获取当前页面栈
     const pages = getCurrentPages();
     // 获取上一页面对象
     let prePage = pages[pages.length - 2];
     console.log(prePage.data.name) // 斗帝蓝电霸王龙Pro
     prePage.eatFood('斗帝蓝电霸王龙Pro') // eating 斗帝蓝电霸王龙Pro
   }
 })

以上就是微信小程序中常见的页面之间传值方式。在实际开发中，我们可以根据具体的业务场景和页面之间的关系来选择合适的传值方式，以达到高效、稳定的数据传递效果。