在前面的章節(jié)盡管介紹了很多 API 和組件，但所有的代碼都放在了一個(gè)頁面中（布局放在了 wxml 文件中， JS 代碼寫在了 js 文件中），然而，對(duì)于一個(gè)有實(shí)際應(yīng)用價(jià)值的小程序，不可能只有一個(gè)頁面，如果小程序中包含了多個(gè)頁面，就需要從一個(gè)頁面切換到另一個(gè)頁面，這被稱為頁面導(dǎo)航。

要實(shí)現(xiàn)頁面導(dǎo)航，需要使用 標(biāo)簽，該標(biāo)簽允許在當(dāng)前頁面顯示另一個(gè)頁面，也允許顯示一個(gè)新頁面。例如，下面的布局代碼中使用了兩個(gè) 標(biāo)簽。

<view style="margin:30px">
<navigator url="page1?title=跳轉(zhuǎn)到新頁面" >
<button >跳轉(zhuǎn)到新頁面button>
navigator>
<navigator style="margin-top:20px" url="page2?title=在當(dāng)前頁面打開&color=red" redirect >
<button >在當(dāng)前頁打開button>
navigator>?
view>

標(biāo)簽有一個(gè)非常重要的屬性 url ，該屬性用于指定要跳轉(zhuǎn)的頁面和要傳遞的值。這個(gè) url 的格式類似于 web 地址。頁面和參數(shù)之間用問號(hào)（ ? ）分隔，如果傳遞多個(gè)參數(shù)，參數(shù)之間用 & 分隔。其中 page1 和 page2 是與當(dāng)前頁面同一個(gè)目錄下的頁面。第二個(gè) 標(biāo)簽不僅通過 url 傳遞了 title 參數(shù)，還傳遞了一個(gè) color 參數(shù)，用于設(shè)置 page2 中文本的顏色。在這個(gè) 標(biāo)簽中還指定了 redirect 屬性，表示在當(dāng)前頁面中打開新頁面，默認(rèn)是在另一個(gè)頁面中打開新頁面。

現(xiàn)在選擇當(dāng)前頁面的目錄，然后單擊鼠標(biāo)右鍵，會(huì)彈出如圖 1 所示的菜單。

圖1 新建頁面

現(xiàn)在新建 4 個(gè)文件： page1.wxml 、 page1.js 、 page2.wxml 和 page2.js 。這 4 個(gè)文件中的代碼如下：

page1.wxml

<view style="margin:30px">
{{title}}
view>
page1.js
Page({
  onLoad: function(options) {
    console.log(options)
    this.setData({
      title: options.title
    })
  }
})

page2.wxml

<view style="margin:30px">
"color:{{color}}">{{title}}
view>
page2.js
Page({
  onLoad: function(options) {
    console.log(options)
    this.setData({
      title: options.title,
      color:options.color
    })
  }
})

從 page1.js 和 page2.js 文件中的代碼可以看出，通過 onLoad 事件的 options 參數(shù)返回傳入的參數(shù)（ title 和 color ），并將這兩個(gè)參數(shù)值賦給 title 和 color 變量。

注意：新添加的頁面，要在 app.json 文件的 pages 中注冊(cè)，否則無法使用新建立的頁面。注冊(cè)代碼如下：

"page/component/component-pages/wx-view/page1",
"page/component/component-pages/wx-view/page2",

現(xiàn)在點(diǎn)擊第一個(gè)按鈕，會(huì)跳轉(zhuǎn)到如圖 2 所示的頁面，點(diǎn)擊左上角的“返回”按鈕，會(huì)返回到當(dāng)前頁面。

圖2  在另一個(gè)頁面顯示新頁面

點(diǎn)擊第二個(gè)按鈕，會(huì)跳轉(zhuǎn)到如圖 3 所示的頁面，點(diǎn)擊左上角的“返回”按鈕，會(huì)返回到當(dāng)前頁面的上一個(gè)頁面。

圖3  在當(dāng)前頁面顯示新頁面