ホームページ >WeChat アプレット >ミニプログラム開発 >WeChat ミニ プログラムの 3 つの形式のルーティング ジャンプの詳細な説明
WeChat ミニ プログラムRouteJump には 3 つのフォームがあり、ページ リンク フォームのルーティング ジャンプを行うためにページ内で navigator コンポーネントが使用されます。js では、wx.navigateTo を使用して、現在のページを保持してジャンプできます。 、 wx.redirectTo -- 現在のページを閉じて、アプリケーション内のページにジャンプします。 wx.navigateBack() -- 現在のページを閉じて、前のページに戻ります。
navigatorコンポーネントはページリンクを作成します
。 | と入力してください デフォルト値 | 説明 | |
---|---|---|---|
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パラメータの説明:
と入力してください 必須 | 説明 | ||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
文字列 | はい | ジャンプする必要があるアプリ内ページへのパス | |||||||||||||||||||||
機能 | いいえ 使用 インターフェイスはコールバック関数を正常に呼び出しました | 失敗します | |||||||||||||||||||||
いいえ | インターフェース呼び出し失敗時のコールバック関数 | 完了しました | |||||||||||||||||||||
いいえ | インターフェイス呼び出しの終了時のコールバック関数 (呼び出しが成功または失敗した場合に実行されます) |
示例代码: wx.navigateTo({ url: 'test?id=1' }) 注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。 wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面。 OBJECT参数说明:
示例代码: wx.redirectTo({ url: 'test?id=1' }) wx.navigateBack() 关闭当前页面,回退前一页面。 |
以上がWeChat ミニ プログラムの 3 つの形式のルーティング ジャンプの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。