小程序传递参数总结 | 熊阿哥博客

小程序传递参数总结

微信   2025-02-23 09:40   89   0  

1. URL 参数传递

通过页面跳转时在 URL 中附加参数,目标页面通过 `onLoad` 方法获取。

// 页面跳转并传递参数
wx.navigateTo({
  url: '/pages/targetPage/targetPage?param1=value1&param2=value2'
});
// 目标页面获取参数
Page({
  onLoad: function(options) {
    console.log(options.param1); // 输出: value1
    console.log(options.param2); // 输出: value2
  }
});


2. 全局变量

使用 `getApp()` 获取全局对象,存储和访问数据。

// app.js 中定义全局变量
App({
  globalData: {
    userInfo: null
  }
});
// 页面中设置全局变量
const app = getApp();
app.globalData.userInfo = { name: 'John' };
// 其他页面获取全局变量
const app = getApp();
console.log(app.globalData.userInfo); // 输出: { name: 'John' }


3. 本地存储

使用 `wx.setStorageSync` 和 `wx.getStorageSync` 进行数据存储和读取。

// 存储数据
wx.setStorageSync('key', 'value');
// 获取数据
const value = wx.getStorageSync('key');
console.log(value); // 输出: value


4. 事件传递

通过 `triggerEvent` 在组件间传递数据。

// 子组件触发事件并传递数据
this.triggerEvent('myevent', { data: 'some data' });
// 父组件监听事件
<my-component bindmyevent="onMyEvent"></my-component>
Page({
  onMyEvent: function(e) {
    console.log(e.detail.data); // 输出: some data
  }
});


5. 页面栈传递

通过 `getCurrentPages` 获取页面栈,直接访问或修改页面数据。

// 获取页面栈
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2];
// 修改前一页数据
prevPage.setData({
  someData: 'new value'
});


总结

URL 参数传递:适合简单数据,页面跳转时使用。

全局变量:适合跨页面共享数据。

本地存储:适合持久化数据。

事件传递:适合组件间通信。

页面栈传递:适合页面间直接数据交互。

博客评论
还没有人评论,赶紧抢个沙发~
发表评论
说明:请文明发言,共建和谐网络,您的个人信息不会被公开显示。