Explication détaillée des trois formes de sauts de routage dans les mini-programmes WeChat

伊谢尔伦
Libérer: 2017-05-30 09:51:20
original
5292 Les gens l'ont consulté

Programme WeChat MiniRouteJump, il existe trois formulaires. Le composant navigateur est utilisé dans la page pour effectuer le saut d'itinéraire du formulaire de lien de page Dans js, vous pouvez utiliser wx.navigateTo - conserver le. page actuelle et accédez à Pour une page de l'application, wx.redirectTo--fermez la page actuelle et accédez à une page de l'application wx.navigateBack()--fermez la page actuelle et revenez à la page précédente.

Le composant navigateur crée des liens de page

                属性名                 类型                 默认值                 说明
                url                 String                                   应用内的跳转链接
                redirect                 Boolean                 false                 是否关闭当前页面
                hover-class                 String                 navigator-hover                 指定点击时的样式类,当hover-class="none"时,没有点击态效果

Remarque : La valeur par défaut du survol du navigateur est {background-color : rgba(0, 0, 0, 0.1) ; ;}, < La couleur d'arrière-plan des nœuds enfants de ;navigator/> doit être transparente

Exemple de code :

/** wxss **/
/** 修改默认的navigator点击态 **/
.navigator-hover {
    color:blue;
}
/** 自定义其他点击态样式类 **/
.other-navigator-hover {
    color:red;
}
Copier après la connexion
<!-- 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>
Copier après la connexion
<!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到之前页面 </view>
Copier après la connexion
<!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>
Copier après la connexion
// redirect.js navigator.js
Page({
  onLoad: function(options) {
    this.setData({
      title: options.title
    })
  }
})
Copier après la connexion

wx.navigateTo(OBJECT)

Conservez la page actuelle, accédez à une page de l'application et utilisez wx.navigateBack pour revenir à la page d'origine.

Description du paramètre OBJET :

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

示例代码:

wx.navigateTo({
  url: &#39;test?id=1&#39;
})
Copier après la connexion

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

wx.redirectTo(OBJECT)

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

OBJECT参数说明:

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

示例代码:

wx.redirectTo({
  url: &#39;test?id=1&#39;
})
Copier après la connexion

wx.navigateBack()

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


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal