小程序的結(jié)構(gòu)與配置

小程序的結(jié)構(gòu)與配置小程序的結(jié)構(gòu)和組件小程序中的樣式使用全局配置文件app.json使用頁(yè)面配置文件page.json小程序的生命周期1.小程序的結(jié)構(gòu)和組件1.1小程序項(xiàng)目的結(jié)構(gòu)├──pages······································

【目錄】存放所有的小程序頁(yè)面││──index·······································

【目錄】index頁(yè)面││├──index.wxml···························【文件】index頁(yè)面的結(jié)構(gòu)││├──index.js··································

【文件】index頁(yè)面的邏輯││├──index.json·····························【文件】index頁(yè)面的配置││└──index.wxss····························【文件】index頁(yè)面的樣式│└──logs··········································【目錄】logs頁(yè)面│├──logs.wxml································【文件】logs頁(yè)面的結(jié)構(gòu)│└──logs.js·······································【文件】logs頁(yè)面的邏輯└──utils········································【目錄】存放小程序中用到的工具函數(shù)├──app.js····································

【文件】小程序邏輯├──app.json·······························【文件】小程序的公共配置├──app.wxss······························

【文件】小程序公共樣式表├──project.config.json···········【文件】開發(fā)工具配置文件注意：對(duì)于小程序來(lái)說(shuō)：

app.js和app.json文件是必須的對(duì)于小程序的頁(yè)面來(lái)說(shuō)：

.js和.wxml文件是必須的1.小程序的結(jié)構(gòu)和組件1.2小程序頁(yè)面的結(jié)構(gòu)1.小程序頁(yè)面和Vue組件的對(duì)比每個(gè).vue組件，是由template模板結(jié)構(gòu)、script行為邏輯、style樣式3個(gè)部分組成的每個(gè)小程序的頁(yè)面，是由.wxml結(jié)構(gòu)、.js邏輯、.json配置、.wxss樣式表

這4個(gè)文件組成的templatescriptstyle.vue組件.wxml.js.json.wxss四個(gè)文件組合成一個(gè)完整的小程序頁(yè)面1.小程序的結(jié)構(gòu)和組件2.小程序頁(yè)面中每個(gè)組成部分的作用.wxml:用來(lái)描述當(dāng)前這個(gè)頁(yè)面的結(jié)構(gòu)，同時(shí)提供了類似于Vue中指令的語(yǔ)法.js:用來(lái)定義當(dāng)前頁(yè)面中用到的數(shù)據(jù)、交互邏輯和響應(yīng)用戶的操作.json:用來(lái)定義當(dāng)前頁(yè)面的個(gè)性化配置，例如，為每個(gè)頁(yè)面單獨(dú)配置頂部顏色、是否允許下拉刷新等.wxss:用來(lái)定義樣式來(lái)美化當(dāng)前的頁(yè)面1.2小程序頁(yè)面的結(jié)構(gòu)1.小程序的結(jié)構(gòu)和組件3.創(chuàng)建自己的小程序頁(yè)面在pages目錄上右鍵，選擇“新建目錄”，并將目錄命名為home在新建的home目錄上右鍵，選擇“新建page”,并將頁(yè)面命名為home1.2小程序頁(yè)面的結(jié)構(gòu)注意：選擇“新建page”后，開發(fā)者工具會(huì)自動(dòng)創(chuàng)建頁(yè)面相關(guān)的4個(gè)文件1.小程序的結(jié)構(gòu)和組件4.設(shè)置小程序項(xiàng)目的默認(rèn)首頁(yè)打開app.json全局配置文件，找到pages節(jié)點(diǎn)。這個(gè)pages節(jié)點(diǎn)是一個(gè)數(shù)組，存儲(chǔ)了項(xiàng)目中所有頁(yè)面的訪問路徑。其中，pages數(shù)組中第一個(gè)頁(yè)面路徑，就是小程序項(xiàng)目的默認(rèn)首頁(yè)。修改pages數(shù)組中路徑的順序，即可修改小程序的默認(rèn)首頁(yè)。1.2小程序頁(yè)面的結(jié)構(gòu)1.小程序的結(jié)構(gòu)和組件1.3小程序常用的UI組件小程序提供了豐富的基礎(chǔ)組件給開發(fā)者，開發(fā)者可以像搭積木一樣，組合各種組件拼合成自己的小程序。小程序中的組件，就像HTML中的div，p標(biāo)簽的作用一樣，用于搭建頁(yè)面的基礎(chǔ)結(jié)構(gòu)。1.小程序的結(jié)構(gòu)和組件1.text文本屬性名類型默認(rèn)值說(shuō)明selectableBooleanfalse文本是否可選，除了text組件之外，其它組件都無(wú)法長(zhǎng)按選中spaceStringfalse顯示連續(xù)空格，可選值：ensp、emsp、nbspdecodeBooleanfalse是否解碼，可解析 <>&'  1.3小程序常用的UI組件1.小程序的結(jié)構(gòu)和組件2.view視圖容器屬性名類型默認(rèn)值說(shuō)明hover-classStringnone指定按下去的樣式類。當(dāng)

hover-class="none"

時(shí)，沒有點(diǎn)擊態(tài)效果hover-stop-propagationBooleanfalse指定是否阻止本節(jié)點(diǎn)的祖先節(jié)點(diǎn)出現(xiàn)點(diǎn)擊態(tài)hover-start-timeNumber50按住后多久出現(xiàn)點(diǎn)擊態(tài)，單位毫秒hover-stay-timeNumber400手指松開后點(diǎn)擊態(tài)保留時(shí)間，單位毫秒1.3小程序常用的UI組件1.小程序的結(jié)構(gòu)和組件3.button按鈕屬性名類型默認(rèn)值說(shuō)明sizeStringdefault按鈕的大小typeStringdefault按鈕的樣式類型plainBooleanfalse按鈕是否鏤空，背景色透明disabledBooleanfalse是否禁用loadingBooleanfalse名稱前是否帶loading圖標(biāo)1.3小程序常用的UI組件1.小程序的結(jié)構(gòu)和組件4.input輸入框?qū)傩悦愋湍J(rèn)值說(shuō)明valueString輸入框的初始內(nèi)容typeString"text"input的類型passwordBooleanfalse是否是密碼類型placeholderString輸入框?yàn)榭諘r(shí)占位符disabledBooleanfalse是否禁用maxlengthNumber140最大輸入長(zhǎng)度，設(shè)置為-1時(shí)不限制最大長(zhǎng)度1.3小程序常用的UI組件1.小程序的結(jié)構(gòu)和組件5.image圖片常見的屬性：src：支持本地和網(wǎng)絡(luò)上的圖片mode：指定圖片裁剪、縮放的模式注意：image組件默認(rèn)寬度300px、高度225px更多屬性用法請(qǐng)翻閱image官方文檔：

1.3小程序常用的UI組件小程序的結(jié)構(gòu)和組件小程序中的樣式使用全局配置文件app.json使用頁(yè)面配置文件page.json小程序的生命周期2.小程序中的樣式2.1什么是WXSSWXSS(WeiXinStyleSheets)是一套樣式語(yǔ)言，用來(lái)決定WXML的組件應(yīng)該怎么顯示；WXSS具有CSS大部分特性；WXSS對(duì)CSS進(jìn)行了擴(kuò)充以及修改，以適應(yīng)微信小程序的開發(fā)；與CSS相比，WXSS擴(kuò)展的特性有：尺寸單位樣式導(dǎo)入csswxssid選擇器標(biāo)簽選擇器etc…尺寸單位樣式導(dǎo)入WXSS與CSS的關(guān)系2.小程序中的樣式2.2WXSS目前支持的選擇器標(biāo)簽選擇器id選擇器class選擇器偽類選擇器data-*屬性選擇器:nth-of-type()等常用的css3選擇器etc…2.小程序中的樣式2.3什么是rpx尺寸單位rpx（responsivepixel）:是微信小程序解決自適應(yīng)屏幕尺寸的尺寸單位?？梢愿鶕?jù)屏幕寬度進(jìn)行自適應(yīng)。不論大小屏幕，規(guī)定屏幕寬為750rpx。通過rpx設(shè)置元素和字體的大小，小程序在不同尺寸的屏幕上，可以實(shí)現(xiàn)自動(dòng)適配。2.小程序中的樣式2.4rpx與px之間的換算以iPhone6為例，iPhone6的屏幕寬度為375px，共有750個(gè)物理像素，則750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。設(shè)備rpx換算px(屏幕寬度/750)px換算rpx(750/屏幕寬度)iPhone51rpx=0.42px1px=2.34rpxiPhone61rpx=0.5px1px=2rpxiPhone6Plus1rpx=0.552px1px=1.81rpx如果要繪制寬100px，高20px的盒子，換算成rpx單位，寬高分別為200rpx和40rpx。2.小程序中的樣式2.5rpx和iPhone6設(shè)計(jì)稿的關(guān)系官方建議：開發(fā)微信小程序時(shí)，設(shè)計(jì)師可以用iPhone6作為視覺稿的標(biāo)準(zhǔn)。如果要根據(jù)iPhone6的設(shè)計(jì)稿，繪制小程序頁(yè)面，可以直接把單位從px替換為rpx。例如，假設(shè)iPhone6設(shè)計(jì)稿上，要繪制一個(gè)寬高為200px的盒子，換算為rpx為200rpx。2.小程序中的樣式案例：使用rpx繪制占屏幕寬度一半的盒子需求描述：使用rpx尺寸單位，繪制一個(gè)紅色背景的view組件，使之在各種尺寸的移動(dòng)端屏幕上，能夠自適應(yīng)調(diào)整自身的寬度，都顯示為占屏幕寬度的一半。2.小程序中的樣式案例：實(shí)現(xiàn)步驟1.搭建頁(yè)面的wxml結(jié)構(gòu)

<viewclass="v1">使用rpx繪制占屏幕寬度一半的盒子</view>通過class屬性，為view組件添加類名為v1注意：這里添加的類名，是為了方便后續(xù)為組件添加樣式2.小程序中的樣式案例：實(shí)現(xiàn)步驟2.編寫wxss的樣式.v1{width:375rpx;height:375rpx;background-color:red;}注意：這里標(biāo)紅的屬性width，它的值被設(shè)置為了375rpx后，就能夠?qū)崿F(xiàn)需求效果了；原因：小程序中的rpx尺寸單位，把所有寬度尺寸的屏幕，統(tǒng)一劃分為了750份，不論大屏幕還是小屏幕，375rpx會(huì)被小程序識(shí)別，并渲染為屏幕寬度的一半。2.小程序中的樣式2.6@import樣式導(dǎo)入使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表；語(yǔ)法格式為：@import“wxss樣式表的相對(duì)路徑”;2.小程序中的樣式2.7全局樣式與局部樣式1.全局樣式定義在app.wxss中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。2.局部樣式在page的wxss文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁(yè)面，并會(huì)覆蓋app.wxss中相同的選擇器。小程序的結(jié)構(gòu)和組件小程序中的樣式使用全局配置文件app.json使用頁(yè)面配置文件page.json小程序的生命周期3.使用全局配置文件app.json3.1app.json配置文件的作用小程序根目錄下的app.json文件用來(lái)對(duì)微信小程序進(jìn)行全局配置，它決定了頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多tab等。在app.json配置文件中，最主要的配置節(jié)點(diǎn)是：

pages數(shù)組：配置小程序的頁(yè)面路徑

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

tabBar對(duì)象：配置小程序的tab欄效果3.使用全局配置文件app.json3.2pages–配置小程序的頁(yè)面路徑pages用于指定小程序由哪些頁(yè)面組成，每一項(xiàng)都對(duì)應(yīng)一個(gè)頁(yè)面的路徑+文件名信息。文件名不需要寫文件后綴，框架會(huì)自動(dòng)去尋找對(duì)應(yīng)位置的.json、.js、.wxml和.wxss四個(gè)文件進(jìn)行處理。3.使用全局配置文件app.json1.自動(dòng)創(chuàng)建新頁(yè)面回顧：之前創(chuàng)建新頁(yè)面，需要新建頁(yè)面目錄->新建頁(yè)面文件->修改pages數(shù)組現(xiàn)在推薦的方式：打開app.json->pages數(shù)組節(jié)點(diǎn)->新增頁(yè)面路徑并保存->自動(dòng)創(chuàng)建路徑對(duì)應(yīng)的頁(yè)面3.2pages–配置小程序的頁(yè)面路徑3.使用全局配置文件app.json2.設(shè)置默認(rèn)首頁(yè)打開app.json->pages數(shù)組節(jié)點(diǎn)按需調(diào)整數(shù)組中路徑的順序，即可修改默認(rèn)首頁(yè)3.2pages–配置小程序的頁(yè)面路徑注意：數(shù)組的第一項(xiàng)代表小程序的初始頁(yè)面（首頁(yè)）。小程序中新增/減少頁(yè)面，都需要對(duì)pages數(shù)組進(jìn)行修改。3.使用全局配置文件app.json3.3小程序窗口的組成部分導(dǎo)航條區(qū)域背景區(qū)域，默認(rèn)不可見，下拉才顯示頁(yè)面主體區(qū)域，顯示wxml中的布局3.使用全局配置文件app.json3.4window節(jié)點(diǎn)常用的配置項(xiàng)屬性名類型默認(rèn)值說(shuō)明navigationBarTitleTextString字符串導(dǎo)航欄標(biāo)題文字內(nèi)容navigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色，如

#000000navigationBarTextStyleStringwhite導(dǎo)航欄標(biāo)題顏色，僅支持

black

/

whitebackgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉loading的樣式，僅支持

dark

/

lightenablePullDownRefreshBooleanfalse是否全局開啟下拉刷新。

詳見

Page.onPullDownRefreshonReachBottomDistanceNumber50頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離，單位為px。

詳見

Page.onReachBottom3.使用全局配置文件app.json1.設(shè)置導(dǎo)航欄標(biāo)題文字內(nèi)容設(shè)置步驟：app.json->window->navigationBarTitleText需求：把導(dǎo)航條上的標(biāo)題，從默認(rèn)的WeChat修改為黑馬程序員，效果如圖所示：3.4window節(jié)點(diǎn)常用的配置項(xiàng)3.使用全局配置文件app.json2.設(shè)置導(dǎo)航欄背景色設(shè)置步驟：app.json->window->navigationBarBackgroundColor需求：把導(dǎo)航條上的標(biāo)題，從默認(rèn)的#fff修改為#2b4b6b

，效果如圖所示：3.4window節(jié)點(diǎn)常用的配置項(xiàng)3.使用全局配置文件app.json3.設(shè)置導(dǎo)航欄標(biāo)題顏色設(shè)置步驟：app.json->window->navigationBarTextStyle需求：把導(dǎo)航條上的標(biāo)題，從默認(rèn)的black修改為white

，效果如圖所示：3.4window節(jié)點(diǎn)常用的配置項(xiàng)3.使用全局配置文件app.json4.全局開啟下拉刷新功能概念：下拉刷新是移動(dòng)端的專有名詞，通過手指在屏幕上的下拉滑動(dòng)操作，從而重新加載頁(yè)面數(shù)據(jù)的行為；設(shè)置步驟：app.json->window->把enablePullDownRefresh的值設(shè)置為true3.4window節(jié)點(diǎn)常用的配置項(xiàng)3.使用全局配置文件app.json5.設(shè)置下拉刷新窗口的背景色當(dāng)全局開啟下拉刷新功能之后，默認(rèn)的窗口背景為白色；如果自定義下拉刷新窗口背景色，設(shè)置步驟為:app.json->window->為backgroundColor

指定16進(jìn)制顏色值#eee效果如下：3.4window節(jié)點(diǎn)常用的配置項(xiàng)backgroundColor控制的區(qū)域3.使用全局配置文件app.json6.設(shè)置下拉loading的樣式當(dāng)全局開啟下拉刷新功能之后，默認(rèn)窗口的loading樣式為白色，如果要更改loading樣式的效果，設(shè)置步驟為app.json->window->為backgroundTextStyle

指定dark

值效果如下：3.4window節(jié)點(diǎn)常用的配置項(xiàng)backgroundTextStyle控制的區(qū)域3.使用全局配置文件app.json7.設(shè)置上拉觸底的距離概念：上拉觸底是移動(dòng)端的專有名詞，通過手指在屏幕上的上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為；設(shè)置步驟：app.json->window->為onReachBottomDistance設(shè)置新的數(shù)值注意：默認(rèn)距離為50px，如果沒有特殊需求，建議使用默認(rèn)值即可；3.4window節(jié)點(diǎn)常用的配置項(xiàng)3.使用全局配置文件app.json1.什么是tabBartabBar是移動(dòng)端應(yīng)用常見的頁(yè)面效果，用于實(shí)現(xiàn)多頁(yè)面的快速切換；小程序中通常將其分為底部tabBar和頂部tabBar。3.5tabBar-配置Tab欄底部tabBar頂部tabBar注意：tabBar中，只能配置最少2個(gè)、最多5個(gè)

tab頁(yè)簽，當(dāng)渲染頂部tabBar的時(shí)候，不顯示icon，只顯示文本3.使用全局配置文件app.json2.tabBar的組成部分backgroundColor：導(dǎo)航條背景色selectedIconPath：選中時(shí)的圖片路徑borderStyle：tabBar上邊框的顏色iconPath：未選中時(shí)的圖片路徑selectedColor：tab上的文字選中時(shí)的顏色color：tab上的文字默認(rèn)（未選中）顏色3.5tabBar-配置Tab欄backgroundColorselectedIconPathiconPathborderStyleselectedColorcolor3.使用全局配置文件app.json3.6tabBar節(jié)點(diǎn)的配置項(xiàng)屬性類型必填默認(rèn)值描述colorHexColor否tab上的文字默認(rèn)顏色selectedColorHexColor否tab上的文字選中時(shí)的顏色backgroundColorHexColor否tab的背景色borderStyleString否blacktabBar上邊框的顏色，僅支持

black

/

whitelistArray是tab的列表，詳見

list

屬性說(shuō)明，最少2個(gè)、最多5個(gè)tabpositionString否bottomtabBar的位置，僅支持

bottom

/

top3.使用全局配置文件app.json3.7tabBar節(jié)點(diǎn)中l(wèi)ist的配置項(xiàng)屬性類型必填描述pagePathString是頁(yè)面路徑，必須在pages中先定義textString是tab上按鈕文字iconPathString否圖片路徑；icon大小限制為40kb，建議尺寸為81px*81px，不支持網(wǎng)絡(luò)圖。當(dāng)

postion

為

top

時(shí)，不顯示icon。selectedIconPathString否選中時(shí)的圖片路徑；icon大小限制為40kb，建議尺寸為81px*81px，不支持網(wǎng)絡(luò)圖片。

當(dāng)

postion

為

top

時(shí)，不顯示icon。3.使用全局配置文件app.json案例：配置tabBar需求描述：根據(jù)資料中提供的小圖標(biāo)、在小程序中配置如圖所示的tabBar。3.使用全局配置文件app.json案例：實(shí)現(xiàn)步驟1.通過app.json中的pages數(shù)組新建3個(gè)tab頁(yè)面{"pages":["pages/tabhome/tabhome","pages/tabmsg/tabmsg","pages/tabcontact/tabcontact"]}注意：tabhome是首頁(yè)，tabmsg是消息，tabcontact是聯(lián)系我們。3.使用全局配置文件app.json案例：實(shí)現(xiàn)步驟2.把資料中提供的小圖標(biāo)拷貝到項(xiàng)目指定目錄中在小程序根目錄中，新建assets->images目錄；把資料中提供的6個(gè)小圖標(biāo)，拷貝到新建的images目錄中；將需要用到的小圖標(biāo)分為3組，每組兩個(gè)，其中圖片名稱中包含-active

的是選中之后的圖標(biāo)，不包含-active的是默認(rèn)圖標(biāo)，截圖如下：3.使用全局配置文件app.json案例：實(shí)現(xiàn)步驟3.配置tabBar選項(xiàng)打開app.json配置文件，和pages、window平級(jí)，新增tabBar節(jié)點(diǎn)；tabBar節(jié)點(diǎn)中，新增list數(shù)組，這個(gè)數(shù)組中存放的，是每個(gè)tab頁(yè)的配置對(duì)象；在list數(shù)組中，新增每一個(gè)tab頁(yè)的配置對(duì)象。對(duì)象中包含的屬性與作用如下：

pagePath指定當(dāng)前tab對(duì)應(yīng)的頁(yè)面路徑【必填】

text

指定當(dāng)前tab上按鈕的文字【必填】

iconPath

指定當(dāng)前tab未選中時(shí)候的圖片路徑【可選】

selectedIconPath

指定當(dāng)前tab被選中后高亮的圖片路徑【可選】3.使用全局配置文件app.json4.tabBar節(jié)點(diǎn)配置的完整代碼{"tabBar":{"list":[{"pagePath":"pages/tabhome/tabhome","text":"首頁(yè)","iconPath":"/assets/images/home.png","selectedIconPath":"/assets/images/home-active.png"},{"pagePath":"pages/tabmsg/tabmsg","text":"消息","iconPath":"/assets/images/message.png","selectedIconPath":"/assets/images/message-active.png"},{"pagePath":"pages/tabcontact/tabcontact","text":"聯(lián)系我們","iconPath":"/assets/images/contact.png","selectedIconPath":"/assets/images/contact-active.png"}]}小程序的結(jié)構(gòu)和組件小程序中的樣式使用全局配置文件app.json使用頁(yè)面配置文件page.json小程序的生命周期4.使用頁(yè)面配置文件page.json小程序中，app.json中的window節(jié)點(diǎn)，可以全局配置小程序中每個(gè)頁(yè)面的窗口表現(xiàn)；如果某些小程序頁(yè)面，想要擁有特殊的窗口表現(xiàn)，此時(shí)，“頁(yè)面級(jí)別的.json配置文件”就可以實(shí)現(xiàn)這種需求；總結(jié)：頁(yè)面級(jí)別配置優(yōu)先于全局配置生效。4.1頁(yè)面級(jí)別和全局級(jí)別配置的關(guān)系4.使用頁(yè)面配置文件page.json4.2頁(yè)面配置文件中可選的配置項(xiàng)列表屬性類型默認(rèn)值描述navigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色，如

#000000navigationBarTextStyleStringwhite導(dǎo)航欄標(biāo)題顏色，僅支持

black

/

whitenavigationBarTitleTextString導(dǎo)航欄標(biāo)題文字內(nèi)容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉loading的樣式，僅支持

dark

/

light注意：頁(yè)面的.json只能設(shè)置window相關(guān)的配置項(xiàng)，以決定本頁(yè)面的窗口表現(xiàn)。4.使用頁(yè)面配置文件page.json4.2頁(yè)面配置文件中可選的配置項(xiàng)列表屬性類型默認(rèn)值描述enablePullDownRefreshBooleanfalse是否全局開啟下拉刷新。

詳見

Page.onPullDownRefreshonReachBottomDistanceNumber50頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離，單位為px。

詳見

Page.onReachBottomdisableScrollBooleanfalse設(shè)置為

true

則頁(yè)面整體不能上下滾動(dòng)；只在頁(yè)面配置中有效，無(wú)法在

app.json

中設(shè)置該項(xiàng)注意：頁(yè)面的.json只能設(shè)置window相關(guān)的配置項(xiàng)，以決定本頁(yè)面的窗口表現(xiàn)；小程序的結(jié)構(gòu)和組件小程序中的樣式使用全局配置文件app.json使用頁(yè)面配置文件page.json小程序的生命周期5.小程序中的生命周期生命周期（LifeCycle）是指一個(gè)對(duì)象從創(chuàng)建

->運(yùn)行

->銷毀的整個(gè)階段，強(qiáng)調(diào)的是一個(gè)時(shí)間段。例如：張三出生，表示這個(gè)人生命周期的開始張三死亡，表示這個(gè)人生命周期的結(jié)束中間張三的一生，就是張三的生命周期我們可以把每個(gè)小程序運(yùn)行的過程，也概括為生命周期：小程序的啟動(dòng)，表示生命周期的開始小程序的關(guān)閉，表示生命周期的結(jié)束中間小程序運(yùn)行的過程，就是小程序的生命周期5.1什么是生命周期5.小程序中的生命周期在小程序中，包含兩種類型的生命周期：

應(yīng)用生命周期：特指小程序從啟動(dòng)->運(yùn)行->銷毀的過程；

頁(yè)面生命周期：特指小程序中，每個(gè)頁(yè)面的加載->渲染->銷毀的過程；其中，頁(yè)面的生命周期范圍較小，應(yīng)用程序的生命周期范圍較大，如圖所示：5.2生命周期的兩種類型小程序結(jié)束小程序啟動(dòng)頁(yè)面A的生命周期頁(yè)面B的生命周期頁(yè)面C的生命周期etc…5.小程序中的生命周期生命周期函數(shù)：是由小程序框架提供的內(nèi)置函數(shù)，會(huì)伴隨著生命周期，自動(dòng)按次序執(zhí)行；5.3什么是生命周期函數(shù)生命周期函數(shù)的作用：允許程序員在特定的生命周期時(shí)間點(diǎn)上，執(zhí)行某些特定的操作。例如，頁(yè)面剛加載的時(shí)候，在生命周期函數(shù)中自動(dòng)發(fā)起數(shù)據(jù)請(qǐng)求，獲取當(dāng)前頁(yè)面的數(shù)據(jù)；注