×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：navigator页面导航

navigator 页面导航

解释：页面链接，控制小程序的跳转，既可在当前小程序内部进行跳转，也可跳转至其他小程序。navigator的子节点背景色应为透明色。

属性说明

属性名 类型 默认值 必填 说明 最低版本

target

String

self

否

在哪个目标上发生跳转，默认当前小程序，有效值 self/miniProgram

2.5.2
低版本请做兼容性处理

url

String

否

应用内的跳转链接

 -

open-type

String

navigate

否

跳转方式

 -

delta

Number

否

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

 -

app-id

String

否

当target=”miniProgram”时有效，要打开的小程序 App Key (小程序后台设置-开发设置中)

2.5.2
低版本请做兼容性处理

path

String

否

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

2.5.2
低版本请做兼容性处理

extra-data

Object

否

当target=”miniProgram”时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch、App.onShow 中获取到这份数据

2.5.2
低版本请做兼容性处理

version

String

release

否

当target=”miniProgram”时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版

2.5.2
低版本请做兼容性处理

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”时有效，跳转小程序成功

2.5.2
低版本请做兼容性处理

bindfail

String

否

当target=”miniProgram”时有效，跳转小程序失败

2.5.2
低版本请做兼容性处理

bindcomplete

String

否

当target=”miniProgram”时有效，跳转小程序完成

2.5.2
低版本请做兼容性处理

target 有效值

值 说明
self 当前小程序
miniProgram 跳转到另一个小程序

version 有效值

值 说明
develop 开发版
trial 体验版
release 正式版

open-type 有效值

值 说明 最低版本

navigate

保留当前页面，跳转到应用内的某个页面，但是不能跳转到 tabbar 页面。对应 swan.navigateTo 的功能

redirect

关闭当前页面，跳转到应用内的某个页面。对应 swan.redirectTo 的功能

switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。对应 swan.switchTab 的功能

navigateBack

关闭当前页面，返回上一页面或多级页面。对应 swan.navigateBack 的功能

reLaunch

关闭所有页面，打开到应用内的某个页面。对应 swan.reLaunch 的功能

exit

退出小程序，target=”miniProgram”时生效

2.5.2

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  
    5.   
  
  
  5.  target="self" 
    6.   
  
  
  6.  open-type="navigate" 
    7.   
  
  
  7.  url="/component/detail/detail?id=新页面,点击左上角返回回到之前页面"
    8.   
  
  
  8.  hover-class="navigator-hover" 
    9.   
  
  
  9.  hover-start-time="50"
    10.   
  
  
  10.  hover-stay-time="600"
    11.   
  
  
  11.  hover-stop-propagation="true">
    12.   
  
  
  12.  跳转到新页面
    13.   
  
  
  13.  
    14.   
  
  
  14.  
    15.   
  
  
  15.  
    16.   
  
  
  16.  
    17.   
  
  
  17.  s-if="{{!isWeb}}" 
    18.   
  
  
  18.  target="self" 
    19.   
  
  
  19.  open-type="redirect" 
    20.   
  
  
  20.  url="/component/detail/detail?id=当前页,点击左上角返回回到上级菜单" 
    21.   
  
  
  21.  hover-class="navigator-hover" 
    22.   
  
  
  22.  hover-start-time="50"
    23.   
  
  
  23.  hover-stay-time="600"
    24.   
  
  
  24.  hover-stop-propagation="true">
    25.   
  
  
  25.  在当前页打开
    26.   
  
  
  26.  
    27.   
  
  
  27.  
    28.   
  
  
    29.   
  
  
  29.  
    30.   
  
  
  30.  
    31.   
  
  
  31.  s-if="{{!isWeb}}" 
    32.   
  
  
  32.  target="self" 
    33.   
  
  
  33.  open-type="navigateBack" 
    34.   
  
  
  34.  hover-class="navigator-hover" 
    35.   
  
  
  35.  hover-start-time="50"
    36.   
  
  
  36.  hover-stay-time="600"
    37.   
  
  
  37.  hover-stop-propagation="true"
    38.   
  
  
  38.  delta="1">
    39.   
  
  
  39.  返回上一页面
    40.   
  
  
  40.  
    41.   
  
  
  41.  
    42.   
  
  
    43.   
  
  
  43.  
    44.   
  
  
  44.  
    45.   
  
  
  45.  s-if="{{!isWeb}}" 
    46.   
  
  
  46.  target="miniProgram" 
    47.   
  
  
  47.  open-type="exit">
    48.   
  
  
  48.  退出当前小程序
    49.   
  
  
  49.  
    50.   
  
  
  50.  
    51.   
  
  
    52.   
  
  
  52.  
    53.   
  
  
  53.  
    54.   
  
  
  54.  target="self" 
    55.   
  
  
  55.  open-type="switchTab" 
    56.   
  
  
  56.  url="/entry/component/component">
    57.   
  
  
  57.  打开一个有Tab的页面
    58.   
  
  
  58.  
    59.   
  
  
  59.  
    60.   
  
  
    61.   
  
  
  61.  
    62.   
  
  
  62.  
    63.   
  
  
  63.  target="self" 
    64.   
  
  
  64.  open-type="reLaunch" 
    65.   
  
  
  65.  url="/component/detail/detail?id=新页面,点击左上角返回回到上级菜单">
    66.   
  
  
  66.  关闭所有页面打开新页面
    67.   
  
  
  67.  
    68.   
  
  
  68.  
    69.   
  
  
    70.   
  
  
  70.  
    71.   
  
  
  71.  
    72.   
  
  
  72.  target="miniProgram" 
    73.   
  
  
  73.  s-if="{{!isWeb}}" 
    74.   
  
  
  74.  open-type="navigate" 
    75.   
  
  
  75.  extra-data="extra-data" 
    76.   
  
  
  76.  app-id="79RKhZ2BTvyyHitg4W3Xle4kkFgwwXyp" 
    77.   
  
  
  77.  version="release" 
    78.   
  
  
  78.  bindsuccess="successHandler" 
    79.   
  
  
  79.  bindfail="failHandler" 
    80.   
  
  
  80.  bindcomplete="completeHandler">
    81.   
  
  
  81.  打开绑定的小程序
    82.   
  
  
  82.  
    83.   
  
  
  83.  
    84.   
  
  
  84.  
    85.   
  
  
    86.

说明

navigator-hover默认为：

 
 
 
    
  
  
  
  1. {
    2.   
  
  
  2.  background-color: rgba(0, 0, 0, 0.1);
    3.   
  
  
  3.  opacity: 0.7;
    4.   
  
  
  4. }
    5.

常见问题

Q：请问下如何关闭小程序？

A：可以通过组件进行关闭当前小程序的操作。

代码示例

  • SWAN
 
 
 
    
  
  
  
    2.   
  
  
  2.  退出当前小程序
    3.   
  
  
    4.

标题名称：创新互联百度小程序教程：navigator页面导航
文章转载：http://cdbrznjsb.com/article/dpgogce.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务