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

推薦する

Linux で推奨される 9 つの優れたコード比較ツールの概要

コードを書くとき、2 つのファイル間の違い、または同じファイルの異なるバージョン間の違いを知る必要が...

CSS で div 凹角スタイルを実装するサンプル コード

通常の開発では、凸型の丸い角、つまり border-radius 属性を使用するのが一般的です。凹角...

CSSマスクのフルスクリーン中央揃えを実装する方法

具体的なコードは次のとおりです。 <スタイル> #トーストローダーフルスクリーン{ 高さ...

負のマージントップ値は、ラベルテキストと入力の間の垂直中央揃えの問題を解決します。

ラベルテキストと入力の垂直方向の中央揃えを調整するのは簡単ではありません。padding、verti...

Unicodeの一般的な記号

Unicode は、世界中のすべてのテキストと記号に対応できる国際組織によって開発された文字エンコー...

vue+echarts で中国地図のフロー効果を実現する (詳細な手順)

@vue+echarts は中国地図のフロー効果を実現します#レンダリングを見てみましょう手順:コ...

キーフリーログインプロセスを実現するためのLinux構成の分析

1.sshコマンドLinux では、ssh コマンドを使用して別のサーバーにログインできます。 2 ...

MySQL共通インデックスとユニークインデックスの選択に関する詳細な分析

各人が固有の携帯電話番号で登録し、ビジネス コードによって重複する携帯電話番号が 2 つ書き込まれな...

mysql8.0.11データディレクトリ移行の実装

mysql のデフォルトのストレージ ディレクトリは/var/lib/mysql/です。以下は、デフ...

MySQL インストール図の概要

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

Linux 編集の開始、停止、再起動の Springboot jar パッケージ スクリプトの例

序文springboot設定ファイルでは、設定ファイルの名前には独自の意味と用途があります。 dev...

Windows Apache 環境で SSL 証明書を展開して、Web サイトを https 対応にする方法

SSL 証明書の使用についてはここでは説明しません。SSL 証明書を導入する必要がある友人は、すでに...

シームレスなトークンリフレッシュを実現する方法

目次1. 需要方法1方法2方法3 2. 実装3. 問題解決質問1: トークンの複数回の更新を防ぐ方法...

JavaScriptでポインターの位置を取得する方法を教えます

JavaScript でポインターの位置を取得する方法は、イベント オブジェクトの pageX と ...

Linux ssh サーバーの構成コード例

LinuxホストにSSHサーバーをインストールするには、次のターミナルコマンドを使用します: sud...