微信小程序所有传值方式

一、通过 URL 参数传值

这是最基础也是最常用的一种方法，适用于页面跳转时传递简单参数

1.1 跳转页面并传递参数

wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=John'
});

1.2 接收参数

在目标页面的 onLoad 方法中接收参数：

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

二、使用全局变量

利用小程序的 App 对象来存储和共享数据。

2.1 设置全局变量

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

App({
  globalData: {
    userInfo: null,
    someData: 'someValue'
  }
});

2.2 访问全局变量

在任意页面中，可以通过 getApp 方法获取全局变量：

const app = getApp();
console.log(app.globalData.someData); // 输出 someValue

三、使用本地存储

通过 wx.setStorage 和 wx.getStorage 将数据存储在本地，适合于需要在多个页面间共享的数据。

3.1 存储数据

通过 wx.setStorage 和 wx.getStorage 将数据存储在本地，适合于需要在多个页面间共享的数据

wx.setStorage({
  key: 'keyName',
  data: 'dataValue'
});

3.2 获取数据

wx.getStorage({
  key: 'keyName',
  success: function(res) {
    console.log(res.data); // 输出 dataValue
  }
});

四、事件触发传参

利用 wx.navigateTo 和 wx.redirectTo 的 events 参数和 eventChannel 方法传递复杂数据。

4.1 跳转页面并携带数据

wx.navigateTo({
  url: '/pages/detail/detail',
  events: {
    acceptDataFromOpenerPage: function(data) {
      console.log(data)
    }
  },
  success: function(res) {
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' });
  }
});

4.2 接收数据

Page({
  onLoad: function(options) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data) // 输出 { data: 'test' }
    });
  }
});

五、自定义组件传值

在使用自定义组件时，可以通过属性（props）和事件（events）进行数据传递。

5.1 父组件向子组件传值

父组件代码

<custom-component myProperty="{{parentData}}">custom-component>

Page({
  data: {
    parentData: 'someValue'
  }
});

子组件代码

Component({
  properties: {
    myProperty: {
      type: String,
      value: ''
    }
  },
  ready: function() {
    console.log(this.data.myProperty); // 输出 someValue
  }
});

5.2 子组件向父组件传值

子组件代码

Component({
  methods: {
    sendDataToParent: function() {
      this.triggerEvent('myevent', { data: 'childData' });
    }
  }
});

父组件代码

<custom-component bind:myevent="handleChildEvent">custom-component>

Page({
  handleChildEvent: function(e) {
    console.log(e.detail.data); // 输出 childData
  }
});

六、使用回调函数传值

回调函数传值是一种较为灵活的方式，适用于页面之间或组件之间的复杂数据传递。

6.1 页面 A 调用页面 B，并传递回调函数

页面 A 代码

wx.navigateTo({
  url: '/pages/b/b',
  success: function(res) {
    res.eventChannel.emit('sendCallback', function(data) {
      console.log('Received data from page B:', data);
    });
  }
});

页面 B 代码

Page({
  onLoad: function(options) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('sendCallback', function(callback) {
      callback('This is data from page B');
    });
  }
});

七、使用 wx.navigateBack 传递数据

在页面返回时传递数据，适用于从子页面返回父页面时传递数据。

7.1 页面 B 返回并传递数据

页面 B 代码

wx.navigateBack({
  delta: 1,
  success: function() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.emit('fromPageB', { data: 'Hello from Page B' });
  }
});

页面 A 代码

Page({
  onLoad: function(options) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('fromPageB', function(data) {
      console.log(data.data); // 输出 Hello from Page B
    });
  }
});

总结

微信小程序中页面传值的方法多种多样，选择哪种方法取决于具体的场景需求和数据复杂度。通过URL参数传值、全局变量、本地存储、事件触发、自定义组件传值、回调函数和 wx.navigateBack 等方法，可以有效地实现页面之间的数据交互和传递。希望这些方法能够帮助你在开发过程中更好地管理数据传递。