微信小程序父级之间的传值_微信小程序之页面间传值（一）传参

微信小程序页面间传值有很多种方法，目前我这个初学者所了解的方法大概有以下四种，第一种就是页面跳转，依靠跳转的url带参传值，第二种就是本地存取，这里有分为同步或者异步，以及移除或清除本地缓存的API接口，还有一种就是将值设置为全局变量，在需要的页面获取，这种的话就不是很建议使用，因为很多需要传递的值是你需要从后台拿数据的。

接下来。我将按照我的理解详细的介绍一下这四种方法。

第一种，就是带参传值，比如说你在A页面，需要跳转到B页面并向B页面传递信息

首先我们直接采用组件，这个组件的属性可以自己了解一下，open-type为跳转方式，默认为navigator，当然有redirect，switchTab，reLaunch，navigitorBack，exit(退出小程序，target="miniProgram"时生效)，相当于页面导航的那几个API。自己了解一下好的噢！

好滴好滴，我们继续来说页面传值(1)在A页面有一个固定的值要传递到B页面，比如说一个固定的值user_id要传递给B

跳转到B页面？后面为你要传递的值

这样在B页面js的函数里面，使用setData方法可以获取到传递过来的值，并将它赋值给B页面初始数据

在B页面的data里面声明一个初始数据data: {

user_id:''

},

然后在函数中进行操作，页面加载时获取onLoad: function (options) {

this.setData({

user_id:options.user_id

})

console.log(this.data.user_id)

},

(2)这样页面间传一个值得方法就学会了，传多个值得方法同理，只不过需要用&链接起来举一个栗子

A页面

跳转到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)这种有固定值的传值，emmm，我觉得很没有必要，既然都知道值了，直接在B页面的初始数据中使用不就行了，所以上面全都很废，这里我说一下从后台获取参数传递栗子

在A页面发送wx.request()请求后端数据响应，将响应得到的数据选择需要的参数传递给B页面，例如我们需要传递user_id以及user_name

首先，在A页面的声明初始数据data: {

user_id:'',

user_name:''

},

在点击跳转的函数下发送wx.request()请求，并获取数据，在请求成功后进行页面跳转并传递参数bindTap: function () {    var that = this;

wx.request({

url: 'test/test',//开发者服务器接口地址

data:{

........................

},//服务器响应的请求参数

header: {

'content-type': 'application/json' // 默认值,根据服务器给出的请求头进行调整

},

success: function (res) {//请求成功调用函数

console.log(res.data)        //在这里，可以将请求到的数据赋值给原始数据，我只是举一个栗子，具体如何赋值，跟后台返回参数的形式有关

that.setData({

used_id:res.data.user_id,

used_name:res.data.user_name

})        //ok,接下来进行页面跳转，要将这些值传递到B页面

wx.navigateTo({

url: '../pageB/pageB?used_id=' + that.data.used_id + '&used_name=' + that.data.used_name,

})

}

})

},

这里可能有点疑问，就是为什么要用'+'进行拼接，哈哈哈，因为你现在传递的参数只是实际参数的名字，如果你直接和前面传参的方式一样的话，是得不到值的，因为脑子秀逗 吃过亏，所以特此提醒还有还有，switchTab这种导航方式，不能带参，也就是说不能通过url进行传参，解决方法就是如果要跳转到tab页面，使用reLaunch方法，当然也可以跳过这个，使用其他的传值方法，该用switchTab还是要用的，不将就是一种人生态度，哈哈哈，开玩笑了

第二种页面间传值方法，请见下节，麻烦了。。。

作者：肆意咯咯咯

链接：https://www.jianshu.com/p/49f0e3bade27