Der WeChat-Applet-Code besteht aus den folgenden vier Dateitypen:
.json-Suffix JSON-Konfigurationsdatei
WXML-Vorlagendatei mit Suffix .wxml
WXSS-Stildatei mit Suffix wxss
Logische JS-Skriptdatei mit Suffix .js
1. JSON-Konfiguration
Wir können sehen, dass es im Stammverzeichnis des Projekts und in Seiten/Protokollen eine app.json und eine project.config.json gibt Es gibt auch eine logs.json im Verzeichnis. Lassen Sie uns der Reihe nach ihre Verwendung erklären.
Miniprogrammkonfiguration app.json
app.json ist die globale Konfiguration des aktuellen Miniprogramms, einschließlich aller Seitenpfade des Mini Programm, Schnittstellenleistung, Netzwerk-Timeout, untere Registerkarte usw. Der Inhalt der app.json-Konfiguration im QuickStart-Projekt lautet wie folgt:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}Nach dem Login kopieren
Lassen Sie uns kurz über die Bedeutung jedes Elements in dieser Konfiguration sprechen:
Seitenfeld – verwendet um die aktuelle Seite zu beschreiben. Der Pfad aller Seiten des Programms. Dies dient dazu, dem WeChat-Client mitzuteilen, in welchem Verzeichnis Ihre Miniprogrammseite derzeit definiert ist.
Fensterfeld – die obere Hintergrundfarbe aller Seiten des Miniprogramms und die Textfarbe werden hier definiert.
Toolkonfiguration project.config.json
Wenn Menschen ein Tool verwenden, konzentrieren sie sich normalerweise auf sich selbst Einstellungen Nehmen Sie einige personalisierte Konfigurationen vor, z. B. die Farbe der Benutzeroberfläche, die Kompilierungskonfiguration usw. Wenn Sie zu einem anderen Computer wechseln und das Tool neu installieren, müssen Sie es neu konfigurieren.
Unter Berücksichtigung dessen generiert das Mini Program Developer Tool eine project.config.json im Stammverzeichnis jedes Projekts, wenn Sie es neu starten Wenn Sie Tools installieren oder Computer ändern, müssen Sie nur das Codepaket desselben Projekts laden. Die Entwicklertools helfen Ihnen dann automatisch dabei, die personalisierte Konfiguration wiederherzustellen, als Sie das Projekt entwickelt haben, einschließlich der Farbe des Editors und des Zeitpunkts Der Code wurde hochgeladen. Automatische Komprimierung und eine Reihe von Optionen.
Seitenkonfiguration page.json
Die page.json hier wird tatsächlich verwendet, um die logs.json im Verzeichnis „pages/logs“ darzustellen. Konfiguration im Zusammenhang mit der Miniprogrammseite.
Wenn der Stil Ihres gesamten Miniprogramms blau ist, können Sie in app.json festlegen, dass die oberste Farbe blau ist. Die tatsächliche Situation ist möglicherweise nicht so. Möglicherweise hat jede Seite in Ihrem Miniprogramm einen anderen Farbton, um verschiedene Funktionsmodule zu unterscheiden. Daher stellen wir page.json bereit, damit Entwickler einige Attribute jeder Seite unabhängig definieren können, z Sprechen Sie über die obere Farbe, ob eine Pulldown-Aktualisierung zulässig ist usw.
Konfigurationsdetails
app.json Dateien werden verwendet, um das WeChat-Applet global zu konfigurieren, den Pfad der Auslagerungsdatei und die Fensterleistung zu bestimmen, das Netzwerk-Timeout festzulegen, mehrere Registerkarten festzulegen usw.
Das Folgende ist ein app.json, der alle Konfigurationsoptionen enthält:
{
"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
}Nach dem Login kopieren
app.json-Konfigurationselementliste
| 属性 |
类型 |
必填 |
描述 |
|---|
| pages |
String Array |
是 |
设置页面路径 |
| window |
Object |
否 |
设置默认页面的窗口表现 |
| tabBar |
Object |
否 |
设置底部 tab 的表现 |
| networkTimeout |
Object |
否 |
设置网络超时时间 |
| debug |
Boolean |
否 |
设置是否开启 debug 模式 |
pages
接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。
文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。
如开发目录为：
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"
]
}Nach dem Login kopieren
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
| 属性 |
类型 |
默认值 |
描述 |
最低版本 |
|---|
| navigationBarBackgroundColor |
HexColor |
#000000 |
导航栏背景颜色，如"#000000" |
|
| navigationBarTextStyle |
String |
white |
导航栏标题颜色，仅支持 black/white |
|
| navigationBarTitleText |
String |
|
导航栏标题文字内容 |
|
| navigationStyle |
String |
default |
导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮 |
微信版本 6.6.0 |
| backgroundColor |
HexColor |
#ffffff |
窗口的背景色 |
|
| backgroundTextStyle |
String |
dark |
下拉 loading 的样式，仅支持 dark/light |
|
| backgroundColorTop |
String |
#ffffff |
顶部窗口的背景色，仅 iOS 支持 |
微信版本 6.5.16 |
| backgroundColorBottom |
String |
#ffffff |
底部窗口的背景色，仅 iOS 支持 |
微信版本 6.5.16 |
| enablePullDownRefresh |
Boolean |
false |
是否开启下拉刷新，详见页面相关事件处理函数 |
|
| onReachBottomDistance |
Number |
50 |
页面上拉触底事件触发时距页面底部距离，单位为px |
|
注：HexColor（十六进制颜色值），如"#ff00ff"
注：navigationStyle 只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用） 可方便切到旧视觉
如 app.json ：
{
"window":{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}Nach dem Login kopieren
tabBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
Tip：
当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
属性说明：
| 属性 |
类型 |
必填 |
默认值 |
描述 |
|---|
| color |
HexColor |
是 |
|
tab 上的文字默认颜色 |
| selectedColor |
HexColor |
是 |
|
tab 上的文字选中时的颜色 |
| backgroundColor |
HexColor |
是 |
|
tab 的背景色 |
| borderStyle |
String |
否 |
black |
tabbar上边框的颜色， 仅支持 black/white |
| list |
Array |
是 |
|
tab 的列表，详见 list 属性说明，最少2个、最多5个 tab |
| position |
String |
否 |
bottom |
可选值 bottom、top |
其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：
| 属性 |
类型 |
必填 |
说明 |
|---|
| pagePath |
String |
是 |
页面路径，必须在 pages 中先定义 |
| text |
String |
是 |
tab 上按钮文字 |
| iconPath |
String |
否 |
图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片 |
| selectedIconPath |
String |
否 |
选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效 |
networkTimeout
可以设置各种网络请求的超时时间。
属性说明：
| 属性 |
类型 |
必填 |
说明 |
|---|
| request |
Number |
否 |
wx.request的超时时间，单位毫秒，默认为：60000 |
| connectSocket |
Number |
否 |
wx.connectSocket的超时时间，单位毫秒，默认为：60000 |
| uploadFile |
Number |
否 |
wx.uploadFile的超时时间，单位毫秒，默认为：60000 |
| downloadFile |
Number |
否 |
wx.downloadFile的超时时间，单位毫秒，默认为：60000 |
debug
可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。
page.json
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，如：
| 属性 |
类型 |
默认值 |
描述 |
|
|---|
| navigationBarBackgroundColor |
HexColor |
#000000 |
导航栏背景颜色，如"#000000" |
|
| navigationBarTextStyle |
String |
white |
导航栏标题颜色，仅支持 black/white |
|
| navigationBarTitleText |
String |
|
导航栏标题文字内容 |
|
| backgroundColor |
HexColor |
#ffffff |
窗口的背景色 |
|
| backgroundTextStyle |
String |
dark |
下拉 loading 的样式，仅支持 dark/light |
|
| enablePullDownRefresh |
Boolean |
false |
是否开启下拉刷新，详见页面相关事件处理函数。 |
|
| disableScroll |
Boolean |
false |
设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项 |
|
| onReachBottomDistance |
Number |
50 |
页面上拉触底事件触发时距页面底部距离，单位为px |
|
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}Nach dem Login kopieren
相关文章：
微信小程序 教程之小程序配置
微信小程序的配置
相关视频：
App.json全局配置文件详解-微信小程序开发视频教程
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JSON-Konfigurationsdatei mit JSON-Suffix in der Codezusammensetzung des Miniprogramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
