要实现页面导航，需要使用标签，标签可以让您在当前页面内显示另一个页面，也可以让您显示一个新页面。 例如，下面的布局代码中使用了两个标签。

跳转到新页面 在当前页打开 ?

标签有一个非常重要的属性url，用于指定要跳转到的页面以及要传递的值。 此 url 的格式类似于网址。 页面和参数之间用问号（？）分隔。 如果传递多个参数，参数之间用&分隔。 其中 和 是与当前页面位于同一目录中的页面。 第二个标签不仅通过url传递参数，还传递一个参数来设置中文文本的颜色。 这个标签中还指定了一个属性，表示在当前页面中打开一个新页面。 默认是在另一个页面中打开一个新页面。

现在选择当前页面的目录并单击鼠标右键。 将弹出如图 1 所示的菜单。

图1 新建页面

现在创建 4 个新文件：.wxml、.js、.wxml 和 .js。 这4个文件中的代码如下：

.wxml

{{title}} page1.js Page({ onLoad: function(options) { console.log(options) this.setData({ title: options.title }) } })

.wxml

{{title}} page2.js Page({ onLoad: function(options) { console.log(options) this.setData({ title: options.title, color:options.color }) } })

从.js和.js文件中的代码可以看出，(and)传入的参数是通过事件的参数返回的，并将两个参数值赋值给and变量。

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

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

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

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

点击第二个按钮微信开发之小程序的页面布局，会跳转到如图3所示的页面。点击左上角的“返回”按钮，会返回到当前页面的上一页。

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