微信小程序传值（微信小程序传值以及获取值方法）

微信小程序传值

在微信小程序开发中，传值是非常常见和重要的操作，通过传值，我们可以在不同的页面之间共享数据，实现页面之间的数据交互和信息传递，下面将详细介绍微信小程序传值的几种常用方法。

1. URL传参

URL传参是一种简单而常见的传值方式，在小程序中，我们可以通过在页面跳转时在URL中携带参数，在目标页面中获取参数值。

在源页面中使用`wx.navigateTo`或`wx.redirectTo`等页面跳转方法，并在URL中携带参数，例如：

```

wx.navigateTo({

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

})

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

onLoad: function (options) {

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

console.log(options.name) // 输出：abc

}

通过URL传参的方式，可以实现简单的数据传递。

2. 全局变量

小程序中可以使用全局变量来进行数据传递，在小程序的`app.js`中，可以定义全局变量，在任何页面中都可以访问和修改这些变量。

在`app.js`中定义全局变量，例如：

App({

globalData: {

userInfo: null,

}

在任意页面中，可以通过`getApp()`方法获取小程序实例，从而访问和修改全局变量，例如：

const app = getApp()

console.log(app.globalData.userInfo) // 输出：null

app.globalData.userInfo = { name: 'Tom', age: 18 }

console.log(app.globalData.userInfo) // 输出：{ name: 'Tom', age: 18 }

全局变量的方式适用于小程序中多个页面需要共享同一份数据的情况。

3. Storage缓存

小程序提供了Storage API，可以用于在页面之间传递数据，通过Storage缓存，可以将数据保存在本地，然后在其他页面中获取。

在源页面中使用`wx.setStorageSync`方法将数据保存到Storage中，例如：

wx.setStorageSync('key', 'value')

在目标页面中，可以使用`wx.getStorageSync`方法获取保存在Storage中的数据，例如：

const value = wx.getStorageSync('key')

console.log(value) // 输出：value

Storage缓存的方式适用于需要在不同页面间长期共享数据的情况。

4. Event事件

在小程序中，我们可以使用自定义事件来进行页面间的数据传递，通过事件机制，可以在源页面触发事件，然后在目标页面中监听事件并获取传递的数据。

在源页面中定义事件，并在适当的时机触发事件，例如：

// 源页面

Page({

// 触发事件

triggerEvent: function () {

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

在目标页面中，可以使用`this.selectComponent`方法获取源页面实例，并监听自定义事件，例如：

// 目标页面

// 监听事件

onCustomEvent: function (e) {

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

通过事件机制，可以实现更灵活的数据传递和交互。

微信小程序传值有多种方式可供选择，包括URL传参、全局变量、Storage缓存和Event事件等，根据实际需求和场景，选择合适的传值方式可以实现页面之间的数据共享和交互。