WeChat アプレットの例: 4 つのページジャンプメソッド (コード付き)-ミニプログラム開発-php.cn

WeChat アプレットの例: 4 つのページジャンプメソッド (コード付き)

不言

リリース： 2018-08-16 16:13:25

オリジナル

15543 人が閲覧しました

この記事では、WeChat アプレットの 4 つのページジャンプ方法 (コード付き) を紹介します。必要な方は参考にしてください。

使用法: ページジャンプに使用され、HTML のタグに相当します。
API チュートリアル: https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html
https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui- navigate.html

4つのジャンプメソッド、テスト用にインデックスにコードを書きます

1: ホームページからログページにジャンプします(戻ることができます)

(下部ナビゲーションを設定せずに、この属性はタブなしで使用することもできます。タブページがある場合は、switchTab 属性を置き換える必要があります)

<view>
    <navigator  url="/pages/logs/logs" hover-class="changestyle">页面跳转，可以返回</navigator>
</view>

ログイン後にコピー

2: ホームページからログページにジャンプします (戻ることはできません)

(あることに注意してください)下部ナビゲーションが設定されていません) タブがない場合は、この属性も使用できます。タブページがある場合は、switchTab 属性を置き換える必要があります)

<view>
    <navigator  url="/pages/logs/logs" hover-class="changestyle" redirect>页面跳转，无法返回</navigator>
</view>

ログイン後にコピー

3: 現在のページで

を開きます。ページで新しいフォルダーを作成し、 no という名前を付け、内部の wxml テスト情報を改善します。テストを容易にするために、内容を自由に入力します

<view class="btn-area">  
   <navigator url="/pages/test/test" hover-class="navigator-hover">我是一个自由分散的页面哦</navigator>  
 </view>

ログイン後にコピー

グローバル app.json ファイルを開いて、新しく作成したフォルダー no

次に、ホームページ上のリンクから開くテストをしたいと思います。リンクをクリックします。つまり、現在のホームページでは no ページを開くことができます

4: ta ページに切り替えます:

代码
<view>
<navigator url="/pages/logs/logs" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
</view>

ログイン後にコピー

注: ここで使用するジャンプは、navigator ではなく switchTab ジャンプです

理由: すべてのページパスが必要です。通常、ページの下の tabBar には 4 つのメインページが設定されており、これらのメインページ間のジャンプはタブの切り替えに似ています。これらのページは tabBar で個別に設定する必要があります。通常のページからこれら 4 つのメインページにジャンプする場合、Navigator は使用できず、switchTab が必要です。

経験の要約: TabBar のリスト項目の pagePath を構成するときは、それを他のページへのジャンプリンクとして使用しないようにしてください。