微信小程序常用的传值

时间：2024-07-05 07:05:38

1.通过 URL 传参

在页面跳转时，可以在 URL 中携带参数进行传递，然后在目标页面的 onLoad 生命周期中获取参数。

// 在页面 A 中跳转到页面 B 并传递参数
wx.navigateTo({
  url: '/pages/detail/index?id=123'
});

// 在页面 B 的 onLoad 生命周期中获取参数
onLoad: function (options) {
  console.log(options.id); // 输出 123
}

2.通过 navigateTo 方法传递数据:

通过 navigateTo 方法传递数据的方式比较常见，可以通过 wx.setStorageSync 方法在当前页面设置数据，然后在目标页面的 onLoad 生命周期中使用 wx.getStorageSync 方法获取数据。以下是一个示例代码来演示这种传递数据的方式：

在页面 A 中设置数据并跳转到页面 B：

// 在页面 A 中设置数据
wx.setStorageSync('key', 'value');

// 使用 navigateTo 方法跳转到页面 B
wx.navigateTo({
  url: '/pages/pageB/pageB'
});

在页面 B 的 onLoad 生命周期中获取数据：

Page({
  onLoad: function(options) {
    // 在页面 B 的 onLoad 生命周期中获取数据
    var data = wx.getStorageSync('key');
    console.log(data); // 输出 'value'
  }
});

3.通过全局变量传值：

可以在 app.js 文件中定义全局变量，然后在任何页面中都可以访问和修改这些全局变量。

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

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

在任意页面中访问和修改全局变量： 

// 在任意页面中访问和修改全局变量
// 设置全局变量
getApp().globalData.userInfo = { name: 'Alice', age: 30 };
// 获取全局变量
console.log(getApp().globalData.userInfo); // 输出 { name: 'Alice', age: 30 }

4.通过事件总线传值：

可以使用事件总线进行页面间通信，创建一个事件总线实例，然后在需要传递数据的页面发送事件，在需要接收数据的页面监听事件。

1.创建一个事件总线实例：

// eventBus.js
const EventBus = {
  events: {},
  on: function(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  },
  emit: function(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => {
        callback(data);
      });
    }
  }
};

module.exports = EventBus;

2.在发送数据的页面发送事件

// pageA.js
const eventBus = require('../../utils/eventBus');

// 发送事件
eventBus.emit('dataUpdated', { name: 'Bob', age: 25 });

3.在接收数据的页面监听事件：

// pageB.js
const eventBus = require('../../utils/eventBus');

Page({
  onLoad: function() {
    // 监听事件
    eventBus.on('dataUpdated', (data) => {
      console.log(data); // 输出 { name: 'Bob', age: 25 }
    });
  }
});

这些都是微信小程序中常用的页面间传值方式

相关文章