使用全局配置文件app.json
app.json 配置文件
小程序根目錄下的
app.json文件用來對(duì)微信小程序進(jìn)行全局配置，它決定了頁面文件的路徑咖祭、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。
在 app.json 配置文件中师郑，最主要的配置節(jié)點(diǎn)是：
-
pages數(shù)組：配置小程序的頁面路徑 -
window對(duì)象：用于設(shè)置小程序的狀態(tài)欄添忘、導(dǎo)航條察皇、標(biāo)題、窗口背景色 -
tabBar對(duì)象：配置小程序的tab欄效果
注：全局配置詳細(xì)文檔
一.pages數(shù)組的用法
app.json中的pages數(shù)組欺旧，用來配置小程序的頁面路徑
- pages 用于指定小程序由哪些頁面組成姑丑，每一項(xiàng)都對(duì)應(yīng)一個(gè)頁面的 路徑+文件名 信息。
-
文件名不需要寫文件后綴辞友，框架會(huì)自動(dòng)去尋找對(duì)應(yīng)位置的 .json、 .js震肮、 .wxml 和 .wxss 四個(gè)文件進(jìn)行處理称龙。
image.png
自動(dòng)創(chuàng)建新頁面
- 需要新建頁面目錄 -> 新建頁面文件 -> 修改pages數(shù)組
- 打開 app.json -> pages 數(shù)組節(jié)點(diǎn) -> 新增頁面路徑并保存 -> 自動(dòng)創(chuàng)建路徑對(duì)應(yīng)的頁面
設(shè)置默認(rèn)首頁
- 打開 app.json -> pages 數(shù)組節(jié)點(diǎn)
- 按需調(diào)整數(shù)組中路徑的順序，即可修改默認(rèn)首頁
注意：
① 數(shù)組的第一項(xiàng)代表小程序的初始頁面（首頁）戳晌。
② 小程序中新增/減少頁面鲫尊，都需要對(duì) pages 數(shù)組進(jìn)行修改。
二沦偎。window對(duì)象
小程序窗口的組成部分
window節(jié)點(diǎn)常用的配置項(xiàng)
常見的屬性配置： 常見的屬性配置
1.設(shè)置導(dǎo)航欄標(biāo)題文字內(nèi)容
-
app.json-->window-->navigationBarTitleText - 將屬性值修改即可
2.設(shè)置導(dǎo)航欄背景色
-
app.json-->window-->navigationBarBackgroundColor - 將屬性值修改為指定的顏色就可以
3.設(shè)置導(dǎo)航欄標(biāo)題顏色
-
app.json-->window-->navigationBarTextStyle - 將屬性值修改為指定的顏色就可以
black/white
4.全局開啟下拉刷新功能
通過手指在屏幕上的下拉滑動(dòng)操作疫向，從而重新加載頁面數(shù)據(jù)的行為
-
app.json-->window--> 把enablePullDownRefresh的值設(shè)置為 true
5.設(shè)置下拉刷新窗口的背景色
當(dāng)全局開啟下拉刷新功能之后，默認(rèn)的窗口背景為白色
-
app.json->window->backgroundColor
當(dāng)全局開啟下拉刷新功能之后豪嚎，默認(rèn)的窗口背景為白色搔驼；如果自定義下拉刷新窗口背景色，設(shè)置步驟為 :
app.json -> window -> 為 backgroundColor 指定16進(jìn)制顏色值 #eee
6.設(shè)置下拉loading的樣式
當(dāng)全局開啟下拉刷新功能之后侈询，默認(rèn)窗口的loading樣式為白色
-
app.json-->window-->backgroundTextStyle
當(dāng)全局開啟下拉刷新功能之后舌涨，默認(rèn)窗口的loading樣式為白色，如果要更改loading樣式的效果扔字，設(shè)置步驟為
7.設(shè)置上拉觸底的距離
手指在屏幕上的上拉滑動(dòng)操作囊嘉，從而加載更多數(shù)據(jù)的行為
-
app.json-->window-->onReachBottomDistance
注意： 默認(rèn)距離為50px，如果沒有特殊需求革为，建議使用默認(rèn)值即可
三 .tabBar - 配置Tab欄
tabBar是移動(dòng)端應(yīng)用常見的頁面效果扭粱，用于實(shí)現(xiàn)多頁面的快速切換；小程序中通常將其分為底部tabBar和頂部tabBar
注意：tabBar 中震檩，只能配置最少2個(gè)琢蛤、最多5個(gè) tab 頁簽，當(dāng)渲染頂部 tabBar 的時(shí)候恳蹲，不顯示 icon虐块，只顯示文本
注： tabbar 詳細(xì)文檔
tabBar的組成部分
-
backgroundColor：導(dǎo)航條背景色 -
selectedIconPath：選中時(shí)的圖片路徑 -
borderStyle：tabBar上邊框的顏色 -
iconPath：未選中時(shí)的圖片路徑 -
selectedColor：tab上的文字選中時(shí)的顏色 -
color：tab上的文字默認(rèn)（未選中）顏色
image.png
tabBar節(jié)點(diǎn)的配置項(xiàng)
1. tabBar 節(jié)點(diǎn)的配置項(xiàng)
| 屬性 | 類型 | 必填 | 默認(rèn)值 | 描述 |
|---|---|---|---|---|
| color | HexColor | 是 | . | tab 上的文字默認(rèn)顏色，僅支持十六進(jìn)制顏色 |
| selectedColor | HexColor | 是 | . | tab 上的文字選中時(shí)的顏色嘉蕾，僅支持十六進(jìn)制顏色 |
| backgroundColor | HexColor | 是 | . | tab 的背景色贺奠，僅支持十六進(jìn)制顏色 |
| borderStyle | string | 否 | black | tabBar 上邊框的顏色， 僅支持 black / white
|
| list | Array | 是 | . | tab 的列表错忱，詳見 list 屬性說明儡率，最少 2 個(gè)挂据、最多 5 個(gè) tab |
| position | string | 否 | bottom | tabBar 的位置，僅支持 bottom/ top
|
| custom | boolean | 否 | false | 自定義 tabBar |
2.list 節(jié)點(diǎn)的配置項(xiàng)
| 屬性 | 類型 | 必填 | 說明 |
|---|---|---|---|
| pagePath | string | 是 | 頁面路徑儿普，必須在 pages 中先定義 |
| text | string | 是 | tab 上按鈕文字 |
| iconPath | string | 否 | 圖片路徑崎逃，icon 大小限制為 40kb，建議尺寸為 81px * 81px |
| selectedIconPath | string | 否 | 選中時(shí)的圖片路徑眉孩，icon 大小限制為 40kb个绍，建議尺寸為 81px * 81px |
注意：
- 都不支持網(wǎng)絡(luò)圖片
- 當(dāng) position 為 top 時(shí)，不顯示 icon浪汪。
使用頁面配置文件page.json
頁面級(jí)別和全局級(jí)別配置的關(guān)系
小程序中巴柿，app.json 中的 window節(jié)點(diǎn)，可以全局配置小程序中每個(gè)頁面的窗口表現(xiàn)死遭；
如果某些小程序頁面广恢，想要擁有特殊的窗口表現(xiàn)，此時(shí)呀潭，“頁面級(jí)別的.json配置文件”就可以實(shí)現(xiàn)這種需求钉迷；
總結(jié)：頁面級(jí)別配置優(yōu)先于全局配置生效。
頁面配置文件中可選的配置項(xiàng)列表
注意：頁面的.json只能設(shè)置 window 相關(guān)的配置項(xiàng)钠署，以決定本頁面的窗口表現(xiàn)糠聪。
頁面配置文件中可選的配置項(xiàng)列表
注意：頁面的.json只能設(shè)置 window 相關(guān)的配置項(xiàng)，以決定本頁面的窗口表現(xiàn)踏幻；
小程序的生命周期
生命周期（Life Cycle）是指一個(gè)對(duì)象從 創(chuàng)建 -> 運(yùn)行 -> 銷毀 的整個(gè)階段枷颊，強(qiáng)調(diào)的是一個(gè)時(shí)間段。
生命周期的兩種類型
小程序的生命周期
- 小程序的啟動(dòng)该面，表示生命周期的開始
- 小程序的關(guān)閉夭苗，表示生命周期的結(jié)束
- 中間小程序運(yùn)行的過程，就是小程序的生命周期
在小程序中隔缀，包含兩種類型的生命周期：
- 應(yīng)用生命周期：特指小程序從啟動(dòng) -> 運(yùn)行 -> 銷毀的過程题造；
-
頁面生命周期：特指小程序中，每個(gè)頁面的加載 -> 渲染 -> 銷毀的過程猾瘸；
其中界赔，頁面的生命周期范圍較小，應(yīng)用程序的生命周期范圍較大牵触，如圖所示:
image.png
什么是生命周期函數(shù)
小程序框架提供的內(nèi)置函數(shù)淮悼，會(huì)伴隨著生命周期，自動(dòng)按次序執(zhí)行
允許程序員在特定的生命周期時(shí)間點(diǎn)上揽思，執(zhí)行某些特定的操作袜腥。例如，頁面剛加載的時(shí)候钉汗，在生命周期函數(shù)中自動(dòng)發(fā)起數(shù)據(jù)請(qǐng)求羹令，獲取當(dāng)前頁面的數(shù)據(jù)鲤屡；
注意：生命周期強(qiáng)調(diào)的是時(shí)間段，生命周期函數(shù)強(qiáng)調(diào)的是時(shí)間點(diǎn)福侈。
應(yīng)用生命周期函數(shù)
-
app.js是小程序執(zhí)行的入口文件酒来，在app.js中必須調(diào)用App()函數(shù)，且只能調(diào)用一次肪凛。其中堰汉，App()函數(shù)是用來注冊(cè)并執(zhí)行小程序的。 -
App(Object)函數(shù)接收一個(gè)Object參數(shù)伟墙，可以通過這個(gè)Object參數(shù)衡奥，指定小程序的生命周期函數(shù)。
app.js代碼:
App({
/**
* 當(dāng)小程序初始化完成時(shí)远荠，會(huì)觸發(fā) onLaunch（全局只觸發(fā)一次）
*/
onLaunch: function () {
// console.log('小程序啟動(dòng)了')
},
/**
* 當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示失息，會(huì)觸發(fā) onShow
*/
onShow: function (options) {
// console.log('小程序顯示出來了')
},
/**
* 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)譬淳，會(huì)觸發(fā) onHide
*/
onHide: function () {
// console.log('小程序被隱藏到后臺(tái)了')
},
/**
* 當(dāng)小程序發(fā)生腳本錯(cuò)誤，或者 api 調(diào)用失敗時(shí)盹兢，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息
*/
onError: function (msg) {
}
})
頁面生命周期函數(shù)
- 每個(gè)小程序頁面邻梆，必須擁有自己的
.js文件，且必須調(diào)用Page()函數(shù)绎秒，否則報(bào)錯(cuò)浦妄。其中Page()函數(shù)用來注冊(cè)小程序頁面。 -
Page(Object)函數(shù)接收一個(gè)Object參數(shù)见芹，可以通過這個(gè)Object參數(shù)剂娄，指定頁面的生命周期函數(shù)。
頁面生命周期.js:
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: { },
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) { },
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () { },
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () { },
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () { },
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () { },
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () { },
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () { },
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () { }
})
