在前面的章节尽管介绍了很多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 在当前页面显示新页面
对本文感兴趣,可以加李宁老师微信公众号(unitymarvel):
关注 极客起源 公众号,获得更多免费技术视频和文章。