微信小程序框架解析

1、微信小程序框架解析微信小程序框架解析SofteemSofteem楊標(biāo)楊標(biāo)一、一、小程序介紹和演示小程序介紹和演示微信小程序是國內(nèi)騰訊公司推出的一款類APP應(yīng)用平臺(tái)，用戶和開發(fā)者可以在依據(jù)騰訊發(fā)布的API文檔與微信Web開發(fā)者工具進(jìn)行開發(fā)，其程序主要有以下幾個(gè)特點(diǎn)：1、類Web的應(yīng)用程序，但不是HTML52、即用即走，隨手可得3、擁有離線能力4、基于微信跨平臺(tái)5、媲美原生操作體驗(yàn)如圖所示：左圖是一個(gè)微信小程序的界面。微信小程序采用Nati

2、ve預(yù)告加載一個(gè)WebView。當(dāng)打開指定頁面時(shí)，無需加載額外資源直接渲染，這種操作方式極大的改善了用戶的操作體驗(yàn)，達(dá)到了原生APP的操作效果。在視圖層中，微信的WXML作為標(biāo)簽的布局，它支持?jǐn)?shù)據(jù)綁定，輸運(yùn)運(yùn)算，同時(shí)還支持模板引用（template），這些與HTML里面的差不多，唯一有一點(diǎn)區(qū)別的就是在事件綁定這一塊。在微信的視圖層事件綁定時(shí)面，微信不事件采用的是bind的策略，與HTML里面的on是不一樣的，但同時(shí)也支持事件冒泡。微信自

3、己封裝了一系列的視圖層事件，如bindtap點(diǎn)擊，bindlongtap長按，這些事件針對(duì)移動(dòng)端做了進(jìn)一步的優(yōu)化，例其能夠符合移動(dòng)端APP的操作習(xí)慣而作為界面樣式控制的WXSS它支持大部分的CSS，同時(shí)，它新增了一個(gè)尺寸單位rpx，這個(gè)單位可以根據(jù)屏幕的寬度進(jìn)行自適用，這點(diǎn)是一個(gè)很大的進(jìn)步，它可以使微信小程序在不同的手機(jī)屏幕下面進(jìn)行自適用（這一點(diǎn)在以前的HTMLCSS上面，需要通過vw、rem、em或者媒體查詢來進(jìn)行），同時(shí)，可以使用@

4、impt來導(dǎo)入外部的樣式文件，但在這里有一點(diǎn)要說明的就是，WXSS里在，不支持多層選擇器，這樣就避免了組件的內(nèi)部樣式被污染。在CSS里面，我們常用的選擇器有9種，而在微信小程序里面，進(jìn)行精簡了很多，具體我做了個(gè)列表，如下：在上圖當(dāng)中，我們可以看出，微信小程序的WXSS支持類選擇器，ID選擇器，標(biāo)簽選擇器，分組選擇器以及偽元素選擇器，但是去除了CSS時(shí)面的兄弟~與相鄰兄弟~選擇器，去除了常用的屬性選擇器。在微信小程序的布局里面，主要用到的