微信小程序页面间传值（微信小程序页面间传值的方法）

微信小程序页面间传值及微信小程序页面间传值的方法

在微信小程序开发中，页面间传值是非常常见的需求，通过传值，可以实现不同页面之间的数据交互和信息传递，提升用户体验和页面功能的完整性，本文将介绍微信小程序页面间传值的方法，帮助开发者解决相关问题。

1. URL传参

URL传参是最简单的一种方式，通过在跳转链接中携带参数来实现页面间的数据传递，在源页面跳转到目标页面时，可以通过在URL中添加参数的方式将数据传递给目标页面，目标页面可以通过获取当前页面的URL并解析参数来获取传递的数据。

在源页面中跳转到目标页面时，可以使用`wx.navigateTo`或`wx.redirectTo`方法，并在URL中携带参数：

```

wx.navigateTo({

url: '/pages/targetPage/targetPage?id=123&name=example'

})

在目标页面的`onLoad`生命周期函数中，可以通过`options`参数获取传递的参数：

onLoad: function(options) {

console.log(options.id); // 输出：123

console.log(options.name); // 输出：example

}

2. 全局变量

另一种常见的页面间传值方式是使用全局变量，开发者可以在app.js中定义全局变量，然后在不同的页面中进行读写操作。

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

App({

globalData: {

userInfo: null,

exampleData: 'example'

}

在源页面中设置全局变量的值：

getApp().globalData.exampleData = 'new value';

在目标页面中可以直接读取全局变量的值：

console.log(getApp().globalData.exampleData); // 输出：new value

3. Storage本地存储

微信小程序提供了Storage API，可以用于在页面间进行数据传递，开发者可以使用`wx.setStorage`方法将数据存储到本地，然后在目标页面中使用`wx.getStorage`方法获取存储的数据。

在源页面中存储数据：

wx.setStorage({

key: 'exampleData',

data: 'example'

在目标页面中获取数据：

wx.getStorage({

success: function(res) {

console.log(res.data); // 输出：example

4. Event事件传递

Event事件传递是一种常用的页面间传值方式，通过在源页面触发自定义事件，并在目标页面监听该事件，可以实现数据的传递和交互。

在源页面中触发自定义事件：

this.triggerEvent('customEvent', { data: 'example' });

在目标页面中监听自定义事件：

onCustomEvent: function(e) {

console.log(e.detail.data); // 输出：example

需要注意的是，在目标页面中监听自定义事件时，需要在模板中绑定事件名：

本文介绍了微信小程序页面间传值的四种常见方式：URL传参、全局变量、Storage本地存储和Event事件传递，开发者可以根据具体需求选择合适的方式来实现页面间的数据传递和交互。