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

刺骨的言语ヽ痛彻心扉 2022-11-25 00:58 242阅读 0赞

**在前面的章节尽管介绍了很多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所示的菜单。**

**![format_png][]**

**图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所示的页面，点击左上角的“返回”按钮，会返回到当前页面。**

**![format_png 1][]**

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

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

**![format_png 2][]**

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

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png 3][]

关注  极客起源  公众号，获得更多免费技术视频和文章。

![format_png 4][]

[format_png]: /images/20221124/a7d3c13d68404b7cbcd8cf6afa4476c6.png
[format_png 1]: /images/20221124/45deaa330065422b86476fc7627980d3.png
[format_png 2]: /images/20221124/b6d7711ef51842bf9db04f025854b97d.png
[format_png 3]: /images/20221124/cc785d1a05344637aeb1c8d55cf237c8.png
[format_png 4]: /images/20221124/0f98d66f2a5c45c6a7144515084452e4.png