1、創建小程序
2、代碼構成
2.1 小程序配置 app.json
app.json是當前小程序的全局配置,包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部tab等。
- pages:用於描述當前小程序所有的頁面路徑,這是爲了讓微信客戶端知道當前你的小程序定義在那個目錄
- window:定義小程序所有頁面的頂部背景顏色,文字顏色等。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
2.2工具配置 project.config.json
通常大家再使用一個工具的時候,都會針對各自喜好做一些個性化配置,例如界面顏色、編譯配置等等。小程序爲了方便開發者,在工具上做的任何配置都會寫入到這個文件,當重新安裝的時候,只要載入同一個項目的代碼包,開發者工具就會自動配置。
{
"description": "項目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true,
"autoAudits": false
},
"compileType": "miniprogram",
"libVersion": "2.0.4",
"appid": "wxf3fbf56554e22c88",
"projectname": "demo",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
2.3頁面配置 page.json
這裏的 page.json
其實用來表示 pages/logs 目錄下的 logs.json
這類和小程序頁面相關的配置
如果你整個小程序的風格是藍色調,那麼你可以在 app.json
裏邊聲明頂部顏色是藍色即可。實際情況可能不是這樣,可能你小程序裏邊的每個頁面都有不一樣的色調來區分不同功能模塊,因此我們提供了 page.json
,讓開發者可以獨立定義每個頁面的一些屬性,例如剛剛說的頂部顏色、是否允許下拉刷新等等。