专栏首页小程序之家如何使用小程序导航
原创

如何使用小程序导航

在日常开发小程序中,我们总不能吧所有数据都堆在首页。为此,需要一些二级三级页面。今天,我们来介绍介绍小程序比较重要的导航组件,使用导航组件,可以在小程序内外部进行转跳,方便用户使用。

页面准备

在开始介绍之前,我们首先需要准备一些准备跳转的页面,我这里先创建两个名为tags标签页面和cate目录页面。在小程序项目管理页面,点击pages目录,然后新建目录,创建两个名为tagscate的目录。

1541558491802

接下来,分别在这两个文件中创建两个名为tagscate的页面。当创建完页面,小程序会自动创建.js.wxss.json这几个文件,如果没有自动生成,可能你的小程序开发工具过旧,请自行创建或升级,如图。

1541558748175

同时,请检查你的app.json文件,看看该文件是否已经自动创建了"pages/cate/cate","pages/tags/tags"配置,如果没有请手动自行创建。

1541558845904

接下面,我们打开tags.wxml文件,写入下面的代码。

<text>我是tags页面</text>

然后,再打开cate.wxml文件,写入下面的代码。

<text>我是cate页面</text>

之后保存即可。

体验小程序导航组件

小程序导航是由navigator组件实现的,我们可以使用该组件实现小程序内外的转跳。首先先来看看小程序的官方文档

属性名

类型

默认值

说明

target

String

self

在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram

url

String

当前小程序内的跳转链接

open-type

String

navigate

跳转方式

delta

Number

当 open-type 为 'navigateBack' 时有效,表示回退的层数

app-id

String

当target="miniProgram"时有效,要打开的小程序 appId

path

String

当target="miniProgram"时有效,打开的页面路径,如果为空则打开首页

extra-data

Object

当target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch()App.onShow() 中获取到这份数据。详情

version

version

release

当target="miniProgram"时有效,要打开的小程序版本,有效值 develop(开发版),trial(体验版),release(正式版),仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。

hover-class

String

navigator-hover

指定点击时的样式类,当hover-class="none"时,没有点击态效果

hover-stop-propagation

Boolean

false

指定是否阻止本节点的祖先节点出现点击态

hover-start-time

Number

50

按住后多久出现点击态,单位毫秒

hover-stay-time

Number

600

手指松开后点击态保留时间,单位毫秒

bindsuccess

String

当target="miniProgram"时有效,跳转小程序成功

bindfail

String

当target="miniProgram"时有效,跳转小程序失败

bindcomplete

String

当target="miniProgram"时有效,跳转小程序完成

小程序内转跳

通过表格,我们可以看到,如果我们想实现转跳到小程序的某个页面,只需要使用该页面的url地址即可,比如我想转跳到tagscate页面,只需要在index.wxml文件中加入下面的代码即可。

<navigator url="/pages/cate/cate">跳转到cate</navigator>
<navigator url="/pages/tags/tags">跳转到tags</navigator>
1541559679522

配合其他组件使用

通过点击跳转到cate按钮即可转跳到cate页面。当然,navigator组件内,你也可以使用其他组件,比如我们想将这两个转跳变为按钮,那可以尝试下面的代码。

<navigator url="/pages/cate/cate"><button type="primary">跳转到cate</button></navigator>
<navigator url="/pages/tags/tags"><button type="warn">跳转到tags</button></navigator>
1541560327391

使用路由API

navigator组件还可以使用open-type来调用路由API来实现不同的功能,具体参数详见下表。

open-type 有效值:

说明

navigate

对应 wx.navigateTowx.navigateToMiniProgram 的功能

redirect

对应 wx.redirectTo 的功能

switchTab

对应 wx.switchTab 的功能

reLaunch

对应 wx.reLaunch 的功能

navigateBack

对应 wx.navigateBack 的功能

exit

退出小程序,target="miniProgram"时生效

比如我们想实现打开新的页面后,关闭当前页面功能,那么就可以使用wx.redirectToAPI,调用的代码如下。

<navigator open-type="redirect" url="/pages/cate/cate"><button type="primary">跳转到cate</button></navigator>
<navigator url="/pages/tags/tags"><button type="warn">跳转到tags</button></navigator>

现在,点击跳转到cate跳转到tags看看有什么区别?

1541560824984

cate的返回按钮怎么没有了?我们先看看路由API的文档。

API

说明

关闭当前页面,返回上一页面或多级页面

保留当前页面,跳转到应用内的某个页面

关闭当前页面,跳转到应用内的某个页面

关闭所有页面,打开到应用内的某个页面

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

原来,open-type="redirect"这段代码调用了wx.redirectToAPI,该API的作用是“关闭当前页面,跳转到应用内的某个页面”,我们的index.wxml文件被关闭了,当然无法返回。

小程序外转跳

你也可以使用组件转跳到其他小程序,很简单,使用下面的代码即可事项。

<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
1541561325136

值得注意的是,app-id=""一定要填你绑定的微信小程序的appid其他可以不填。从 2.4.0 版本开始,开发者提交新版小程序代码时,如使用了跳转其他小程序功能,则需要在代码配置中声明将要跳转的小程序名单,限定不超过 10 个,否则将无法通过审核。该名单可在发布新版时更新,不支持动态修改。配置方法详见 配置。调用此接口时,所跳转的 appId 必须在配置列表中,否则回调 fail appId "${appId}" is not in navigateToMiniProgramAppIdList

插件跳转

小程序还提供了一个functional-page-navigator组件,用于跳转到插件功能页。插件需要调用接口,本文暂不涉及,暂不演示。

总结

这篇教程中,我们介绍了小程序导航组件的使用,你学会了嘛?赶快多写几个页面进行尝试吧!后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本专栏。腾讯云联合小程序给大家带来了小程序·云开发解决方案,为开发者提供完整的云端支持,弱化后端和运维操作,使用平台原生 API 进行核心业务开发,实现快速上线和迭代。欢迎免费使用!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序|配置文本框样式、排版及点击页面跳转

    我们在使用一个小程序时,总是会看到页面给出你不同的选择文本框,而你需要单击文本框跳转到你需要了解的内容页面中去。因此,如何美化这些文本框以及如何配置页面跳转是我...

    算法与编程之美
  • 怎样判断漂亮女孩是不是单身的?

    不解风情的死理性派们在情感生活中不免会遇到这样悲催的一幕:偶然间遇到一位心仪的漂亮女孩,从此日思夜想,废寝忘食,开始了漫长的暗恋之旅。

    数据派THU
  • ajax的再次封装!

    js的动态加载、缓存、更新以及复用 系列有点卡文,放心会继续的。先来点更基础的,为js的加载做点铺垫。   jQuery的ajax本来就很方便了,为啥还要在进一...

    用户1174620
  • react-navigation 去除导航阴影

    iOS 是通过设置 borderBottomWidth borderBottomColor 来实现的 可以看出iOS 中将 borderBottomWidth...

    onety码生
  • 金融科技的独角戏

    当人们告别互联网金融落幕时的恐慌,一场有关金融科技的重新审视开始出现。可以确定的是,金融科技并不会像互联网金融那样,人们都可以参与,颇强的金融属性注定了它有可能...

    孟永辉
  • 老焦专栏 | 为什么需要用业务补偿服务和TCC 型服务实现数据一致性

    分布式事务解决的问题很明确,就是在服务分布在不同进程、数据分布在不同数据库时,如何解决数据一致性问题。对于这个问题,业界的共识是不要启用数据库 XA 模式,因为...

    yuanyi928
  • 金融科技:是一种成果,更是一种必然

    孟永辉
  • 如果穿越回20岁的自己,你打算做什么帮助自己成长

    疫情这几个月来,每天坚持读一到两本书,坚持输出一到两篇文章。现在疫情差不多结束,下周也要全面复工了,能够用来读书的时间又要变少了。但我给自己定了个目标,每天确保...

    致码DevOps
  • Git系列之查看提交历史

    本节来说下Git 的提交历史,在日常开发中我们每天都在提交自己的更新代码之仓库,那么作为管理人员或者自己如何来查看提交了哪些呢?

    申霖
  • electron实现qq快捷登录!

    之前本来想不写这个功能的,结果客户死活要qq登录! 实在没办法就写了,顺便写个文章! 在写之前有两个问题: 1: 打开qq授权页面点击页面中的链接会又打开一个页...

    前端博客 : alili.tech

扫码关注云+社区

领取腾讯云代金券