Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

WeChat small program navigation navigator


May 18, 2021 WeChat Mini Program Development Document



navigator

Base library 1.0.0 starts to support, and low versions need to be compatible.

Page link.

The property name Type The default Description
target
String self On which target the jump occurs, the default is the current mini-program, optional self/miniProgram
url String Jump link in the application
open-type String navigate Jump mode
delta Number When Open-Type is active when 'navigateback' is 'NaviGateBack', the number of layers that returns
app-id
String
Target = "miniprogram" is valid, the applet to open the appid
path
String
When target = "miniprogram" is valid, open the page path, open the home page if it is empty
extra-data
Object
When Target = "miniprogram" is valid, you need to pass data to the target applet, the target applet is App.onLaunch() App.onShow() This data is obtained in this data.
version
version
release When target = "miniprogram", you want to open the applet version, Valid Value Develop (Development), Trial (Experience Edition), Release (official version), this parameter is only in the current small program as the development or experience versionEffective; if the current applet is a formal version, the open applet must be a formal version.
hover-class String navigator-hover Specify the style class when clicked, hover-class="none" When there is no point of touch
hover-stop-propagation
Boolean
false
Specifies whether to prevent the ancestors from this node from appearing
hover-start-time Number 50 How long after holding down, the unit is in milliseconds.
hover-stay-time Number 600 After the finger is released, click the state retention time, unit milliseconds
bindsuccess
String
Target = "miniprogram" is effective, jump the small program successfully
bindfail
String
Valid when target = "miniprogram", jump small program failed
bindcomplete
String
The jump mini-program is complete when the target is valid for "miniProgram"


Open-type valid value:

Value Description The lowest version
navigate Features wx.navigateTo
redirect Features wx.redirectTo
switchTab The wx.switchTab
reLaunch Features wx.reLaunch 1.1.0
navigateBack Features wx.navigateBack 1.1.0
exit
Exit the small program, target is effective when "miniProgram" is used
2.1.0

Note: navigator-hover {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} <navigator/>

Example code:

/** wxss **/
/** 修改默认的navigator点击态 **/
.navigator-hover {
    color:blue;
}
/** 自定义其他点击态样式类 **/
.other-navigator-hover {
    color:red;
}
<!-- sample.wxml -->
<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
</view>
<!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到之前页面 </view>
<!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>
// redirect.js navigator.js
Page({
  onLoad: function(options) {
    this.setData({
      title: options.title
    })
  }
})