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 マスター スレーブ構成の全プロセスを記録する

推薦する

CSS トランジションを使用した円形ホバー効果のサンプルコード

この記事では ソースコードのオンラインプレビューとダウンロード今日のチュートリアルでは、円のホバー効...

HTML で点線の境界線を設定する方法

CSSスタイルとHTMLタグ要素を使用するさまざまな HTML タグに点線の境界線を追加するために、...

NodeJS は画像テキスト分割を実現します

この記事では、画像テキストセグメンテーションを実装するためのNodeJSの具体的なコードを参考までに...

Nginx での SSL 証明書のインストールと展開手順の概要

目次問題の説明:インストール手順1. 準備2. サーバーにリモート接続する3. 証明書と秘密鍵ファイ...

HTML マークアップ言語 - フォーム

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

Win32 MySQL 5.7.27 のインストールと設定方法のグラフィックチュートリアル

MySQL 5.7.27のインストールチュートリアルは以下のように記録され、皆さんと共有されています...

Dockerでの接続例外中のエラーを解決する

Docker を初めて使い始めると、通常とは異なる問題に遭遇して、必然的に混乱してしまいます。大丈夫...

MySQLデータを復元する2つの方法

1. はじめに少し前、開発者がテスト環境や本番環境で誤った操作をし、データベースを誤って削除/更新し...

Vueはキャンバスを使用して画像圧縮アップロードを実現します

この記事では、キャンバスを使用して画像圧縮アップロードを実現するVueの具体的なコードを参考までに共...

jsシミュレーションでJingdongの詳細ページで画像を拡大する効果を実現

この記事では、Jingdongの詳細ページの画像の拡大を実現するためのjsの具体的なコードを紹介しま...

MySQL ルートパスワードエラー番号 1045 の解決方法

MySQLサービスを停止するWindowsでは、マイコンピュータを右クリック--管理--サービスと...

Linux に Python 3.8.1 をインストールするための詳細なチュートリアル

この例では、Linux への Python 3.8 のインストールを例に挙げます。 1. 依存パッケ...

DockerにTomcatコンテナを追加したときにホームページにアクセスできない問題の解決方法

質問docker run コマンドを使用して、tomcat コンテナが正常に追加されました。ポートも...

非表示のフォームテキストを表示するJavaScript

この記事では、フォームの隠しテキストを表示するためのJavaScriptの具体的なコードを参考までに...

MySQLが2つのテーブルを関連付ける際のエンコードの問題と解決策

Mysqlが2つのテーブルを関連付けると、次のエラーメッセージが生成されます:照合順序の不正な組み合...