ホームページ  >  記事  >  WeChat アプレット  >  WeChat ミニ プログラムの 3 つの形式のルーティング ジャンプの詳細な説明

WeChat ミニ プログラムの 3 つの形式のルーティング ジャンプの詳細な説明

伊谢尔伦
伊谢尔伦オリジナル
2017-05-30 09:51:205235ブラウズ

WeChat ミニ プログラムRouteJump には 3 つのフォームがあり、ページ リンク フォームのルーティング ジャンプを行うためにページ内で navigator コンポーネントが使用されます。js では、wx.navigateTo を使用して、現在のページを保持してジャンプできます。 、 wx.redirectTo -- 現在のページを閉じて、アプリケーション内のページにジャンプします。 wx.navigateBack() -- 現在のページを閉じて、前のページに戻ります。

navigatorコンポーネントはページリンクを作成します

url リダイレクト ホバークラス 注: navigator-hover のデフォルトは {background-color: rgba(0, 0, 0, 0.1); です。 opacity : 0.7;}, 0e1e9be57d3815196e4c83d329f1e05f の子ノードの背景色は透明である必要があります
と入力してください デフォルト値 説明
String アプリ内のジャンプリンク
ブール値 false 現在のページを閉じるかどうか
文字列 ナビゲーターホバー クリック時のスタイルクラスを指定します。 hover-class="none" の場合、クリック状態の効果はありません

サンプルコード:

/** 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>
rree
<!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到之前页面 </view>
<!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>

wx.navigateTo(OBJECT)

現在のページを保持し、次のページにジャンプしますアプリケーションの場合は、wx.navigateBack を使用して元のページに戻ります。

OBJECTパラメータの説明:

パラメータ URL 成功 機能 機能
と入力してください 必須 説明
文字列 はい ジャンプする必要があるアプリ内ページへのパス
機能 いいえ 使用 インターフェイスはコールバック関数を正常に呼び出しました 失敗します
いいえ インターフェース呼び出し失敗時のコールバック関数 完了しました
いいえ インターフェイス呼び出しの終了時のコールバック関数 (呼び出しが成功または失敗した場合に実行されます)

示例代码:

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()

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


以上がWeChat ミニ プログラムの 3 つの形式のルーティング ジャンプの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。