微信小程序的代碼由哪些結(jié)構(gòu)組成？

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

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

JSON 配置文件

1.JSON 配置文件的作用

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

的.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è)頁(yè)面文件夾中的.json 配置文件

2. app.json 文件

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

簡(jiǎn)單了解下這4 個(gè)配置項(xiàng)的作用：

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

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

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

④sitemapLocation：用來(lái)指明sitemap.json的位置。

3. project.config.json 文件

project.config.json 是項(xiàng)目配置文件，用來(lái)記錄我們對(duì)小程序開(kāi)發(fā)工具所做的個(gè)性化配置，例如：

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

?projectname中保存的是項(xiàng)目名稱(chēng)

?appid中保存的是小程序的賬號(hào)ID

4.sitemap.json文件

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

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

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

5. 頁(yè)面的.json 配置文件

小程序中的每一個(gè)頁(yè)面，可以使用.json 文件來(lái)對(duì)本頁(yè)面的窗口外觀(guān)進(jìn)行配置，頁(yè)面中的配置項(xiàng)會(huì)覆蓋app.json 的window 中相同的配置項(xiàng)。例如：

6. 新建小程序頁(yè)面

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

7. 修改項(xiàng)目首頁(yè)

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

WXML 模板

1. 什么是WXML

WXML(WeiXin Markup Language)是小程序框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，用來(lái)構(gòu)建小程序頁(yè)面的結(jié)構(gòu)，其作用類(lèi)似于網(wǎng)頁(yè)開(kāi)發(fā)中的HTML。

2. WXML 和HTML 的區(qū)別

①標(biāo)簽名稱(chēng)不同

?HTML (div, span, img, a)

?WXML(view, text, image, navigator)

②屬性節(jié)點(diǎn)不同

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

③提供了類(lèi)似于Vue 中的模板語(yǔ)法

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

?列表渲染

?條件渲染

WXSS 樣式

1. 什么是WXSS

WXSS (WeiXin Style Sheets)是一套樣式語(yǔ)言，用于描述WXML 的組件樣式，類(lèi)似于網(wǎng)頁(yè)開(kāi)發(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ì)作用于所有小程序頁(yè)面

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

③WXSS 僅支持部分CSS 選擇器

?.class 和#id

?element

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

?::after 和::before 等偽類(lèi)選擇器

JS 邏輯交互

1. 小程序中的.js 文件

一個(gè)項(xiàng)目?jī)H僅提供界面展示是不夠的，在小程序中，我們通過(guò).js 文件來(lái)處理用戶(hù)的操作。例如：響應(yīng)用戶(hù)的點(diǎn)擊、獲取用戶(hù)的位置等等。

2. 小程序中.js 文件的分類(lèi)

小程序中的JS 文件分為三大類(lèi)，分別是：

①app.js

是整個(gè)小程序項(xiàng)目的入口文件，通過(guò)調(diào)用App() 函數(shù)來(lái)啟動(dòng)整個(gè)小程序。

②頁(yè)面的.js 文件

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

③普通的.js 文件

是普通的功能模塊文件，用來(lái)封裝公共的函數(shù)或?qū)傩怨╉?yè)面使用。