微信小程序框架解析

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

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

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

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