WeChatアプレット学習ノート: ページ構成とルーティング

WeChatアプレット学習ノート: ページ構成とルーティング

最近、小さなプログラムの開発を勉強して見直しており、学習結果のいくつかをメモしています。公式の WeChat ミニプログラムのドキュメントを参照してください: developer.weixin.qq.com/miniprogram…

1. ミニプログラムの構成

1. グローバル構成

ミニプログラムのルート ディレクトリにある app.json ファイルは、WeChat ミニプログラムをグローバルに構成したり、ページ ファイルのパスやウィンドウのパフォーマンスを決定したり、ネットワーク タイムアウトを設定したり、複数のタブを設定したりするために使用されます。

// 例 {
  「ページ」: [
    「ページ/インデックス/インデックス」、
    「ページ/ログ/インデックス」
  ]、
  「ウィンドウ」: {
    "navigationBarTitleText": "デモ"
  },
  "タブバー": {
    「リスト」: [{
      "ページパス": "ページ/インデックス/インデックス",
      "テキスト": "ホーム"
    }, {
      "ページパス": "ページ/ログ/インデックス",
      "text": "ログ"
    }]
  },
  "ネットワークタイムアウト": {
    「リクエスト」: 10000,
    「ダウンロードファイル」: 10000
  },
  「デバッグ」: true
}

2. ページ構成

各ミニプログラム ページでは、同じ名前の .json ファイルを使用して、このページのウィンドウ パフォーマンスを構成することもできます。ページ内の構成項目は、app.json のウィンドウ内の同じ構成項目を上書きします。

// 例 {
  "ナビゲーションバーの背景色": "#ffffff",
  "ナビゲーションバーのテキストスタイル": "黒",
  "navigationBarTitleText": "WeChat API 関数のデモンストレーション",
  "背景色": "#eeeeee",
  "backgroundTextStyle": "light"
}

3. サイトマップの設定

注: サイトマップ インデックス プロンプトはデフォルトで有効になっています。サイトマップ インデックス プロンプトをオフにする必要がある場合は、ミニ プログラム プロジェクト構成ファイル project.config.json の設定で checkSiteMap フィールドを false に構成できます。

ミニプログラムのルート ディレクトリにある sitemap.json ファイルは、ミニプログラムとそのページを WeChat でインデックス化できるかどうかを構成するために使用されます。

WeChat でインデックスするかどうかを設定するには、次の 2 つの方法があります。

1. ページインデックス設定:ミニプログラム全体のインデックス、ミニプログラム管理の背景 - 機能 - ページコンテンツアクセス - ページインデックススイッチを閉じることができます。

2. サイトマップの設定: 特定のページのインデックスを閉じることができます。

// すべてのページはWeChatによってインデックスされます(デフォルト)
{
    「ルール」:[{
        "アクション":"許可",
        "ページ":"*"
    }]
}
// パス/ページへのページはインデックス化されていませんが、残りはインデックス化されます {
    「ルール」:[{
        "アクション":"許可しない",
        "page":"ページへのパス"
    }]
}

2. ミニプログラムの5つのルート

1. wx.navigateTo()

現在のページを保持し、アプリ内のページにジャンプします。タブバーページにジャンプできません。ミニプログラム内のページスタックは最大 10 レベルの深さまで可能です。10 レベルを超える場合は、wx.redirectTo を使用してジャンプできます。

wx.navigateTo({
    url:"リスト?id=2",
    イベント:{
        //ページ間通信インターフェース。開いているページから現在のページに送信されるデータを監視するために使用されます。
        someEvent:関数(データ){
            コンソール.log(データ)
        }
    },
    成功:function(res){
        // 開かれたページにeventChannelを介してデータを送信します res.evnetChannel.emit('someEvent',{dta:'list'})
    }
})

2. wx.redirectTo()

現在のページを閉じて、アプリ内のページに移動します。ただし、タブバーページにジャンプすることはできません。

// 例 wx.redirectTo({
    url:'リスト?id=2',
    成功:function(){},
    失敗:関数(){}
})

3. wx.switchTab()

tabBar ページに移動し、tabBar 以外のページをすべて閉じます。

wx.switchTab({
    url:'/index'
})

4. wx.navigateBack()

現在のページを閉じて、前のページまたは複数のページに戻ります。 getCurrentPages を使用すると、現在のページ スタックを取得し、返すレベルの数を決定できます。

// これはページAです wx.navigateTo({
  url: 'B?id=1'
})

// これはページBです wx.navigateTo({
  url: 'C?id=1'
})

// ページ C の NavigateBack はページ A に戻ります wx.navigateBack({
  デルタ: 2
})

5. wx.reLaunch()

すべてのページを閉じて、アプリでページを開きます。

//例 wx.reLaunch({
    url:'リスト?id=2'
})

注: また、ジャンプに関連する Web ビューのページからミニ プログラムに戻るにはどうすればよいですか?

wx.miniPrograme.navigateTo({
    url:'pages/login/login'+'params'
})
// ミニプログラムのナビゲーションページにジャンプします wx.miniPrograme.switchTab({
    url:"/pages/index/index"
})

要約する

WeChatミニプログラムの学習ノートのページ構成とルーティング方法についての記事はこれで終わりです。ミニプログラムのページ構成とルーティング方法についてのより関連性の高いコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Android開発WeChatアプレットルーティングジャンプ方法
  • WeChatアプレットシングルページアプリケーションルーティングを徹底的に理解するための10分
  • ミニプログラムのカプセル化ルーティング ファイルとルーティング方法 (5 つの完全な分析)
  • WeChatアプレット開発ルーティング切り替えページリダイレクトの問題
  • WeChatアプレットルーティングジャンプ2つの方法の例の分析

<<:  Ubuntu 14 に Nginx-RTMP ストリーミング サーバーをインストールするチュートリアル

>>:  Linux ベースの MySQL マスター スレーブ構成の全プロセスを記録する

推薦する

Mysql GTID Mha 設定方法

Gtid + Mha + Binlog サーバー構成: 1: テスト環境OS: CentOS 6.5...

CSS 境界線の半分または部分的に表示される実装コード

1. 疑似クラスを使用して境界線の半分を表示する <!DOCTYPE html> <...

マークアップ言語 - テキストの CSS スタイルを指定する

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

MySQL シリーズ 6 のユーザーと認証

目次チュートリアルシリーズ1. ユーザー管理1. ユーザーアカウント2. アカウントの追加と削除3....

Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策

Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...

MySQL SHOW STATUSステートメントの使用

MySQL のパフォーマンス調整とサービス ステータスの監視を行うには、MySQL の現在の実行状態...

docker で golang イメージに基づいて ssh サービスを構築する方法

以下は、docker の golang イメージに基づいて ssh サービスを構築するためのコードで...

HTML フォーム送信アクションと URL ジャンプアクションの違い

フォームのアクションは URL ジャンプとは異なります。フォームはバックグラウンドにデータを渡すこと...

LinuxのCentos7でmysql5.7.29を構築する詳細なプロセス

1. MySQLをダウンロードする1.1 ダウンロードアドレスhttps://downloads.m...

jsプロキシの原理の詳細な説明

目次プロキシモードとは何ですか?実例を紹介例を使ってプロキシモデルの定義を理解するプロキシとはget...

uniapp プロジェクトをデスクトップ アプリケーションとしてパッケージ化する方法

Electronのインストール cnpm 電子をインストール -g electron-package...

Vue 親子コンポーネントの相互値の転送と呼び出し

目次1. 親が子コンポーネントに値を渡す2. 子コンポーネントが親コンポーネントに値を渡す3. 子コ...

Vue における LocalStorage と SessionStorage の違いと使い方

目次LocalStorageとはSessionStorageとはLocalStorage と Ses...

Docker を使用した Hadoop クラスターのデプロイに関する詳細なチュートリアル

最近、社内に Hadoop テスト クラスターを構築したいので、docker を使用して Hadoo...

Vueコンポーネントの詳細な説明

<本文> <div id="ルート"> <h2&...