一個(gè)人開發(fā)一個(gè)產(chǎn)品，小程序從0到1，第3章 應(yīng)用文件

一個(gè)小程序項(xiàng)目，在根目錄下會(huì)有3個(gè)應(yīng)用文件，一個(gè)是全局業(yè)務(wù)邏輯文件app.js，一個(gè)是公共配置文件app.json，還有一個(gè)是公共樣式表文件app.wxss。在這3個(gè)文件中，app.js和app.json是不可刪除，是必須有的文件。

3.1 app.js


打開文件的那一瞬間，我才知道：人生遇到的人很多，但真正懂你的人卻寥寥無幾。懂你的人，即使你不說話，他也知道你的喜怒哀樂。不懂你的人呢，就給你一大堆代碼，也不管你是否有了基礎(chǔ)。如果有基礎(chǔ)，我看這個(gè)干啥，如果沒有，我看這個(gè)干啥？

清空onLaunch里面的代碼，只留一個(gè)空方法就好。好看的皮囊千篇一律，有趣的

靈魂萬里挑一。App()必須且只能在app.js中調(diào)用一次，否則會(huì)出現(xiàn)無法預(yù)期的后果。

在onLaunch或其他函數(shù)中，可通過this(App實(shí)例)調(diào)用globalData全局變量。
//app.js App({ onLaunch: function () { let user = this.globalData.userInfo;
}, globalData: { userInfo:null } })
在App()里，除了onLaunch，還有onShow、onError等函數(shù)。



備注：當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備?Home?鍵離開微信，小程序并沒有直接銷毀而是進(jìn)入了后臺(tái)；當(dāng)再次進(jìn)入微信或再次打開小程序，又會(huì)從后臺(tái)進(jìn)入前臺(tái)。

如果想在onLaunch或onShow函數(shù)中，獲取相關(guān)參數(shù)內(nèi)容，只要帶上參數(shù)options一起飛就可以了。
//app.js App({ /** *啟動(dòng)執(zhí)行的初始化方法 * 首次打開時(shí)執(zhí)行，全局只觸發(fā)一次 */ onLaunch: function
(options) { console.log('page:', options.path); }, //小程序啟動(dòng)或從后臺(tái)進(jìn)入到前臺(tái)時(shí)觸發(fā) onShow:
function(options) { console.log('scene:', options.scene); }, //全局變量
globalData: { userInfo:null } })
?

輸出結(jié)果：
page: pages/index/index scene: 1001
options可以獲取的值列表



3.2 app.json

全局配置文件，可配置且必須配置的頁面路徑；可配置窗口風(fēng)格，如標(biāo)題欄背景色和標(biāo)題；可配置全局tab標(biāo)簽、網(wǎng)絡(luò)超時(shí)時(shí)間和多tab等。常用配置項(xiàng)列表如下。



pages

每一項(xiàng)代表對應(yīng)頁面的路徑和文件名(不用后綴)，數(shù)組的第一項(xiàng)為首頁。小程序添加或刪除頁面時(shí)，必須跟pages同步。
"pages": [ "pages/index/index", "pages/logs/logs" ]
window

用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。



類型中的HexColor為十六進(jìn)制顏色值，如"#ff0000"。屬性
backgroundColor配置的窗口背景色，在下拉刷新或上拉加載時(shí)才能見到。如果要配置頁面背景色，可到app.wxss進(jìn)行全局配置或到
index.wxss進(jìn)行單個(gè)頁面配置。
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor":
"#00a24d", "navigationBarTitleText": "導(dǎo)航欄標(biāo)題", "backgroundColor": "#cccccc",
"navigationBarTextStyle": "white", "enablePullDownRefresh": true }


tabBar

如果小程序是一個(gè)多?tab?應(yīng)用，可以通過tabBar配置項(xiàng)指定tab欄的表現(xiàn)，以及?tab?切換時(shí)顯示的對應(yīng)頁面。tab數(shù)目最少?2?個(gè)、最多?5?個(gè)。



?

其中?list?接受一個(gè)數(shù)組，數(shù)組中的每個(gè)項(xiàng)都是一個(gè)對象，屬性列表。



圖標(biāo)大小限制為40kb，建議尺寸為?81px *
81px，當(dāng)postion為top，既tab在頂部時(shí)，iconPath和selectedIconPath無效。


在項(xiàng)目根目錄下新建images目錄，上網(wǎng)搜索“首頁”、“日志”圖標(biāo)。圖標(biāo)默認(rèn)顏色為：#8b8b8b，選中時(shí)顏色為：#00a24d，大小為81*81。如果實(shí)在不想折騰，那就關(guān)注公眾號半碼，輸入:芝麻開門，獲取圖標(biāo)下載地址。
"tabBar": { "borderStyle": "black", "backgroundColor": "#ffffff", "color":
"#8b8b8b", "selectedColor": "#00a24d", "list": [ { "iconPath":
"images/index.png", "selectedIconPath": "images/index_p.png", "pagePath":
"pages/index/index", "text": "首頁" }, { "iconPath": "images/log.png",
"selectedIconPath": "images/log_p.png", "pagePath": "pages/logs/logs", "text":
"日志" } ] }


networkTimeout


網(wǎng)絡(luò)請求的超時(shí)時(shí)間，默認(rèn)為60000毫秒，既1分鐘，在調(diào)用wx.uploadFile上傳文件，wx.downloadFile下載文件，wx.request上傳/下載數(shù)據(jù)和wx.connectSocket網(wǎng)絡(luò)通信接口時(shí)會(huì)用到。
"networkTimeout": { "request": 10000, "downloadFile": 10000 }
requiredBackgroundModes

配置在后臺(tái)運(yùn)行的能力，目前只支持audio:后臺(tái)播放音樂和location:后臺(tái)定位兩項(xiàng)。
"requiredBackgroundModes": [ "audio", "location" ]
navigateToMiniProgramAppIdList


當(dāng)前小程序需要使用?wx.navigateToMiniProgram?接口跳轉(zhuǎn)到其他小程序時(shí)，需要先在配置文件中聲明需要跳轉(zhuǎn)的小程序appId?列表，最多允許填寫?10?個(gè)。
"navigateToMiniProgramAppIdList": [ "wx3ea04d8***126a29" ]
permission

小程序用到敏感功能,如獲取地理位置時(shí)，需要彈窗詢問用戶，用戶點(diǎn)擊同意后才可調(diào)用接口獲取相關(guān)信息，如經(jīng)緯度。詢問窗口上的內(nèi)容，就是這里的desc值。
"permission": { "scope.userLocation": { "desc": "唯有授予位置權(quán)限，才好找你吹牛皮" } }


3.3 app.wxss


WXSS是一套樣式語言，用于描述WXML文件里的組件樣式，決定組件應(yīng)該怎么顯示。為了可對wxss資源進(jìn)行復(fù)用，小程序?qū)SS進(jìn)行了擴(kuò)充，使其支持：通過@import語句后接外聯(lián)樣式表的相對路徑并用;結(jié)束的方式導(dǎo)入樣式。

app.wxss為公共樣式表，不用顯示引入，便可在頁面文件wxml中使用。
/** common.wxss **/ .bg { background-color: #cccccc; } /**app.wxss**/ @import
"common.wxss"; .container { height: 100%; display: flex; flex-direction:
column; align-items: center; justify-content: space-between; padding: 200rpx 0;
box-sizing: border-box; }
應(yīng)用文件來了，頁面文件還會(huì)遠(yuǎn)么？--不會(huì)，就在下一章節(jié)。

?

• ? 上一篇：寫給我們項(xiàng)目總監(jiān)的一些話
• ? 下一篇：從未來看 C#