微信小程序navigateto傳參詳解

一、基本使用

navigateto是微信小程序中的一個頁面跳轉方法，主要用於跳轉到應用內的非tabBar頁面。可以使用該方法傳遞參數，最多可以攜帶一個參數，參數的數據類型只支持字元串類型，且需要進行URL編碼。下面是一個基本的使用示例：

wx.navigateTo({
  url: 'pages/detail/detail?id=' + encodeURIComponent(123)
})

在目標頁面的onLoad方法中可以獲取參數：

onLoad: function(options) {
  var id = decodeURIComponent(options.id);
  // do something with id
}

二、多個參數傳遞

由於navigateto傳遞參數只支持一個，我們可以將多個參數序列化成一個json字元串，然後再傳遞該json字元串來實現多個參數的傳遞。在目標頁面可以將獲取的json字元串反序列化為json對象，從而獲取多個參數。下面是一個示例：

//JSON序列化
var obj = {
  id: 123,
  name: 'Product Name',
  price: 99.99
};
var jsonString = JSON.stringify(obj);
//跳轉頁面並傳遞json字元串
wx.navigateTo({
  url: 'pages/detail/detail?params=' + encodeURIComponent(jsonString)
});

在目標頁面的onLoad方法中獲取json字元串並解析：

onLoad: function(options) {
  var params = decodeURIComponent(options.params);
  var obj = JSON.parse(params);
  // do something with obj.id / obj.name / obj.price
}

三、參數校驗與默認值設置

在實際開發中，我們需要對傳遞的參數進行校驗。其中一個比較常見的校驗是檢查傳遞的參數是否存在以及數據是否合法。如果參數不存在或者數據不合法，我們可以設置默認值。下面是一個示例，該示例對id參數進行校驗並設置默認值：

onLoad: function(options) {
  var id = options.id;
  if (!id || isNaN(id)) {
    id = 0;
  }
  // do something with id
}

在上面的示例中，如果傳遞的id參數不合法或者不存在，id會被設置為0。這種方法可以保證程序的穩定性，避免出現因為傳遞參數出現異常而導致的程序崩潰。

四、url參數的拼接

因為navigateto傳遞參數的方式類似於GET方式，我們也可以使用獲取URL參數的方式來進行參數傳遞。下面是一個示例代碼：

var url = 'pages/buy/buy';
var params = {
  id: 123,
  name: 'Product Name',
  price: 99.99
};
var arr = [];
for (var key in params) {
  arr.push(key + '=' + encodeURIComponent(params[key]));
}
url += '?' + arr.join('&');
wx.navigateTo({
  url: url
});

在上面的示例中，我們首先聲明了一個要跳轉的頁面路徑，然後定義了一個包含多個參數的json對象params，最後我們根據params構建了一個URL並使用navigateto方法進行跳轉。這種方法可以在多個頁面之間進行數據的傳遞，保證程序的靈活性。