本文介紹小程序項(xiàng)目中的頁(yè)面級(jí)文件尽爆，這些文件的作用，以及具體的配置字段和使用方式读慎。
小程序中的頁(yè)面級(jí)文件主要有四種類型漱贱，即每個(gè)頁(yè)面都應(yīng)該由4個(gè)文件組成。
小程序中同一框架頁(yè)面的這四個(gè)文件必須具有相同的路徑和文件名夭委，當(dāng)小程序啟動(dòng)進(jìn)入或頁(yè)面跳轉(zhuǎn)的時(shí)候幅狮，小程序內(nèi)部會(huì)自動(dòng)根據(jù)app.json配置路徑來(lái)找到對(duì)應(yīng)的資源進(jìn)行加載和渲染。單個(gè)頁(yè)面的四個(gè)文件分別是：
? 控制頁(yè)面邏輯的.js文件株灸，必要的
? 控制頁(yè)面結(jié)構(gòu)的.wxml文件崇摄，必要的。
? 控制頁(yè)面樣式的.wxss文件慌烧，非必要的逐抑。
? 控制頁(yè)面配置的.json文件，非必要的(如果創(chuàng)建那么使用{}表示空)屹蚊。
1.0 配置文件(.json)
每個(gè)頁(yè)面均可以擁有一個(gè)頁(yè)面配置文件厕氨，該文件是json格式的，在進(jìn)行配置的時(shí)候一定要嚴(yán)格遵守json數(shù)據(jù)的規(guī)范汹粤。
如果我們?cè)谛〕绦蝽?xiàng)目中新建-page,那么會(huì)自動(dòng)創(chuàng)建默認(rèn)的json文件命斧，但該文件并非是必須的。
頁(yè)面級(jí)別JSON文件配置項(xiàng)等同于app.json文件中的window配置項(xiàng)嘱兼，它只能控制當(dāng)前頁(yè)面的窗口表現(xiàn)国葬。
在渲染頁(yè)面的時(shí)候，頁(yè)面級(jí)文件中的window配置項(xiàng)會(huì)覆蓋app.json中相同的配置項(xiàng)。
這里列出頁(yè)面配置文件中的部分配置項(xiàng)：
{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#110e1e",
"navigationBarTitleText": "我的頁(yè)面",
"navigationBarTextStyle": "white",
"backgroundTextStyle":"#e02"
}
2.0 樣式文件(.wxss)
小程序中的樣式文件后綴名稱是.wxss汇四。
WXSS(WeiXin Style sheets)是基于CSS擴(kuò)展的樣式語(yǔ)言接奈，用于描述WXML的組件樣式。WXSS決定WXML的組件應(yīng)該怎么顯示船殉，它具有CSS的大部分特性鲫趁，并在CSS的基礎(chǔ)上擴(kuò)展了尺寸單位和樣式導(dǎo)入等特性。
尺寸單位
因?yàn)镃SS中原有的尺寸單位在不同尺寸的屏幕中不能完美的實(shí)現(xiàn)元素的按比例縮放利虫，所有WXSS在CSS尺寸單位的基礎(chǔ)上拓展了兩種尺寸單位挨厚。rem和rpx這兩種單位本身都是相對(duì)單位，在渲染的時(shí)候最終會(huì)被換算為px糠惫。
? rem 疫剃，全稱為root em
? rpx ，全稱為reponsive pixel
WXSS規(guī)定所有屏幕的寬度均為20rem硼讽。
iphone6 屏幕實(shí)際寬度為375px巢价，則20rem = 375px，那么在iphone6中固阁，1rem = 18.75px
iPhoneXS Max屏幕實(shí)際寬度為414px,則20rem = 414px壤躲，那么在iPhoneXS Max中，1rem = 20.7px
WXSS規(guī)定所有屏幕的寬度均為750rpx备燃。
iphone6 屏幕實(shí)際寬度為375px碉克，則750rpx = 375px，那么在iphone6中并齐，1rpx = 0.5px
iPhoneXS Max屏幕實(shí)際寬度為414px,則750rpx = 414px漏麦，那么在iPhoneXS Max中，1rpx = 0.552px
選擇器
CSS選擇器用于選擇需要應(yīng)用樣式的元素况褪。
WXSS僅實(shí)現(xiàn)了CSS中的部分選擇器撕贞，使用規(guī)則和CSS選擇器基本一致，目前支持的選擇器有：
| 選擇器 | 樣例 | 樣例描述 |
|---|---|---|
| .class | .intro |
選擇所有擁有 class="intro" 的組件（類選擇器） |
| #id | #firstname |
選擇擁有 id="firstname" 的組件（id 選擇器） |
| element | view |
選擇所有 view 組件（標(biāo)簽選擇器） |
| element, element | view, checkbox |
選擇所有的 view 組件和所有的 checkbox 組件（并列） |
| ::after | view::after |
在 view 組件后邊插入內(nèi)容( 偽元素選著器 ) |
| ::before | view::before |
在 view 組件前邊插入內(nèi)容( 偽元素選著器 ) |
3.0 結(jié)構(gòu)文件(.wxml)
WXML（WeiXin Markup Language）是小程序?qū)Ｓ玫囊惶讟?biāo)記語(yǔ)言测垛，同html類似用于展示并渲染界面捏膨。
WXML的渲染原理和React Native基本一致，它用一套標(biāo)記語(yǔ)言在不同平臺(tái)被解析為不同端的渲染文件食侮。
WXML標(biāo)記語(yǔ)言最終總是會(huì)轉(zhuǎn)換為宿主端對(duì)應(yīng)的語(yǔ)言脊奋，所以在小程序開發(fā)中WXML里使用的標(biāo)簽(組件)只能是小程序定義的而不能使用自定義標(biāo)簽，如此才能夠保證頁(yè)面在轉(zhuǎn)譯的時(shí)候能夠被正確處理疙描。
4.0 邏輯文件(.js)
這是一個(gè)JavaScript文件诚隙，里面寫JavaScript代碼。
頁(yè)面的邏輯文件主要負(fù)責(zé)：設(shè)置初始化數(shù)據(jù)起胰、注冊(cè)當(dāng)前頁(yè)面生命周期函數(shù)久又，注冊(cè)事件處理函數(shù)等巫延。
小程序的邏輯層文件都是JavaScript文件，整個(gè)項(xiàng)目中所有的這些JavaScript文件包括app.js最終都將被打包成一個(gè)js文件地消，該文件在小程序啟動(dòng)的時(shí)候運(yùn)行炉峰，直到小程序銷毀。小程序中每個(gè)頁(yè)面的邏輯文件都擁有獨(dú)立的作用域脉执，這些JavaScript文件運(yùn)行在獨(dú)立的JavaScript引擎中疼阔。
注意：因?yàn)樾〕绦蛑械腏avaScript文件在獨(dú)立的JavaScript引擎中運(yùn)行，所以不能使用前端開發(fā)中的DOM操作半夷，沒有document和window等對(duì)象婆廊，自然也無(wú)法使用jQuery等框架。
這里列出頁(yè)面中默認(rèn)生成的JavaScript代碼:
Page({
//頁(yè)面的初始數(shù)據(jù)
data: {},
//生命周期函數(shù)--監(jiān)聽頁(yè)面加載
onLoad: function (options) { },
//生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
onReady: function () { },
//生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
onShow: function () {},
//生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
onHide: function () { },
//生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
onUnload: function () {},
//頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
onPullDownRefresh: function () { },
//頁(yè)面上拉觸底事件的處理函數(shù)
onReachBottom: function () { },
//用戶點(diǎn)擊右上角分享
onShareAppMessage: function () { }
})
在頁(yè)面的js文件中巫橄，通過(guò)Page函數(shù)來(lái)注冊(cè)頁(yè)面淘邻，該函數(shù)接收一個(gè)Object類型的參數(shù)，該對(duì)象中的內(nèi)容主要分成頁(yè)面的初始數(shù)據(jù)(data屬性)湘换、生命周期函數(shù)和事件處理函數(shù)等宾舅。
在頁(yè)面的js文件中，可以通過(guò)var app = getApp()的方式來(lái)獲取全局的小程序?qū)嵗龑?duì)象(在app.js文件中通過(guò)App函數(shù)注冊(cè)的對(duì)象)彩倚。小程序框架以頁(yè)面棧的形式維護(hù)了當(dāng)前的所有頁(yè)面筹我，可以通過(guò)getCountPages函數(shù)來(lái)獲取當(dāng)前頁(yè)面棧的實(shí)例，該實(shí)例以數(shù)組形式按照棧的順序給出帆离，第一個(gè)元素為首頁(yè)最后一個(gè)元素為當(dāng)前頁(yè)(可以通過(guò)索引來(lái)獲取)崎溃。
