
如何實現(xiàn)微信小程序路由跳轉(zhuǎn)指定頁面?微信小程序路由跳轉(zhuǎn),共有三種形式,頁面中使用navigator組件做頁面鏈接形式路由跳轉(zhuǎn),js中可以使用wx.navigateTo--保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面,wx.redirectTo--關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面 wx.navigateBack()--關(guān)閉當(dāng)前頁面,回退前一頁面。
頁面鏈接。
| 屬性名 | 類型 | 默認(rèn)值 | 說明 | 
|---|---|---|---|
| url | String | 應(yīng)用內(nèi)的跳轉(zhuǎn)鏈接 | |
| redirect | Boolean | false | 是否關(guān)閉當(dāng)前頁面 | 
| hover-class | String | navigator-hover | 指定點擊時的樣式類,當(dāng)hover-class="none"時,沒有點擊態(tài)效果 | 
注:navigator-hover默認(rèn)為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, 
示例代碼:
/** wxss **//** 修改默認(rèn)的navigator點擊態(tài) **/
.navigator-hover 
{    
color:blue;
}
/** 自定義其他點擊態(tài)樣式類 **/
.other-navigator-hover 
{    
color:red;
}跳轉(zhuǎn)到新頁面 在當(dāng)前頁打開(關(guān)閉了當(dāng)前頁面)
 {{title}}  點擊左上角返回回到之前頁面 {{title}}  點擊左上角返回回到上級頁面// redirect.js navigator.jsPage({  
onLoad: function(options) 
{    
this.setData
({      
title: options.title
 })
 }
})保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面,使用wx.navigateBack可以返回到原頁面。
OBJECT參數(shù)說明:
| 參數(shù) | 類型 | 必填 | 說明 | 
|---|---|---|---|
| url | String | 是 | 需要跳轉(zhuǎn)的應(yīng)用內(nèi)頁面的路徑 | 
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | 
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | 
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) | 
示例代碼:
wx.navigateTo({  url: 'test?id=1'})注意:為了不讓用戶在使用小程序時造成困擾,我們規(guī)定頁面路徑只能是五層,請盡量避免多層級的交互方式。
關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。
OBJECT參數(shù)說明:
| 參數(shù) | 類型 | 必填 | 說明 | 
|---|---|---|---|
| url | String | 是 | 需要跳轉(zhuǎn)的應(yīng)用內(nèi)頁面的路徑 | 
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | 
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | 
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) | 
示例代碼:
wx.redirectTo({  url: 'test?id=1'})關(guān)閉當(dāng)前頁面,回退前一頁面。