微信小程序页面传参的方式有多种,每种方式都有其特定的使用场景和优势。以下是几种常见的页面传参方式,以及它们的具体使用方法和示例:
- URL参数传值
- 原理:通过在跳转链接中附加参数,在目标页面的
onLoad
函数中获取参数。 - 示例:
javascript复制代码
// 源页面跳转
wx.navigateTo({
url: '/pages/targetPage/targetPage?name=John&age=30'
})
// 目标页面接收参数
Page({
onLoad: function(options) {
console.log(options.name); // 输出: John
console.log(options.age); // 输出: 30
}
})
- 特点:简单直接,适用于页面间简单的数据传递。
- 原理:通过在跳转链接中附加参数,在目标页面的
- 全局变量
- 原理:在
app.js
文件中定义全局变量,通过getApp().globalData
在源页面设置和目标页面获取变量的值。 - 示例:
javascript复制代码
// app.js
App({
globalData: {
userInfo: null
}
})
// 源页面设置全局变量
const app = getApp();
app.globalData.userInfo = { name: 'John', age: 30 };
// 目标页面获取全局变量
const app = getApp();
console.log(app.globalData.userInfo); // 输出: { name: 'John', age: 30 }
- 特点:适用于在整个应用中共享数据。
- 原理:在
- 缓存存储
- 原理:使用
wx.setStorageSync()
在源页面设置存储的值,目标页面通过wx.getStorageSync()
获取值。 - 示例:
javascript复制代码
// 源页面设置缓存
wx.setStorageSync('userInfo', { name: 'John', age: 30 });
// 目标页面获取缓存
let userInfo = wx.getStorageSync('userInfo');
console.log(userInfo); // 输出: { name: 'John', age: 30 }
- 特点:数据持久化存储,适用于跨页面、跨会话的数据传递。
- 原理:使用
- 路由传参
- 原理:使用
wx.navigateTo()
传递参数,目标页面通过options
参数获取传递的值。 - 示例:与URL参数传值类似,但通常用于通过编程式导航传递参数。
- 原理:使用
- 事件触发传参
- 原理:通过事件绑定,在源页面触发事件传递需要的参数,目标页面通过事件对象获取传递的值。
- 示例:通常在自定义组件间使用,通过触发自定义事件传递数据。
- 组件传参
- 原理:通过自定义组件的
properties
属性进行父子组件间的数据传递。 - 示例:在自定义组件的
properties
中定义需要传递的属性,然后在父组件中设置该属性的值。
- 原理:通过自定义组件的
- 使用通信通道(wx.navigateTo的特有功能)
- 原理:通过
wx.navigateTo
打开的页面间可以通过wx.getCurrentPages()
获取页面栈,并使用页面栈中的页面实例进行通信。 - 示例:这通常用于实现页面间的复杂交互和数据传递。
- 原理:通过
总结:
微信小程序页面传参的方式多样,开发者可以根据实际需求选择合适的方式。简单直接的参数传递可以使用URL参数或路由传参;需要跨页面或持久化存储的数据可以使用全局变量或缓存存储;自定义组件间的数据传递可以使用组件传参;对于复杂的页面间交互,可以使用通信通道或其他高级功能。