WeChat ミニ プログラム ページのナビゲーション

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

1.1 宣言型ジャンプタブページ

1.1.1 設定済みタブページ

 

 1.1.2 ページジャンプ書き込み

<navigator url="/pages/home/home" open-type="switchTab">跳转首页</navigator>

 1.2.3 ページ表示

 

 

1.2 非タブページへの宣言的ジャンプ

1.2.1 ページジャンプコード

<navigator url="/pages/info/info" open-type="navigate">跳转非tab页面</navigator>

実際、デフォルトのジャンプは非タブ ページであり、次のように省略できます。

<navigator url="/pages/info/info">跳转非tab页面</navigator>

1.2.2 画像表示

 

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

<navigator url="/pages/info/info?name=forever&age=18">跳转非tab页面</navigator>

注:ジャンプ タブ ページではパラメータを渡すことはできませんが、非タブ ページではパラメータを渡すことができます, WeChat 開発の左下隅!

 

 またはジャンプ後のページで

1.4 戻るナビゲーション

<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

説明: デルタ コードによってサポートされるレイヤーの数。デフォルトは 1 です。複数のレイヤーを指定する場合は、番号を直接入力するだけです。

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

2.1 プログラムでタブページにジャンプする

2.1.1wxml

<view bindtap="change1">编程式导航1跳转Tab页面</view>

 2.1.2.jsファイル

  change1(){
wx.switchTab({
//路径
  url: '/pages/home/home',  
 //成功的回调函数
  success:(res)=>{   
console.log(res);
  },
   //失败的回调函数
  fail:(error)=>{      
    console.log(error);
  }
})
  },

2.2 プログラムでタブ以外のページにジャンプする

2.2.1wxmlファイル

<view bindtap="change2">编程式导航1跳转非Tab页面</view>

2.2.2jsファイル

  change2(){
    wx.navigateTo({
      url: '/pages/info/info',
      success:(res)=>{
        console.log(res);
      },
      fail:(error)=>{
        console.log(error);
      }
    })
  },

2.3 プログラムによるパラメータの受け渡し

2.3.1.jsファイル

  change2(){
    wx.navigateTo({
      url: '/pages/info/info?name=forever&age=18',
      success:(res)=>{
        console.log(res);
      },
      fail:(error)=>{
        console.log(error);
      }
    })
  },

注: パラメータをタブ ページに渡すことはまだできません。

2.4 戻るナビゲーション

2.4.1 wxmlファイル

<button bindtap="change1">编程式返回上一级</button>

2.4.2jsファイル

  change1(){
    wx.navigateBack({
      delta:2
    })
  },

3. ソースコードの一部表示

3.1wxmlファイル

<!--pages/message/message.wxml-->
<!-- 声明式导航 -->
<!-- 跳转tab页面 -->
<navigator url="/pages/home/home" open-type="switchTab">跳转tab页面</navigator>
<!-- 跳转非tab页面 -->
<!-- navigate默认可以不用写 -->
<navigator url="/pages/info/info?name=forever&age=18">跳转非tab页面</navigator>
<!-- delta默认值为1 -->

<!-- 编程式导航 -->
<view bindtap="change1">编程式导航1跳转Tab页面</view>
<view bindtap="change2">编程式导航2跳转非Tab页面</view>

3.2.jsファイル

  change1(){
wx.switchTab({
  url: '/pages/home/home?name=forever&age=18',
  success:(res)=>{
console.log(res);
  },
  fail:(error)=>{
    console.log(error);
  }
})
  },
  change2(){
    wx.navigateTo({
      url: '/pages/info/info?name=forever&age=18',
      success:(res)=>{
        console.log(res);
      },
      fail:(error)=>{
        console.log(error);
      }
    })
  },