第3章 微信小程序起步

第3章微信小程序起步小程序代碼組成小程序應(yīng)用能力小程序宿主環(huán)境小程序組件化01020403小程序代碼組成小程序代碼組成小程序開發(fā)與傳統(tǒng)的前端開發(fā)有著很大的區(qū)別，不管什么類型的前端技術(shù)，都是由以下三種技術(shù)組成：靜態(tài)標(biāo)簽文件（HTML），靜態(tài)標(biāo)簽決定了前端頁面的基本骨架是如何構(gòu)成的；樣式文件（CSS），樣式文件可以讓前端的頁面凸顯自身的美術(shù)風(fēng)格；動(dòng)態(tài)腳本文件（JavaScript），動(dòng)態(tài)腳本可以讓前端頁面與用戶進(jìn)行交互。小程序代碼組成小程序雖然與傳統(tǒng)的前端開發(fā)有所區(qū)別，但是也脫離不了前端的固定模式。小程序擁有四種文件類型，分別是：wxml文件，類似于傳統(tǒng)前端的HTML文件，用于靜態(tài)標(biāo)簽的編寫；wxss文件，與傳統(tǒng)前端的CSS文件功能類似，用于頁面樣式的編寫；js文件，與傳統(tǒng)前端的JavaScript腳本功能類似，用于頁面交互邏輯的編寫；json文件，在傳統(tǒng)前端頁面開發(fā)中沒有json文件，小程序的json文件主要用于頁面配置，如頁面標(biāo)題、顏色、樣式的配置等。小程序代碼組成微信開發(fā)者工具中的頁面文件：小程序代碼組成WXML文件以.wxml作為后綴，一個(gè)完整的WXML語句由一段開始標(biāo)簽和結(jié)束標(biāo)簽組成，在標(biāo)簽中可以是內(nèi)容，也可以是其他的WXML語句，這一點(diǎn)上與HTML是一致的。WXML基本語法如下：<!s/wxml/index.wxml--><text>pages/wxml/index.wxml</text>小程序代碼組成WXSS（WeiXinStyleSheets）是一套用于小程序的樣式語言，用于描述WXML的組件樣式，提升視覺上的效果。WXSS與傳統(tǒng)前端開發(fā)中的CSS類似，為了更適合小程序開發(fā)，WXSS對CSS做了一個(gè)補(bǔ)充和擴(kuò)展，例如尺寸單位、樣式導(dǎo)入等。小程序代碼組成小程序的JavaScript是由ECMAScript以及小程序的框架和API來實(shí)現(xiàn)的，與瀏覽器中的JavaScript相比沒有BOM和DOM對象，所以類似于jQuery、Zepto這種瀏覽器類庫是無法在小程序中運(yùn)行起來的，同樣的缺少Native模塊和NPM包管理的機(jī)制。所以這就導(dǎo)致小程序中無法加載原生庫，也無法直接使用大部分的NPM依賴包。小程序代碼組成JOSN文件作為小程序中的靜態(tài)配置文件，在小程序運(yùn)行之前就決定了小程序的一些表現(xiàn)，需要注意的是小程序無法在運(yùn)行過程中去動(dòng)態(tài)更新JSON配置，如果JSON配置文件的內(nèi)容發(fā)生了更改，需要重新編譯當(dāng)前的項(xiàng)目才能生效。小程序宿主環(huán)境小程序宿主環(huán)境小程序是基于雙線程模型的，包括渲染層和邏輯層。小程序渲染層的界面使用了WebView進(jìn)行渲染；邏輯層采用JsCore線程運(yùn)行JS腳本。小程序宿主環(huán)境一個(gè)小程序存在多個(gè)界面，所以渲染層存在多個(gè)WebView線程，這兩個(gè)線程的通信會經(jīng)由微信客戶端做中轉(zhuǎn)，邏輯層發(fā)送網(wǎng)絡(luò)請求也經(jīng)由Native轉(zhuǎn)發(fā)。小程序宿主環(huán)境在小程序中，任何渲染層的行為事件都需要向開發(fā)者反饋，這種事件行為有可能是用戶主動(dòng)觸發(fā)的，也有可能是組件狀態(tài)改變而觸發(fā)的，無論哪種狀態(tài)的事件觸發(fā)。無論哪種狀態(tài)的事件觸發(fā)行為，都需要被微信客戶端捕獲，然后由開發(fā)者在邏輯層中處理。小程序宿主環(huán)境小程序應(yīng)用能力小程序應(yīng)用能力原生CSS布局界面交互反饋HTTPS網(wǎng)絡(luò)通信本地?cái)?shù)據(jù)緩存連接設(shè)備硬件微信開放能力小程序提供的應(yīng)用能力包括：小程序組件化小程序組件化小程序基于Exparser框架設(shè)計(jì)的小程序內(nèi)置組件，涵蓋了視圖容器類、表單類、導(dǎo)航類、媒體類、開放類等幾十種組件。小程序組件化在小程序中，每個(gè)組件都具有獨(dú)立的邏輯空間，分別擁有自己的獨(dú)立數(shù)據(jù)和setData方法調(diào)用。在使用自定義組件的小程序頁面中，Exparser框架將接管所有的自定義組件注冊和實(shí)例化。小程序的基礎(chǔ)庫中提供了Page和Component兩個(gè)構(gòu)造器，自定義組件使用的是Component構(gòu)造器。小程序組件化常用的小程序UI組件庫有以下幾款：WeUI，是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信Web開發(fā)量身設(shè)計(jì)，可以令用戶的使用感知更加統(tǒng)一。VantWeapp，是有贊移動(dòng)端組件庫Vant的小程序版本，兩者基于相同的視覺規(guī)范，提供一致的API接口，助力開發(fā)者快速搭建小程序應(yīng)用。iViewWeapp，是由TalkingData發(fā)布的組件