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 自己結合クエリ例の詳細な説明

この記事では、Mysql の自己結合クエリについて説明します。ご参考までに、詳細は以下の通りです。自...

bash スクリプトで ssh/scp コマンドにパスワードを渡す方法の詳細な説明

SSHPASSをインストールする最新のオペレーティング システムでは、sshpass パッケージはデ...

Linux で NFS ファイル共有サーバーを構築するための詳細な手順

Linux が NFS サーバーを構築異なるオペレーティング システム間でデータを共有するために、通...

CSS リセットスタイルリセットの実装例

はじめに: すべてのブラウザには、「ユーザー エージェント スタイル シート」と呼ばれる、すべてのペ...

Webフロントエンドベクターアイコンの使い方

序文フロントエンドページを書くとき、小さなアイコンなどの画像を使うことが多いです。画像を使うとコード...

H5ゲームをnginxサーバーにデプロイする方法の詳細な説明

自己学習型ゲーム開発の道において、最も充実した瞬間は、自分でミニゲームを作り、友達と共有して試しにプ...

div が隠しテキストを超え、div 部分の向こうの CSS コードを隠します

隠れる前に:隠れた後: CS: ...コードをコピーコードは次のとおりです。オーバーフロー:非表示;...

React の 3 つの主要属性における Ref の使用に関する詳細な説明

目次クラスコンポーネント機能コンポーネントインタビューのよくある質問: React における ref...

VMware 仮想マシンに固定 IP アドレスを設定する方法 (グラフィック チュートリアル)

1. メニューバーで「編集」→「仮想ネットワーク エディター」を選択して仮想ネットワーク エディタ...

Vue が Web オンラインチャット機能を実現

この記事では、Webオンラインチャットを実装するためのVueの具体的なコードを参考までに紹介します。...

メタタグの詳しい説明(メタタグの役割)

個人のウェブサイトがどんなに素晴らしいものであっても、サイバースペースの広大な海に浮かぶ小さなボート...

CSSでカスタムフォント(font-face)を導入する方法の詳細な説明

なぜこれを使ったのか?それはポスターを作ることから始まりました。それは嵐の夜でした。 。 。さて、無...

Baidu サイト検索が https をサポートしていない問題の解決策 (テスト済み)

最近、携帯電話で https が有効になりました。緑色のロックを取得するには、次の問題を解決する必要...

HTML入力ファイルコントロールはアップロードされるファイルの種類を制限します

入力ファイルの HTML コントロールを Web ページに追加します。 <input id=&...

HTML のフォームフォームのメソッド属性の紹介

1 メソッドは、データをサーバーに送信する方法を指定するプロパティです。 2 post と get ...