微信小程序 wx.navigateTo傳值總結

 

wx.navigateTo(Object object)

保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。小程序中頁面棧最多十層。

     具體參數參見微信公眾平台 | 小程序 API

 

其中url參數是需要跳轉到目標頁面的路徑，路徑可以帶參數，現在我們就看看這個參數怎么傳遞

 

1. 傳參格式：參數與路徑之間使用 ?分隔，參數鍵與參數值用 = 相連，不同參數用 & 分隔；如 '/pages/index/index?value1=hello&value2=world'

2. 不同類型的參數傳遞：

Tip：其中下面的index是傳值頁面，text為接收參數頁面

傳遞字符串

// index.js
onClick: function (e) {
    var str = 'Hello World'
    wx.navigateTo({
      url: '../test/test?str=' + str,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  }

// test.js
onLoad: function(options) {
    var str = options.str

    this.setData({
      str: str
    })
  }

 Tips:

1. 當傳遞的是布爾類型的話也會不變成字符串'true'/'false'，通過var isTrue = (options.str == 'true') ? true : false 來設置

2. 當傳遞的是整型，通過字符串轉整型來處理：var index =  parseInt(options.str)

傳遞對象/數組：需要通過JSON.stringify將對象轉換為字符串傳遞，接收時需要通過JSON.parse將字符串轉換為對象

 

// index.js
onClick: function (e) {
    var obj = JSON.stringify(myObj) //myObj：本js文件中的對象
    wx.navigateTo({
      url: '../test/test?obj=' + obj,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  }

// test.js
onLoad: function(options) {
    var obj =JSON.parse(options.obj）

//  testObj:本js文件中的對象
    this.setData({
      testObj: obj
    })
  }

 

注意：如果對象的參數或數組的元素中遇到地址，地址中包括?、&這些特殊符號時，對象/數組先要通過JSON.stringify轉化為字符串再通過encodeURIComponent編碼，接收時，先通過decodeURIComponent解碼再通過JSON.parse轉換為JSON格式的對象/數組

// index.js
onClick: function (e) {
    var obj = JSON.stringify(myObj) //myObj：本js文件中的對象
    wx.navigateTo({
      url: '../test/test?obj=' + encodeURIComponent(obj), // 進行編碼
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  }

// test.js
onLoad: function(options) {
    var obj =JSON.parse(decodeURIComponent(options.obj))
//  testObj:本js文件中的對象
    this.setData({
      testObj: obj
    })
  }