前の章では多くのAPIとコンポーネントが紹介されていましたが、すべてのコードは1ページに配置されています（レイアウトはwxmlファイルに配置され、JSコードはjsファイルに記述されています）。アプレットに1ページのみを含めることはできません。アプレットに複数のページが含まれている場合は、ページを切り替える必要があります。これをページナビゲーションと呼びます。
ページナビゲーションを実現するには、<navigator>タグを使用する必要があります。これにより、現在のページに別のページを表示したり、新しいページを表示したりできます。たとえば、以下のレイアウトコードでは2つの<navigator>タグが使用されています。
<view style="margin:30px">
<navigator url="page1?title=跳转到新页面" >
<button >跳转到新页面</button>
</navigator>
<navigator style="margin-top:20px" url="page2?title=在当前页面打开&color=red" redirect >
<button >在当前页打开</button>
</navigator>å
</view>
<navigator>タグには非常に重要な属性urlがあり、リダイレクトされるページと渡される値を指定するために使用されます。このURLの形式はWebアドレスに似ています。ページとパラメーターは疑問符（？）で区切られます。複数のパラメーターが渡される場合、パラメーターは＆で区切られます。ここで、page1とpage2は、現在のページと同じディレクトリにあるページです。2番目の<navigator>タグは、urlを介してtitleパラメーターを渡すだけでなく、page2のテキストの色を設定するcolorパラメーターも渡します。この<navigator>タグでもリダイレクト属性が指定されています。つまり、現在のページで新しいページが開かれ、デフォルトでは別のページで新しいページが開かれます。
現在のページのディレクトリを選択してマウスの右ボタンをクリックすると、図1に示すようなメニューがポップアップします。
図1新しいページ
次に、4つの新しいファイルを作成します。page1.wxml、page1.js、page2.wxml、およびpage2.jsです。これらの4つのファイルのコードは次のとおりです。
page1.wxml
<view style="margin:30px">
<text>{
{title}}</text>
</view>
page1.js
Page({
onLoad: function(options) {
console.log(options)
this.setData({
title: options.title
})
}
})
page2.wxml
<view style="margin:30px">
<text style="color:{
{color}}">{
{title}}</text>
</view>
page2.js
Page({
onLoad: function(options) {
console.log(options)
this.setData({
title: options.title,
color:options.color
})
}
})
page1.jsファイルとpage2.jsファイルのコードからわかるように、受信パラメーター（titleとcolor）はonLoadイベントのoptionsパラメーターを介して返され、これら2つのパラメーターの値がtitle変数とcolor変数に割り当てられます。
注：新しく追加されたページはapp.jsonファイルのページに登録する必要があります。そうでない場合、新しく作成されたページは使用できません。登録コードは次のとおりです。
"page/component/component-pages/wx-view/page1",
"page/component/component-pages/wx-view/page2",
最初のボタンをクリックすると、図2に示すページにジャンプし、左上隅の「戻る」ボタンをクリックして現在のページに戻ります。
図2別のページに新しいページを表示する
2番目のボタンをクリックして、図3に示すページにジャンプします。左上隅の「戻る」ボタンをクリックして、現在のページの前のページに戻ります。
図3現在のページに新しいページを表示する
この記事に興味がある場合は、Li Ning先生のWeChatパブリックアカウント（unitymarvel）を追加できます。
Geek Originの公式アカウントをフォローして、無料のテクニカルビデオや記事を入手してください。