WeChat ミニ プログラム - 構(gòu)成

以下は、編集者がミニ プログラムの構(gòu)成情報(bào)を體系的に整理したものです。開発者の參考になれば幸いです。

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

以下は、すべての構(gòu)成オプションを含む単純な構(gòu)成 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 構(gòu)成項(xiàng)目リスト

Attributes

Type

Required

説明

pages 配列 Yes ページパスを設(shè)定します

window オブジェクト No デフォルトページのウィンドウパフォーマンスを設(shè)定します

tabBar オブジェクト No 下部タブのパフォーマンスを設(shè)定します

networkTimeout オブジェクト No ネットワークタイムアウトを設(shè)定します

debug Boolean No 有効にするかどうかを設(shè)定しますデバッグ モード

pages

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

フレームワークは統(tǒng)合のためにパス .json、.js、.wxml、および .wxss 內(nèi)の 4 つのファイルを自動(dòng)的に検索するため、ファイル名にファイル接尾辭を記述する必要はありません。

開発ディレクトリが

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

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

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

window

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

プロパティ

タイプ

デフォルト値

説明

ナビゲーションバーの背景色 (「#000000」など)

navigationBarTextStyle String 白 ナビゲーションバーのタイトルの色、黒/白のみをサポートします

navigationBarTitleText String ナビゲーション バーのタイトルのテキストの內(nèi)容

backgroundColor HexColor #ffffff ウィンドウの背景色

backgroundTextStyle String Dark ドロップダウンの背景フォント、畫像スタイルを読み込み、ダーク/ライトのみをサポート

注: HexColor (16 進(jìn)數(shù)のカラー値)、たとえば「#ff00ff」

app.json など:

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

tabBar

アプレットがマルチタブ アプリケーションの場(chǎng)合 (タブ バーがある場(chǎng)合)クライアント ウィンドウの下部) ページの切り替え)、tabBar 設(shè)定項(xiàng)目を通じてタブ バーのパフォーマンスを指定し、タブが切り替えられたときに表示される対応するページを指定できます。

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

プロパティの説明:

プロパティ

タイプ

必須

デフォルト値

説明

color HexColor はタブ上のテキストのデフォルトの色です

selectedColor HexColor はい タブが選択されているときのテキストの色

backgroundColor HexColor はい タブの背景色

borderStyle String いいえ Black タブバーの境界線の色、黒/白のみをサポートします

list 配列はい タブのリスト。詳細(xì)については、リスト屬性の説明を參照してください。少なくとも 2 つ、最大 5 つのタブ

list は配列を受け入れ、配列內(nèi)の各項(xiàng)目はオブジェクトであり、その屬性値は次のとおりです。

Attributes

Type

Required

Description

pagePath String Yes ページパス、ページ內(nèi)で定義する必要があります

text Stリング はい タブ ボタンのテキスト

iconPath 文字列 はい畫像パス、アイコンサイズ制限は40kbです

selectedIconPath String Yes Selected時(shí)の畫像パス、アイコンサイズ制限は40kbです

networkTimeout

さまざまなネットワークリクエストのタイムアウトを設(shè)定できます。

屬性の説明:

屬性

タイプ

必須

説明

のタイムアウト期間wx.request、ミリ秒?yún)g位

connectSocket Number 否 wx.connectSocket的超時(shí)時(shí)間，單位毫秒

uploadFile Number 否 wx.uploadFile的超時(shí)時(shí)間，單位毫秒

downloadFile Number 否 wx.downloadFile的超時(shí)時(shí)間，單位毫秒

debug

可以在開發(fā)者工具中開啟 debug 模式，在開發(fā)者工具的控制臺(tái)面板，調(diào)試信息以 info 的形式給出，其信息有Page的注冊(cè)，頁面路由，數(shù)據(jù)更新，事件觸發(fā) 。 可以幫助開發(fā)者快速定位一些常見的問題。

page.json

每一個(gè)小程序頁面也可以使用.json文件來對(duì)本頁面的窗口表現(xiàn)進(jìn)行配置。 頁面的配置比app.json全局配置簡(jiǎn)單得多，只是設(shè)置 app.json 中的 window 配置項(xiàng)的內(nèi)容，頁面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。

頁面的.json只能設(shè)置 window 相關(guān)的配置項(xiàng)，以決定本頁面的窗口表現(xiàn)，所以無需寫 window 這個(gè)鍵，如：

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

以上就是微信小程序 教程之小程序配置的內(nèi)容，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)（miracleart.cn）！