更新時(shí)間:2023-03-09 來源:黑馬程序員 瀏覽量:
小程序官方建議把所有小程序的頁面,都存放在pages 目錄中,以單獨(dú)的文件夾存在,如圖所示:
其中,每個(gè)頁面由4 個(gè)基本文件組成,它們分別是:js文件(頁面的腳本文件,存放頁面的數(shù)據(jù)、事件處理函數(shù)等)、json文件(當(dāng)前頁面的配置文件,配置窗口的外觀、表現(xiàn)等),.wxml 文件(頁面的模板結(jié)構(gòu)文件)和.wxss 文件(當(dāng)前頁面的樣式表文件)。下面來詳細(xì)介紹:
1.JSON 配置文件的作用
JSON 是一種數(shù)據(jù)格式,在實(shí)際開發(fā)中,JSON 總是以配置文件的形式出現(xiàn)。小程序項(xiàng)目中也不例外:通過不同
的.json 配置文件,可以對(duì)小程序項(xiàng)目進(jìn)行不同級(jí)別的配置。
小程序項(xiàng)目中有4 種json 配置文件,分別是:
①項(xiàng)目根目錄中的app.json 配置文件
②項(xiàng)目根目錄中的project.config.json 配置文件
③項(xiàng)目根目錄中的sitemap.json配置文件
④每個(gè)頁面文件夾中的.json 配置文件
2. app.json 文件
app.json 是當(dāng)前小程序的全局配置,包括了小程序的所有頁面路徑、窗口外觀、界面表現(xiàn)、底部tab 等。Demo 項(xiàng)目里邊的app.json 配置內(nèi)容如下:
簡(jiǎn)單了解下這4 個(gè)配置項(xiàng)的作用:
①pages:用來記錄當(dāng)前小程序所有頁面的路徑
②window:全局定義小程序所有頁面的背景色、文字顏色等
③style:全局定義小程序組件所使用的樣式版本
④sitemapLocation:用來指明sitemap.json的位置。
3. project.config.json 文件
project.config.json 是項(xiàng)目配置文件,用來記錄我們對(duì)小程序開發(fā)工具所做的個(gè)性化配置,例如:
?setting中保存了編譯相關(guān)的配置
?projectname中保存的是項(xiàng)目名稱
?appid中保存的是小程序的賬號(hào)ID
4.sitemap.json文件
微信現(xiàn)已開放小程序內(nèi)搜索,效果類似于PC 網(wǎng)頁的SEO。sitemap.json文件用來配置小程序頁面是否允許微信索引。
當(dāng)開發(fā)者允許微信索引時(shí),微信會(huì)通過爬蟲的形式,為小程序的頁面內(nèi)容建立索引。當(dāng)用戶的搜索關(guān)鍵字和頁面的索引匹配成功的時(shí)候,小程序的頁面將可能展示在搜索結(jié)果中。
注意:sitemap 的索引提示是默認(rèn)開啟的,如需要關(guān)閉sitemap 的索引提示,可在小程序項(xiàng)目配置文件project.config.json 的setting中配置字段checkSiteMap為false。
5. 頁面的.json 配置文件
小程序中的每一個(gè)頁面,可以使用.json 文件來對(duì)本頁面的窗口外觀進(jìn)行配置,頁面中的配置項(xiàng)會(huì)覆蓋app.json 的window 中相同的配置項(xiàng)。例如:
6. 新建小程序頁面
只需要在app.json -> pages中新增頁面的存放路徑,小程序開發(fā)者工具即可幫我們自動(dòng)創(chuàng)建對(duì)應(yīng)的頁面文件,如圖所示:
7. 修改項(xiàng)目首頁
只需要調(diào)整app.json -> pages數(shù)組中頁面路徑的前后順序,即可修改項(xiàng)目的首頁。小程序會(huì)把排在第一位的頁面,當(dāng)作項(xiàng)目首頁進(jìn)行渲染,如圖所示:
1. 什么是WXML
WXML(WeiXin Markup Language)是小程序框架設(shè)計(jì)的一套標(biāo)簽語言,用來構(gòu)建小程序頁面的結(jié)構(gòu),其作用類似于網(wǎng)頁開發(fā)中的HTML。
2. WXML 和HTML 的區(qū)別
①標(biāo)簽名稱不同
?HTML (div, span, img, a)
?WXML(view, text, image, navigator)
②屬性節(jié)點(diǎn)不同
<a href="#">超鏈接</a> <navigator url="/pages/home/home"></navigator>
③提供了類似于Vue 中的模板語法
?數(shù)據(jù)綁定
?列表渲染
?條件渲染
1. 什么是WXSS
WXSS (WeiXin Style Sheets)是一套樣式語言,用于描述WXML 的組件樣式,類似于網(wǎng)頁開發(fā)中的CSS。
2. WXSS 和CSS 的區(qū)別
①新增了rpx 尺寸單位
?CSS 中需要手動(dòng)進(jìn)行像素單位換算,例如rem
?WXSS 在底層支持新的尺寸單位rpx,在不同大小的屏幕上小程序會(huì)自動(dòng)進(jìn)行換算
②提供了全局的樣式和局部樣式
?項(xiàng)目根目錄中的app.wxss 會(huì)作用于所有小程序頁面
?局部頁面的.wxss 樣式僅對(duì)當(dāng)前頁面生效
③WXSS 僅支持部分CSS 選擇器
?.class 和#id
?element
?并集選擇器、后代選擇器
?::after 和::before 等偽類選擇器
1. 小程序中的.js 文件
一個(gè)項(xiàng)目?jī)H僅提供界面展示是不夠的,在小程序中,我們通過.js 文件來處理用戶的操作。例如:響應(yīng)用戶的點(diǎn)擊、獲取用戶的位置等等。
2. 小程序中.js 文件的分類
小程序中的JS 文件分為三大類,分別是:
①app.js
是整個(gè)小程序項(xiàng)目的入口文件,通過調(diào)用App() 函數(shù)來啟動(dòng)整個(gè)小程序。
②頁面的.js 文件
是頁面的入口文件,通過調(diào)用Page() 函數(shù)來創(chuàng)建并運(yùn)行頁面。
③普通的.js 文件
是普通的功能模塊文件,用來封裝公共的函數(shù)或?qū)傩怨╉撁媸褂谩?br/>