一.小程序基本介紹

1. .json 后綴的 JSON 配置文件
2. .wxml 后綴的 WXML 模板文件
3. .wxss 后綴的 WXSS 樣式文件
4. .js 后綴的 JS 腳本邏輯文件

接下來(lái)我們分別看看這4種文件的作用。
在根目錄下用app來(lái)命名的這四中類型的文件，就是程序入口文件。

app.json

必須要有這個(gè)文件，如果沒(méi)有這個(gè)文件，IDE會(huì)報(bào)錯(cuò)，因?yàn)槲⑿趴蚣馨堰@個(gè)作為配置文件入口，
你只需創(chuàng)建這個(gè)文件，里面寫個(gè)大括號(hào)就行
以后我們會(huì)在這里對(duì)整個(gè)小程序的全局配置。記錄了頁(yè)面組成，配置小程序的窗口 背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。

app.js

必須要有這個(gè)文件，沒(méi)有也是會(huì)報(bào)錯(cuò)！但是這個(gè)文件創(chuàng)建一下就行 什么都不需要寫
以后我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。

app.wxss

這個(gè)文件不是必須的。因?yàn)樗皇莻€(gè)全局CSS樣式文件

app.wxml

這個(gè)也不是必須的，而且這個(gè)并不是指主界面哦~因?yàn)樾〕绦虻闹黜?yè)面是靠在JSON文件中配置來(lái)決定的

二.小程序基礎(chǔ)

1.應(yīng)用生命周期

應(yīng)用生命周期

App() 函數(shù)用來(lái)注冊(cè)一個(gè)小程序。接受一個(gè) object 參數(shù)，其指定小程序的生命周期函數(shù)等。

object參數(shù)說(shuō)明
onLaunch 當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā) onLaunch（全局只觸發(fā)一次）
onShow 當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow
onHide 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，會(huì)觸發(fā) onHide
onError 當(dāng)小程序發(fā)生腳本錯(cuò)誤，或者 api 調(diào)用失敗時(shí)，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息
onPageNotFound 當(dāng)小程序出現(xiàn)要打開的頁(yè)面不存在的情況，會(huì)帶上頁(yè)面信息回調(diào)該函數(shù)
以上是小程序應(yīng)用的生命周期

前臺(tái)、后臺(tái)定義： 當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信，小程序并沒(méi)有直接銷毀，而是進(jìn)入了后臺(tái)；當(dāng)再次進(jìn)入微信或再次打開小程序，又會(huì)從后臺(tái)進(jìn)入前臺(tái)。需要注意的是：只有當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間，或者系統(tǒng)資源占用過(guò)高，才會(huì)被真正的銷毀。

2.頁(yè)面生命周期

頁(yè)面生命周期

Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
1.小程序注冊(cè)完成后，加載頁(yè)面，觸發(fā)onLoad方法。
2.頁(yè)面載入后觸發(fā)onShow方法，顯示頁(yè)面。
3.首次顯示頁(yè)面，會(huì)觸發(fā)onReady方法，渲染頁(yè)面元素和樣式，一個(gè)頁(yè)面只會(huì)調(diào)用一次。
4.當(dāng)小程序后臺(tái)運(yùn)行或跳轉(zhuǎn)到其他頁(yè)面時(shí)，觸發(fā)onHide方法。
5.當(dāng)小程序有后臺(tái)進(jìn)入到前臺(tái)運(yùn)行或重新進(jìn)入頁(yè)面時(shí)，觸發(fā)onShow方法。
6.當(dāng)使用重定向方法wx.redirectTo(OBJECT)或關(guān)閉當(dāng)前頁(yè)返回上一頁(yè)wx.navigateBack()，觸發(fā)onUnload

3.應(yīng)用生命周期影響頁(yè)面生命周期

圖片.png

1.小程序初始化完成后，頁(yè)面首次加載觸發(fā)onLoad，只會(huì)觸發(fā)一次。
2.當(dāng)小程序進(jìn)入到后臺(tái)，先執(zhí)行頁(yè)面onHide方法再執(zhí)行應(yīng)用onHide方法。
3.當(dāng)小程序從后臺(tái)進(jìn)入到前臺(tái)，先執(zhí)行應(yīng)用onShow方法再執(zhí)行頁(yè)面onShow方法。

4.配置

app.json文件用來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。
window用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

window.png

tabBar

如果小程序是一個(gè)多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面），可以通過(guò) tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。

Tip： 當(dāng)設(shè)置 position 為 top 時(shí)，將不會(huì)顯示 icon
tabBar 中的 list 是一個(gè)數(shù)組，只能配置最少2個(gè)、最多5個(gè) tab，tab 按數(shù)組的順序排序。

tabBar.png

注意：

跳過(guò)域名校驗(yàn)

在微信開發(fā)者工具中，可以臨時(shí)開啟 開發(fā)環(huán)境不校驗(yàn)請(qǐng)求域名、TLS版本及HTTPS證書 選項(xiàng)，跳過(guò)服務(wù)器域名的校驗(yàn)。此時(shí)，在微信開發(fā)者工具中及手機(jī)開啟調(diào)試模式時(shí)，不會(huì)進(jìn)行服務(wù)器域名的校驗(yàn)。

點(diǎn)擊設(shè)置-項(xiàng)目設(shè)置勾選

圖片.png