首页手记微信小程序之页面间传值（一）传参

微信小程序之页面间传值（一）传参

标签：

WebApp

微信小程序页面间传值有很多种方法，目前我这个初学者所了解的方法大概有以下四种，第一种就是页面跳转，依靠跳转的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的函数里面，使用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页面

<!--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,
        })
      }
    })
  },

这里可能有点疑问，就是为什么要用'+'进行拼接，哈哈哈，因为你现在传递的参数只是实际参数的名字，如果你直接和前面传参的方式一样的话，是得不到值的，因为脑子秀逗吃过亏，所以特此提醒