微信小程序开发实战（19）：页面导航

在前面的章节尽管介绍了很多API和组件，但所有的代码都放在了一个页面中（布局放在了wxml文件中，JS代码写在了js文件中），然而，对于一个有实际应用价值的小程序，不可能只有一个页面，如果小程序中包含了多个页面，就需要从一个页面切换到另一个页面，这被称为页面导航。

要实现页面导航，需要使用<navigator>标签，该标签允许在当前页面显示另一个页面，也允许显示一个新页面。例如，下面的布局代码中使用了两个<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是与当前页面同一个目录下的页面。第二个<navigator>标签不仅通过url传递了title参数，还传递了一个color参数，用于设置page2中文本的颜色。在这个<navigator>标签中还指定了redirect属性，表示在当前页面中打开新页面，默认是在另一个页面中打开新页面。

现在选择当前页面的目录，然后单击鼠标右键，会弹出如图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文件中的代码可以看出，通过onLoad事件的options参数返回传入的参数（title和color），并将这两个参数值赋给title和color变量。

注意：新添加的页面，要在app.json文件的pages中注册，否则无法使用新建立的页面。注册代码如下：

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

现在点击第一个按钮，会跳转到如图2所示的页面，点击左上角的“返回”按钮，会返回到当前页面。

图2 在另一个页面显示新页面

点击第二个按钮，会跳转到如图3所示的页面，点击左上角的“返回”按钮，会返回到当前页面的上一个页面。

图3 在当前页面显示新页面