当前位置：首页 > article >正文

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

article 2024/12/26 8:43:56

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

一、URL参数传递

原理

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

示例代码

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

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

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

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

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

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

二、全局变量

原理

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

示例代码

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

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

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

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

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

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

三、事件总线（Event Bus）

原理

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

示例代码

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

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中发布事件并传递数据：

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

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

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

四、使用本地存储（Storage）

原理

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

示例代码

在页面A中存储数据：

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

在页面B中获取数据：

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

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

A页面部分js代码

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

B页面部分js代码

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