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

推薦する

Vue Router の 10 の高度なヒントのまとめ

序文Vue Router は、Vue.js の公式ルーティング マネージャーです。 Vue.js の...

MySQLの基本操作を詳しく解説(第2部)

序文この記事には1. データベースのいくつかの主要な制約2. テーブル間の関係制約:主キー制約: 機...

MySQL 5.7.21 解凍版インストール Navicat データベース操作ツールインストール

MySQL解凍版とNavicatデータベース操作ツールのインストールは、以下のとおりです。 1. M...

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

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

グリッドはページのレイアウトプランです

<br /> 英語原文: http://desktoppub.about.com/od/...

Linux に MySQL 8.0.19 をインストールするための詳細な手順と問題解決方法

最近Tencent Cloudサーバーを購入し、環境を構築しました。このメモは、これまで MySQL...

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

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

共有サイドバーを実装するためのネイティブJS

この記事では、ネイティブ JS で実装された共有サイドバーを紹介します。効果は次のとおりです。 以下...

ナビゲーションバーコンポーネントをVueでカプセル化する

はじめに:ナビゲーション バーなどのコンポーネント ベースのアイデアを使用して機能モジュールを完全に...

...

CSS3で実装された読み込みアニメーション

成果を達成する実装コード <h1>123WORDPRESS.COM</h1>...

MySQLデータベース入門:データベースバックアップ操作の詳細な説明

目次1. 単一データベースのバックアップ2. 圧縮バックアップ3. マルチデータベースバックアップ4...

2時間のDocker入門チュートリアル

目次1.0 はじめに2.0 Dockerのインストール3.0基本的なDockerコマンド4.0 Do...

追加、削除、変更、クエリを実行するための JS 操作オブジェクト配列のサンプルコード

1. はじめに最近、私は友人が JSON 配列を追加、削除、変更するための簡単なページを作成するのを...

Docker が PostgreSQL を起動するときに複数のデータベースを作成するためのソリューション

1 はじめに「DockerでPostgreSQLを起動する方法といくつかの接続ツールのおすすめ」の記...