用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序开发实战(19):页面导航

Rolan 2020-8-7 17:22

要实现页面导航,需要使用 标签,该标签允许在当前页面显示另一个页面,也允许显示一个新页面。

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

要实现页面导航,需要使用 标签,该标签允许在当前页面显示另一个页面,也允许显示一个新页面。例如,下面的布局代码中使用了两个 标签。

<view style="margin:30px">
<navigator url="page1?title=跳转到新页面" >
<button >跳转到新页面button>
navigator>
<navigator style="margin-top:20px" url="page2?title=在当前页面打开&color=red" redirect >
<button >在当前页打开button>
navigatorview>

标签有一个非常重要的属性 url ,该属性用于指定要跳转的页面和要传递的值。这个 url 的格式类似于 web 地址。页面和参数之间用问号( ? )分隔,如果传递多个参数,参数之间用 & 分隔。其中 page1 page2 是与当前页面同一个目录下的页面。第二个 标签不仅通过 url 传递了 title 参数,还传递了一个 color 参数,用于设置 page2 中文本的颜色。在这个 标签中还指定了 redirect 属性,表示在当前页面中打开新页面,默认是在另一个页面中打开新页面。

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

图1 新建页面

现在新建 4 个文件: page1.wxml page1.js page2.wxml page2.js 。这 4 个文件中的代码如下:

page1.wxml

<view style="margin:30px">
{{title}}
view>
page1.js
Page({
  onLoad: function(options) {
    console.log(options)
    this.setData({
      title: options.title
    })
  }
})

page2.wxml

<view style="margin:30px">
"color:{{color}}">{{title}}
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  在当前页面显示新页面

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 李宁的极客世界 来自: csdn