微信小程序之页面带参跳转

页面跳转参数传递有很多中方式，这里只说一种非常简单的。 

一、单一参数传递

第一个页面跳转代码：

  Click: function () {
    console.log("我来啦")
    let name = '传递的数据'; // 跳转传参的参数
    wx.navigateTo({ //在接收页面的url后面加上“？自定义名称=字符串”就可以通过url传值
      url: '../test2/my?name=' + '我就是要传递的数据'//此处注意中文符号与引文符号的？
    })

第二个.JS页面的接收代码：

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
        console.log(options.name)
        this.setData({// 把从index页面获取到的属性值赋给详情页的my，供详情页使用
          name:options.name
        })
      
  },

 在第二个WXML页面渲染出数据

<text>第二个页面的测试页</text>
<view> 显示内容：{{name}}</view>

二、多参数传递

第一个跳转页面代码：

Click: function () {
    console.log("我来啦")
    var name = '传递的数据'; // 跳转传参的参数
    var name2 = '传递的数据2';
    var name3 = '传递的数据3';
    wx.navigateTo({ //在接收页面的url后面加上“？自定义名称=字符串”就可以通过url传值
      url: '../test2/my?name=' + name + "&name2=" + name2+ "&name3=" + name3 //此处注意中文符号与引文符号的？
    })

跳转后的.JS页面中接收

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
        console.log(options.name)
        this.setData({// 把从index页面获取到的属性值赋给详情页的my，供详情页使用
          name:options.name,
          name2:options.name2,
          name3:options.name3
        })      
  },

跳转后的.WXML页面

<!--pages/test2/my.wxml-->
<text>第二个页面的测试页</text>
<view> 显示内容：{{name}}</view>
<view> 显示内容：{{name2}}</view>
<view> 显示内容：{{name3}}</view>

三、带参数传参长度超过限制被截取时，需要使用encode ,

例如：图片

第一个.js页面代码

// xxxx是跳转传照片的数组，先转字符串，再encode
let xxxx = posters.toString()
console.log( encodeURIComponent(xxxx))
wx.navigateTo({
  url: '../test2/my?posters=' + encodeURIComponent(xxxx)
})

第二个.js页面接收代码 

// onload接收传参数据
onLoad: function (options) {
    let xxxx = decodeURIComponent(options.posters) // 先decode再把字符串转数组
    let photo = xxxx.split(",");
    console.log(photo)
    this.setData({
      photo: photor
    })
  },

 四、switchTab无法携带参数跳转

wx.switchTab({
  url: '../test2/my'
})

 

            DEMO

                                                                         -END