微信小程序之页面间传值(一)传参

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

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

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

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

好滴好滴,我们继续来说页面传值

(1)在A页面有一个固定的值要传递到B页面,比如说一个固定的值user_id要传递给B
<!--pages/pageA/pageA.wxml-->
<navigator url="../pageB/pageB?user_id='12345678'" hover-class="navigator-hover">跳转到B页面</navigator>
?后面为你要传递的值

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

data: {
    user_id:''
  },

然后在onload函数中进行操作,页面加载时获取

onLoad: function (options) {
    this.setData({
      user_id:options.user_id
    })
    console.log(this.data.user_id)
  },
(2)这样页面间传一个值得方法就学会了,传多个值得方法同理,只不过需要用&链接起来
举一个栗子

A页面

<!--pages/pageA/pageA.wxml-->
<navigator url="../pageB/pageB?user_id='12345678'" hover-class="navigator-hover">跳转到B页面</navigator>

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还是要用的,不将就是一种人生态度,哈哈哈,开玩笑了

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