微信小程序的配置文件由哪些部分組成？

小程序官方建議把所有小程序的頁面，都存放在pages 目錄中，以單獨的文件夾存在，如圖所示：

其中，每個頁面由4 個基本文件組成，它們分別是：js文件(頁面的腳本文件，存放頁面的數(shù)據(jù)、事件處理函數(shù)等)、json文件(當(dāng)前頁面的配置文件，配置窗口的外觀、表現(xiàn)等)，.wxml 文件(頁面的模板結(jié)構(gòu)文件)和.wxss 文件(當(dāng)前頁面的樣式表文件)。下面來詳細(xì)介紹：

JSON 配置文件

1.JSON 配置文件的作用

JSON 是一種數(shù)據(jù)格式，在實際開發(fā)中，JSON 總是以配置文件的形式出現(xiàn)。小程序項目中也不例外：通過不同

的.json 配置文件，可以對小程序項目進(jìn)行不同級別的配置。

小程序項目中有4 種json 配置文件，分別是：

①項目根目錄中的app.json 配置文件

②項目根目錄中的project.config.json 配置文件

③項目根目錄中的sitemap.json配置文件

④每個頁面文件夾中的.json 配置文件

2. app.json 文件

app.json 是當(dāng)前小程序的全局配置，包括了小程序的所有頁面路徑、窗口外觀、界面表現(xiàn)、底部tab 等。Demo 項目里邊的app.json 配置內(nèi)容如下：

簡單了解下這4 個配置項的作用：

①pages：用來記錄當(dāng)前小程序所有頁面的路徑

②window：全局定義小程序所有頁面的背景色、文字顏色等

③style：全局定義小程序組件所使用的樣式版本

④sitemapLocation：用來指明sitemap.json的位置。

3. project.config.json 文件

project.config.json 是項目配置文件，用來記錄我們對小程序開發(fā)工具所做的個性化配置，例如：

?setting中保存了編譯相關(guān)的配置

?projectname中保存的是項目名稱

?appid中保存的是小程序的賬號ID

4.sitemap.json文件

微信現(xiàn)已開放小程序內(nèi)搜索，效果類似于PC 網(wǎng)頁的SEO。sitemap.json文件用來配置小程序頁面是否允許微信索引。

當(dāng)開發(fā)者允許微信索引時，微信會通過爬蟲的形式，為小程序的頁面內(nèi)容建立索引。當(dāng)用戶的搜索關(guān)鍵字和頁面的索引匹配成功的時候，小程序的頁面將可能展示在搜索結(jié)果中。

注意：sitemap 的索引提示是默認(rèn)開啟的，如需要關(guān)閉sitemap 的索引提示，可在小程序項目配置文件project.config.json 的setting中配置字段checkSiteMap為false。

5. 頁面的.json 配置文件

小程序中的每一個頁面，可以使用.json 文件來對本頁面的窗口外觀進(jìn)行配置，頁面中的配置項會覆蓋app.json 的window 中相同的配置項。例如：

6. 新建小程序頁面

只需要在app.json -> pages中新增頁面的存放路徑，小程序開發(fā)者工具即可幫我們自動創(chuàng)建對應(yīng)的頁面文件，如圖所示：

7. 修改項目首頁

只需要調(diào)整app.json -> pages數(shù)組中頁面路徑的前后順序，即可修改項目的首頁。小程序會把排在第一位的頁面，當(dāng)作項目首頁進(jìn)行渲染，如圖所示：

WXML 模板

1. 什么是WXML

WXML(WeiXin Markup Language)是小程序框架設(shè)計的一套標(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é)點不同

<a href="#">超鏈接</a>
<navigator url="/pages/home/home"></navigator>

③提供了類似于Vue 中的模板語法

?數(shù)據(jù)綁定

?列表渲染

?條件渲染

WXSS 樣式

1. 什么是WXSS

WXSS (WeiXin Style Sheets)是一套樣式語言，用于描述WXML 的組件樣式，類似于網(wǎng)頁開發(fā)中的CSS。

2. WXSS 和CSS 的區(qū)別

①新增了rpx 尺寸單位

?CSS 中需要手動進(jìn)行像素單位換算，例如rem

?WXSS 在底層支持新的尺寸單位rpx，在不同大小的屏幕上小程序會自動進(jìn)行換算

②提供了全局的樣式和局部樣式

?項目根目錄中的app.wxss 會作用于所有小程序頁面

?局部頁面的.wxss 樣式僅對當(dāng)前頁面生效

③WXSS 僅支持部分CSS 選擇器

?.class 和#id

?element

?并集選擇器、后代選擇器

?::after 和::before 等偽類選擇器

JS 邏輯交互

1. 小程序中的.js 文件

一個項目僅僅提供界面展示是不夠的，在小程序中，我們通過.js 文件來處理用戶的操作。例如：響應(yīng)用戶的點擊、獲取用戶的位置等等。

2. 小程序中.js 文件的分類

小程序中的JS 文件分為三大類，分別是：

①app.js

是整個小程序項目的入口文件，通過調(diào)用App() 函數(shù)來啟動整個小程序。

②頁面的.js 文件

是頁面的入口文件，通過調(diào)用Page() 函數(shù)來創(chuàng)建并運行頁面。

③普通的.js 文件

是普通的功能模塊文件，用來封裝公共的函數(shù)或?qū)傩怨╉撁媸褂谩?br/>