微信小程序页面间值传递的两种方法

微信小程序页面间值传递的两种方法

在微信小程序开发中，页面间的值传递是非常常见的需求。这里为大家介绍两种常见的方法，通过实例代码详细介绍，希望对开发者们有所帮助。

一、通过url带参数传递

与前端语言类似，我们可以在路由的url后添加参数，小程序会自动将这些参数传递到新的页面。

例如，在index页面的wxml中，我们可以使用navigator组件，并在url后添加参数：

```xml

前往demo页面

```

在demo页面的js中，我们可以通过options获取传递的参数：

```javascript

// pages/demo/demo.js

Page({

data: {

title: ''

},

onLoad: function (options) {

console.log(options) // 可以看到title的值已经获取到

this.setData({

title: options.title // 为页面中title赋值

})

}

})

```

在demo页面的wxml中，我们可以展示传递的值：

```xml

{{title}}

```

二、将值存入全局变量

另一种方法是把我们需要的值存入全局变量中，在任何需要的地方都可以引用。

在app.js中，我们可以定义一个globalData对象作为全局存储：

```javascript

// app.js

App({

globalData: {}

})

```在index页面的wxml中，我们可以设置一个点击事件，将值存入全局变量，并跳转到新的页面：

```javascript

跳转到demo页面并存储标题信息 前往demo页面 title=参数传递 ``` 在index页面的js中，我们实现goto_demo函数，将值存入全局变量并跳转：

```javascript //index.js const app = getApp() Page({ data: { title:'参数传递' }, goto_demo: function() { app.globalData.title = this.data.title wx.navigateTo({ url: '../demo/demo', }) } }) ``` 在demo页面的js中，我们可以从全局变量中获取值： 加载页面时获取全局变量中的title值并进行打印和页面展示 跳转到demo页面后打印全局变量中的标题信息并进行赋值 ```javascript // pages/demo/demo.js const app = getApp() Page({ data: { title:'' }, onLoad: function (options) { console.log(app.globalData.title) // 可以看到title的值已经获取到 this.setData({ title: app.globalData.title // 为页面中title赋值 }) } }) ``` 在实际开发中，需要根据具体需求选择合适的方法。如果需要跨多个页面传递值，使用全局变量可能更方便；如果只是简单的单个页面间传递值，使用url带参数的方式可能更简洁。无论哪种方式，都需要确保数据的正确传递和接收。以上就是微信小程序页面间值传递的两种方法介绍，希望对大家有所帮助。如有任何疑问或建议，欢迎留言交流。