微信小程序路由跳轉

一、微信小程序路由跳轉方式

微信小程序實現跳轉的方式有兩種方法：

1、使用wx.navigateTo()跳轉到應用內非tabbar頁面；

//跳轉到應用內的其他頁面，以index頁為例
wx.navigateTo({
  url: '/pages/index/index'
})

2、使用wx.switchTab()跳轉到tabbar頁面。

//跳轉到tabBar頁面，以user頁為例
wx.switchTab({
  url: '/pages/user/user'
})

二、微信小程序路由跳轉後閃退問題

在微信小程序中，若使用wx.navigateTo()方法進行頁面跳轉，可能會因為佔用資源過多等原因出現閃退問題。一般的解決方法有兩個：

1、使用wx.redirectTo()方法進行頁面跳轉，這樣可以減少資源佔用。

//跳轉到detail頁並關閉當前頁面
wx.redirectTo({
  url: '/pages/detail/detail',
})

2、使用wx.reLaunch()方法重新打開一個應用頁面，這樣可以清除原來的頁面棧。

//跳轉到應用首頁
wx.reLaunch({
  url: '/pages/index/index'
})

三、微信小程序路由跳轉到組件

可以使用__displayReporter.showKeyboard()方法跳轉到app-service封裝的組件。該方法需要三個參數：;

1、name——組件名稱；

2、data——組件參數；

3、callback——組件回調函數。

__displayReporter.showKeyboard({
    name: 'contact',
    data: {
      name: 'hello',
      phone: '10086'
    },
    callback: function(ret) {
        console.log(ret);
    }
})

四、微信小程序路由跳轉 返回參數

在調用頁面跳轉方法時，可以傳遞一個對象作為參數，該對象可以在目標頁面的onLoad生命周期函數中獲取到。

//跳轉到detail頁並傳遞參數
wx.navigateTo({
  url: '/pages/detail/detail?id=1&name=xxx',
})

在detail頁面中onLoad生命周期函數中獲取該參數：

onLoad: function (options) {
  console.log(options.id) //1
  console.log(options.name) //xxx
}

五、微信小程序路由跳轉帶參數

在跳轉頁面時，可以使用encodeURIComponent()方法進行參數編碼，避免特殊字元引起的問題。

var params = {
  id: 1,
  name: '小程序'
};
var paramStr = '?' + encodeURIComponent(JSON.stringify(params));
wx.navigateTo({
  url: '/pages/index/index' + paramStr
});

在跳轉後的頁面中onLoad生命周期函數中獲取該參數：

onLoad: function (options) {
  var paramStr = options.query;
  var params = JSON.parse(decodeURIComponent(paramStr));
  console.log(params.id) //1
  console.log(params.name) //小程序
}

六、微信小程序路由跳轉報錯

在使用頁面跳轉方法時，可能會因為路徑錯誤、參數錯誤等原因報錯。常見的錯誤信息有：

1、navigateTo:fail 參數錯誤：path不能為空或為空字元串或參數錯誤，請檢查後重試。

2、reLaunch:fail 跳轉鏈接不存在，請檢查跳轉鏈接是否正確並存在。

3、switchTab:fail 頁面（xxxxx）不存在，請檢查url是否打錯，並且文件是否存在。

對於以上錯誤，可以通過檢查路徑、參數是否正確來解決。

七、微信小程序路由跳轉傳參

可以使用頁面棧來實現頁面之間的傳參。頁面棧是一個棧結構，用來存儲當前頁面和歷史頁面。

可以使用getCurrentPages()方法獲取頁面棧數組，數組最後一個元素就是當前頁面，倒數第二個元素才是上一個頁面。

//跳轉到detail頁面並傳遞參數
var params = {
  id: 1,
  name: '小程序'
};
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2]; //#獲取上一個頁面實例對象
prevPage.setData({
  params: params
});
wx.navigateBack({
  delta: 1
});

在detail頁面中可以通過onLoad函數獲取到上一個頁面傳遞過來的參數：

onLoad: function (options) {
  var pages = getCurrentPages();
  var prevPage = pages[pages.length - 2];//#上一個頁面實例對象
  var params = prevPage.data.params;
  console.log(params.id) //1
  console.log(params.name) //小程序
}

八、小程序路由跳轉怎麼做

小程序路由跳轉可以使用wx.navigateTo()和wx.switchTab()方法，前者跳轉到應用內非tabbar頁面，後者跳轉到tabbar頁面。

可以通過getCurrentPages()方法獲取頁面棧，使用頁面棧來實現參數傳遞。

如果跳轉後出現閃退問題，可以使用wx.redirectTo()或wx.reLaunch()方法解決。

如果需要跳轉到組件，可以使用__displayReporter.showKeyboard()方法。