WeChat アプレットの設定方法を教えます-ミニプログラム開発-php.cn

この記事では、主にミニプログラムの構成に関する WeChat ミニプログラムチュートリアルの関連情報を紹介します。ここでは、app.json、ページ、ウィンドウなどについて詳しく説明します。WeChat ミニプログラムの開発が初めての方向けに、詳細を説明します。これらをマスターすることが重要です。必要な友人は、

WeChat ミニプログラム - 構成

を参照してください。以下は、編集者によるミニプログラムの構成情報の体系的な整理です。開発者にとって役立つことを願っています。

app.json ファイルを使用して、WeChat アプレットのグローバル構成、ページファイルのパス、ウィンドウのパフォーマンスの決定、ネットワークタイムアウトの設定、複数のタブの設定などを行います。

以下は、すべての構成オプションを含む単純な構成 app.json です:

{
 "pages": [
  "pages/index/index",
  "pages/logs/index"
 ],
 "window": {
  "navigationBarTitleText": "Demo"
 },
 "tabBar": {
  "list": [{
   "pagePath": "pages/index/index",
   "text": "首页"
  }, {
   "pagePath": "pages/logs/logs",
   "text": "日志"
  }]
 },
 "networkTimeout": {
  "request": 10000,
  "downloadFile": 10000
 },
 "debug": true
}

ログイン後にコピー

app.json 構成項目リスト

属性	タイプ	必須	説明
ページ	配列	はい	ページパスを設定します
window	オブジェクト	いいえ	デフォルトページのウィンドウ表現を設定します
tabBar	オブジェクト	いいえ	パフォーマンスを設定する一番下のタブの
networkTimeout	Object	No	ネットワークタイムアウトを設定
debug	Boolean	No	デバッグモードを有効にするかどうかを設定

ページ

は受け入れます配列、各各項目は、ミニプログラムがどのページで構成されているかを指定する文字列です。各項目は対応するページの [パス + ファイル名] 情報を表し、配列の最初の項目はミニプログラムの最初のページを表します。ミニプログラムでページを追加/削減するには、ページ配列を変更する必要があります。

フレームワークは統合のためにパス .json、.js、.wxml、および .wxss 内の 4 つのファイルを自動的に検索するため、ファイル名にファイル接尾辞を記述する必要はありません。

開発ディレクトリが

pages/
pages/index/index.wxml
pages/index/index.js
pages/index/index.wxss
pages/logs/logs.wxml
pages/logs/logs.js
app.js
app.json
app.wxss

ログイン後にコピー

の場合、ミニプログラムのステータスバー、ナビゲーションバー、タイトル、ウィンドウの背景色を設定するには、app.json に

{
 "pages":[
  "pages/index/index"
  "pages/logs/logs"
 ]
}

ログイン後にコピー

window

を記述する必要があります。

プロパティ	タイプ	デフォルト値	説明
navigationBarBackgroundColor	HexColor	#000000	ナビゲーションバーの背景カラー、「#000000」など
navigationBarTextStyle	文字列	white	ナビゲーションバーのタイトルの色、黒/白のみをサポートします
navigationBarTitleText	String		ナビゲーションバーのタイトルのテキストコンテンツ
backgroundColor	HexColor	#ffffff	の背景色ウィンドウ
backgroundTextStyle	String	dark	ドロップダウンの背景フォントと読み込み画像のスタイルは、dark/lightのみをサポートします

注: HexColor (16進数のカラー値)、「」など#ff00ff"

app.json など:

{
 "window":{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
 }
}

ログイン後にコピー

tabBar

アプレットがマルチタブアプリケーションの場合 (クライアントウィンドウの下部にページを切り替えるためのタブバーがあります)この項目は、タブバーのパフォーマンスと、タブが切り替わったときに表示される対応するページを指定します。

tabBar は配列であり、最小 2 つ、最大 5 つのタブのみを構成できます。タブは配列の順序でソートされます。

プロパティの説明:

プロパティ	タイプ	必須	デフォルト値	説明
色	HexColor	はい		タブ上のテキストのデフォルトの色
selectedColor	HexColor	は、		タブが選択されているときのテキストの色です
backgroundColor	HexColor	は		タブの背景色
borderStyle	String	いいえ	black	タブバーの境界線の色は黒/白のみをサポートします
list	Array	は		タブのリストです、list属性を参照してください詳細については説明、最小値 2、最大値 5 タブ

ここで list は配列を受け入れ、配列内の各項目はオブジェクトであり、その属性値は次のとおりです:

のボタンのテキストtab画像のパス、アイコンのサイズ制限は40kbですが選択されている場合の画像のパス、アイコンのサイズ制限は 40kb です

Attributes

タイプ

必須

説明

pagePath

String

は、pagesで最初に定義する必要がある

ページのパスです。

iconPath

String

は

selectedIconPath

String

は

networkTimeout

可以设置各种网络请求的超时时间。

属性说明：

属性	类型	必填	说明
request	Number	否	wx.request的超时时间，单位毫秒
connectSocket	Number	否	wx.connectSocket的超时时间，单位毫秒
uploadFile	Number	否	wx.uploadFile的超时时间，单位毫秒
downloadFile	Number	否	wx.downloadFile的超时时间，单位毫秒

debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。可以帮助开发者快速定位一些常见的问题。

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，如：

{
 "navigationBarBackgroundColor": "#ffffff",
 "navigationBarTextStyle": "black",
 "navigationBarTitleText": "微信接口功能演示",
 "backgroundColor": "#eeeeee",
 "backgroundTextStyle": "light"
}

ログイン後にコピー

以上がWeChat アプレットの設定方法を教えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。