微信小程序开发实战（19）：页面导航
source link: https://blog.csdn.net/nokiaguy/article/details/107853373
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
在前面的章节尽管介绍了很多API和组件，但所有的代码都放在了一个页面中（布局放在了wxml文件中，JS代码写在了js文件中），然而，对于一个有实际应用价值的小程序，不可能只有一个页面，如果小程序中包含了多个页面，就需要从一个页面切换到另一个页面，这被称为页面导航。
要实现页面导航，需要使用<navigator>标签，该标签允许在当前页面显示另一个页面，也允许显示一个新页面。例如，下面的布局代码中使用了两个<navigator>标签。
<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
page2.wxml
从page1.js和page2.js文件中的代码可以看出，通过onLoad事件的options参数返回传入的参数（title和color），并将这两个参数值赋给title和color变量。
注意：新添加的页面，要在app.json文件的pages中注册，否则无法使用新建立的页面。注册代码如下：
现在点击第一个按钮，会跳转到如图2所示的页面，点击左上角的“返回”按钮，会返回到当前页面。
图2 在另一个页面显示新页面
点击第二个按钮，会跳转到如图3所示的页面，点击左上角的“返回”按钮，会返回到当前页面的上一个页面。
图3 在当前页面显示新页面
对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：
关注 极客起源 公众号，获得更多免费技术视频和文章。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK