Home  >  Article  >  WeChat Applet  >  Detailed explanation of the three forms of routing jumps in WeChat mini programs

Detailed explanation of the three forms of routing jumps in WeChat mini programs

伊谢尔伦
伊谢尔伦Original
2017-05-30 09:51:205277browse

WeChat Mini ProgramRoutingJump, there are three forms. The navigator component is used in the page to do the page link form routing jump. In js, you can use wx.navigateTo--retain the current page and jump to For a page within the application, wx.redirectTo--close the current page and jump to a page within the application. wx.navigateBack()--close the current page and go back to the previous page.

Navigator component makes page link

url           redirect hover-classNote: navigator-hover defaults to {background-color: rgba( 0, 0, 0, 0.1); opacity: 0.7;}, The background color of the child node of 0e1e9be57d3815196e4c83d329f1e05f should be transparent
                                                                                  ’s ’ s ’ s                 ‐ ‐ ‐ ‐ ‐ ​ ​ ​ ​ type default value illustrate
              String                           Jump link within the application
            Boolean           false           Whether to close the current page
            String           navigator-hover           Specify the style class when clicked. When hover-class="none", there is no click state effect

Sample code:

/** wxss **/
/** 修改默认的navigator点击态 **/
.navigator-hover {
    color:blue;
}
/** 自定义其他点击态样式类 **/
.other-navigator-hover {
    color:red;
}
<!-- sample.wxml -->
<view class="btn-area">
  <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开(关闭了当前页面)</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
    })
  }
})

wx.navigateTo( OBJECT)

Keep the current page, jump to a page in the application, and use wx.navigateBack to return to the original page.

OBJECT parameter description:

            Parameter url           success Callback function for interface call failure The callback function at the end of the interface call (will be executed if the call is successful or failed)
          type Required           illustrate
            String           yes The path to the page within the application that needs to be jumped
          Function             Yes fail           Function             no
complete             Function             no

示例代码:

wx.navigateTo({
  url: &#39;test?id=1&#39;
})

注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。

wx.redirectTo(OBJECT)

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

OBJECT参数说明:

参数 类型 必填 说明
url String 需要跳转的应用内页面的路径
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.redirectTo({
  url: &#39;test?id=1&#39;
})

wx.navigateBack()

关闭当前页面,回退前一页面。


The above is the detailed content of Detailed explanation of the three forms of routing jumps in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn