微信小程序--页面传值

前言

    昨晚在写小程序的时候，遇到了一个问题，页面传值当值为对象时，控制台会报错。之后查了百度，发现页面传值时，不能直接传递对象，需要进行类型的转换。在这里就总结一下页面传值的一些写法。

页面传值之单值

适用场景：本界面获取了用户id后，跳转的下一个界面也需要用到id，如果在下个界面再获取一遍用户id，显得多此一举。这里可以利用页面传值，直接将本界面的id传递给下一个界面。
代码示例
本界面-传递

  toarticle:function(e){
  // 跳转至artic界面 其中携带id 值为e.currentTarget.dataset.url
  // e.currentTarget.dataset.url也就是我们需要传递到下一个界面的值
    wx.navigateTo({
      url: "/pages/skill/article/article?id=" + e.currentTarget.dataset.url 
    })
  }

下一个界面-接收值

// 传递的值在下一个界面的onLoad()中获取
  onLoad: function (options) {
    console.log(options.id)
    // options.id 就是刚刚传递过来的值
    var k = this
    k.setData({
      url: options.id
    })
  },

页面传值之多值

本界面
传递id、x、y到下一个界面

  toarticle:function(e){
    console.log(e)
    wx.navigateTo({
      url: "/pages/skill/article/article?id=" + e.currentTarget.dataset.url + "&x=" + "4" + "&y=" + "5" 
    })
  }

下一个界面
接收id、x、y，并且打印出来

  onLoad: function (options) {
    console.log("id="+options.id)
    console.log("x="+options.x)
    console.log("y=" + options.y)
    var k = this
    k.setData({
      url: options.id
    })
  },

控制台结果

页面传值之传递对象值

不知道怎么的，页面之间不可以直接传递对象值
所以我们只需要对其进行类型转换就行了
发送的时候将对象转换为string 接收的时候再转换回对象
发送端用 JSON.stringify（）
接收端用JSON.parse()

发送端示例代码

  toabout:function(e){
  
    wx.navigateTo({
      url: 'about/about?id=' + JSON.stringify(e.currentTarget.dataset.id),
    })
  }

接收端示例代码

  onLoad(e){
    var k=this
    console.log(JSON.parse(e.id))
    k.setData({
       work: JSON.parse(e.id)
    })
  },

更多项目源码、资源

需要学习资料的小伙伴
请前往海轰的微信公众号：海轰Pro
回复：海轰
就可以啦