Wechat アプレットページのナビゲーション、パラメーターの受け渡し、パラメーターの受け取り

ページナビゲーションは、ページ間の相互ジャンプを指します. WeChat アプレットでは、ページナビゲーションは次の 2 つのタイプに分けられます。

1. 宣言型ナビゲーション:

ページで <navigator> ナビゲーションコンポーネントを宣言する

<navigator> ナビゲーションコンポーネントをクリックして、ページにジャンプします。

例: <navigator> コンポーネントを使用して tabBar ページにジャンプする方法

<navigator> コンポーネントを使用して tabBar ページにジャンプする場合、urlおよびopen-type属性を指定する必要があります

url は、リダイレクトするページのアドレスを示します。このアドレスは/で始まる必要があります
open-type はジャンプの方法を示します。それはswitchTabでなければなりません

<navigator url="/pages/message/message"
open-type="switchTab">导航到首页</navigator>

例: <navigator> コンポーネントを使用して、tabBar 以外のページにジャンプする方法

非 tabBar ページは、tabBar ノードで構成されていないページを参照します。

tabBar ページへのジャンプとの唯一の違いは、open-type をナビゲートする必要があることです。

<navigator url="/pages/info/info"
open-type="navigate">导航到信息</navigator>

注: 便宜上、tabBar 以外のページにジャンプするときは open-type を省略できます。

また、戻るナビゲーションと呼ばれるナビゲーションの一種もあり、前のレベルまたは複数レベルのページに戻るには、open-type および delta 属性を指定する必要があります。

open-type は、navigateBack として指定する必要があります。これは、戻るナビゲーションを意味します。
delta は、戻る系列の数を示す整数です

<navigator open-type="navigateBack" delta="1">后退</navigator>

注: 便宜上、前のページに戻るだけの場合は、デルタを省略できます。デフォルトは 1 です。

2. プログラムによるナビゲーション:

アプレットのナビゲーションAPIを呼び出してページジャンプを実現

例: プログラムナビゲーションを使用して tabBar ページに移動する方法

wxml ページで

<button bindtap="gotoMessage">编程式跳转tab</button>

対応する js ファイルは wx.switchTab を呼び出します。

gotoMessage(){
    wx.switchTab({
      url: '/pages/message/message',
    })
  }

例: プログラムナビゲーションを使用して、tabBar 以外のページに移動する方法は?

wx.navigateTo(Object object) を呼び出して、tabBar 以外のページにジャンプします

wxml ファイルで

<button bindtap="gotoMessageNoTab">编程式跳转非tab</button>

対応する .js ファイル:

gotoMessageNoTab(){
    wx.navigateTo({
      url: '/pages/info/info',
    })
  }

プログラムによるナビゲーションは、wx.navicateBack(Object object) を呼び出して戻るナビゲーションを実行します。前のページまたは複数レベルのページに戻ることができます。デルタを指定する必要があります。デフォルトは 1 です。比較的単純です。コードを貼り付けないでください。ここ。

3. ページを使用してパラメーターを送受信する方法

宣言的なナビゲーションパラメータの受け渡し

パラメータは <naviator> の URL で運ぶことができます

パラメータとパスの間で使用しますか? 間隔
Use = パラメータキー間の接続
& 記号を使用して、異なるパラメータを接続します

<navigator url="/pages/info/info?name=啊宝&age=23"
open-type="navigate">导航到信息</navigator>

情報ページの .js ファイルで、オプションを使用してパラメーターを受け取ります

  onLoad(options) {
    console.log(options)
    this.setData({
      query:options
    })
  }

プログラムによるナビゲーションパラメータの受け渡し

gotoMessageNoTab(){
    wx.navigateTo({
      url: '/pages/info/info?name=三大爷&age=50',
    })
  }

パラメータの受け取り方法は上記と同じ

ご不明な点がございましたら、以下にメッセージを残してください。