微信小程序页面间传递数据

正小安2024-10-12 20:41

在小程序中，给页面传递参数通常有以下几种方法：

通过URL传递参数 ：

在小程序中，可以在页面的路径后面添加参数，然后在页面的 onLoad 函数中获取这些参数。

javascript 复制代码

// 在app.json中配置页面路径
"pages": [
  {
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "首页"
    }
  },
  {
    "path": "pages/detail/detail?id=123" // 这里的id就是传递的参数
  }
]

// 在detail页面的js文件中获取参数
Page({
  onLoad: function(options) {
    console.log(options.id); // 输出123
  }
});

通过全局变量传递 ：

在小程序的 app 对象中设置全局变量，然后在需要的页面中获取。

javascript 复制代码

// 在app.js中设置全局变量
App({
  onLaunch: function() {
    // 可以在这里设置全局变量
    this.globalData = {
      userInfo: null
    };
  },
 });

// 在需要的页面中获取全局变量
Page({
  onLoad: function() {
    const app = getApp();
    console.log(app.globalData.userInfo);
  }
});

通过事件传递 ：

使用小程序的事件系统，可以在页面间传递数据。

javascript 复制代码

// 在发送事件的页面
this.triggerEvent('customEvent', { data: '这里是传递的数据' });

// 在接收事件的页面
Page({
  onLoad: function() {
    this.on('customEvent', function(e) {
      console.log(e.detail.data); // 输出传递的数据
    });
  }
});

通过wx.navigateTo或wx.redirectTo传递 ：

在跳转时，可以通过这些函数的第二个参数传递一个对象，对象中包含需要传递的数据。

javascript 复制代码

// 在当前页面中跳转到另一个页面，并传递参数
wx.navigateTo({
  url: '/pages/detail/detail',
  events: {
    acceptData: function() {
      // 这里是发送数据的回调
    }
  },
  success: function(res) {
    res.eventChannel.emit('acceptData', { data: '这里是传递的数据' });
  }
});

// 在目标页面中接收数据
Page({
  onLoad: function(options) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('acceptData', function(data) {
      // data就是传递的数据
      console.log(data);
    });
  }
});

使用wx.setStorageSync或wx.getStorageSync ：

如果需要在页面间传递复杂的数据，可以使用小程序的本地存储。
javascript 复制代码
```
// 设置数据
wx.setStorageSync('someKey', 'someValue');

// 获取数据
const value = wx.getStorageSync('someKey');
```

选择哪种方法取决于你的具体需求和场景。

微信小程序 页面间传递数据

微信小程序页面间传递数据