小程序的頁面間跳轉非常簡單,微信官方提供了navigator 標簽。
這個標簽可以實現小程序內的頁面間跳轉,也可以實現小程序之間的跳轉。
有幾個主要的參數
- url :要跳轉的路徑。指向當前小程序內的跳轉鏈接。
- target : 跳轉方式,默認值為 self,擁有以下幾個合法值: self - 當前小程序 miniProgram - 其他小程序
指定url后已經可以實現頁面間跳轉。
<navigator url='../list/list' hover-class='none'> <button>跳轉</button> </navigator>
使用此標簽后,此標簽默認會有一個點擊高亮。但是那個高亮比較丑。如果希望自己實現一個點擊高亮的話,可以使用hover-class='none' 來禁用掉原本的高亮。
在這里,url所指向的路徑為相對路徑。
如此已經能夠實現跳轉,且跳轉后小程序會自動為我們添加一個返回按鈕。

可以直接通過這個按鈕來返回上一層。在這里需要說明一下,開發文檔中提到了,這種跳轉的嵌套最多只能嵌套十層。也就是說最好不要有過多的頁面間嵌套。
我們經常會需要在跳轉頁面的同時傳遞一些參數。小程序傳參的方式也非常簡單。
<navigator url='../list/list?p1=123&p2=456' hover-class='none'> <button>跳轉</button> </navigator>
直接像web開發一樣在地址欄后邊跟上參數即可。連接和參數之間使用 ? 隔開,參數之間使用 & 隔開。
需要注意的是,小程序只是借鑒了網頁開發的部分內容,其本質並不是網頁,沒有瀏覽器對象,沒有session,只是借鑒了一些開發方式而已,千萬不要混為一談了。
接收參數時可以在 onLoad 事件中寫,這個鈎子會監聽頁面的加載。
/** * 生命周期函數--監聽頁面加載 */ onLoad: function(params) { this.setData({ p1:params.p1, p2:params.p2 }) }
小程序會在傳參的過程中吧你所有傳遞的參數封裝為一個對象,接收參數頁面使用 params 來接收,取值直接使用 params.參數名稱 即可
如果打算在小程序之間跳轉的話。
首先要將 target 屬性設置為 miniProgram 。不設置的話默認值為 self ,即當前小程序。
其次需要幾個小程序內跳轉不需要的參數:
- app-id :需要跳轉的小程序的APPID,該值僅在 target 屬性為 miniProgram 時有效。
- path :指定打開需要跳轉的小程序的那個頁面,若為空則默認打開首頁,該值僅在 target 屬性為 miniProgram 時有效。
- extra-data :所傳遞的參數,需要寫在該屬性中。獲取數據的方式不變。所傳遞參數必須為 object 類型
- bindsuccess :指定小程序跳轉成功時調用的方法。
- bindfail :小程序跳轉失敗時調用的方法。
- bindcomplete :跳轉完成時調用的方法。
參考文獻:微信小程序官方API
