1. 小程序沒有DOM對(duì)象，一切基于組件化

2. 小程序的四個(gè)重要的文件

• *.js —> view邏輯 —> javascript
• *.wxml —> view結(jié)構(gòu) ----> html
• *.wxss —> view樣式 -----> css
• *. json ----> view 數(shù)據(jù) -----> json文件

注意：為了方便開發(fā)者減少配置項(xiàng)，描述頁(yè)面的四個(gè)文件必須具有相同的路徑與文件名。

2.1 WXML

WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。WXML 充當(dāng)?shù)木褪穷愃?nbsp;HTML 的角色
要完整了解 WXML 語(yǔ)法，請(qǐng)參考WXML 語(yǔ)法參考。

2.2 WXSS

WXSS (WeiXin Style Sheets)是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式。

WXSS 用來(lái)決定 WXML 的組件應(yīng)該怎么顯示。

為了適應(yīng)廣大的前端開發(fā)者，WXSS 具有 CSS 大部分特性。同時(shí)為了更適合開發(fā)微信小程序，WXSS 對(duì) CSS 進(jìn)行了擴(kuò)充以及修改。

與 CSS 相比，WXSS 擴(kuò)展的特性有：



尺寸單位

樣式導(dǎo)入

2.3 json

JSON 是一種數(shù)據(jù)格式，并不是編程語(yǔ)言，在小程序中，JSON扮演的靜態(tài)配置的角色。



全局配置

小程序根目錄下的 app.json 文件用來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。



頁(yè)面配置

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



工具配置 project.config.json

通常大家在使用一個(gè)工具的時(shí)候，都會(huì)針對(duì)各自喜好做一些個(gè)性化配置，例如界面顏色、編譯配置等等，當(dāng)你換了另外一臺(tái)電腦重新安裝工具的時(shí)候，你還要重新配置。

考慮到這點(diǎn)，小程序開發(fā)者工具在每個(gè)項(xiàng)目的根目錄都會(huì)生成一個(gè) project.config.json，你在工具上做的任何配置都會(huì)寫入到這個(gè)文件，當(dāng)你重新安裝工具或者換電腦工作時(shí)，你只要載入同一個(gè)項(xiàng)目的代碼包，開發(fā)者工具就自動(dòng)

注意：

JSON文件都是被包裹在一個(gè)大括號(hào)中 {}，通過key-value的方式來(lái)表達(dá)數(shù)據(jù)。JSON的Key必須包裹在一個(gè)雙引號(hào)中，在實(shí)踐中，編寫 JSON 的時(shí)候，忘了給 Key 值加雙引號(hào)或者是把雙引號(hào)寫成單引號(hào)是常見錯(cuò)誤。

JSON的值只能是以下幾種數(shù)據(jù)格式，其他任何格式都會(huì)觸發(fā)報(bào)錯(cuò)，例如 JavaScript 中的 undefined。



數(shù)字，包含浮點(diǎn)數(shù)和整數(shù)

字符串，需要包裹在雙引號(hào)中

Bool值，true 或者 false

數(shù)組，需要包裹在方括號(hào)中 []

對(duì)象，需要包裹在大括號(hào)中 {}

Null

還需要注意的是 JSON 文件中無(wú)法使用注釋，試圖添加注釋將會(huì)引發(fā)報(bào)錯(cuò)。

2.4 js

一個(gè)服務(wù)僅僅只有界面展示是不夠的，還需要和用戶做交互：響應(yīng)用戶的點(diǎn)擊、獲取用戶的位置等等。在小程序里邊，我們就通過編寫 JS 腳本文件來(lái)處理用戶的操作。

注冊(cè)頁(yè)面

對(duì)于小程序中的每個(gè)頁(yè)面，都需要在頁(yè)面對(duì)應(yīng)的 js 文件中進(jìn)行注冊(cè)，指定頁(yè)面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等



使用 Page 構(gòu)造器注冊(cè)頁(yè)面

簡(jiǎn)單的頁(yè)面可以使用 Page() 進(jìn)行構(gòu)造。



使用 Component 構(gòu)造器構(gòu)造頁(yè)面

Page 構(gòu)造器適用于簡(jiǎn)單的頁(yè)面。但對(duì)于復(fù)雜的頁(yè)面， Page 構(gòu)造器可能并不好用。

此時(shí)，可以使用 Component 構(gòu)造器來(lái)構(gòu)造頁(yè)面。 Component 構(gòu)造器的主要區(qū)別是：方法需要放在 methods: { } 里面。

————————————————

版權(quán)聲明：本文為CSDN博主「前端嵐楓」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/yilanyoumeng3/java/article/details/106292742