微信小程序页面间传值的四种方法详解

2024-07-25
来源:网络整理

微信小程序中页面间传递值的方式有很多种,作为新手,目前知道的大概有以下四种方式。第一种是页面重定向,依赖重定向URL传递参数。第二种是本地访问,分为同步或者异步,还有移除或者清除本地缓存的API接口。还有一种就是将值设置为全局变量,在需要的页面获取,这种方式不推荐,因为很多需要传递的值都是需要从后台获取的数据。

接下来我就根据我的理解来详细介绍一下这四种方法。

第一种是有参数值的,比如你在A页面,需要跳转到B页面,并向B页面传递信息,我们首先直接使用组件,这个组件的属性大家可以自行了解一下,open-type是跳转方式,默认当然是exit(退出小程序,=”时生效),相当于页面导航的API,自行了解一下吧!

OK,我们继续进行页面值传递

(1)A页面上有一个固定的值需要传递给B页面。比如要向B页面传递一个固定的值。

跳转到B页面

? 后面跟着要传递的值

这样在B页面的js函数中就可以使用方法获取传递的值并赋值给B页面的初始数据了。

在B页的数据中声明一个初始数据

data: { user_id:'' },

然后在函数里操作,在页面加载的时候获取

onLoad: function (options) { this.setData({ user_id:options.user_id }) console.log(this.data.user_id) },

(2)现在你已经学会了如何在页面之间传递一个值。传递多个值的方法也一样,只是需要用 & 连接它们。

页面

跳转到B页面

第 B 页

data: { user_id:'', user_name:'', user_age:'' }, onLoad: function (options) { this.setData({ user_id:options.user_id, user_name: options.user_name, user_age: options.user_age }) console.log(this.data.user_id) console.log(this.data.user_name) console.log(this.data.user_age) },

(3)我觉得这种固定值传递没必要,因为大家都知道这个值,直接在B页面的初始数据中用就可以了,所以上面这些都没用,这里就说一下从后台获取参数传递的例子。

在页面A上发送wx.()请求后端数据响应,并将响应数据所需的参数传递给页面B。例如,我们需要传递和

分享