微信小程序框架解析

微信小程序框架解析Softeem·標(biāo)小程序介紹和演示微信小程序是國(guó)騰訊公司推出的一款類APP應(yīng)用平臺(tái)，用戶和開發(fā)者可以在依據(jù)騰訊發(fā)布的API文檔與微信Web開發(fā)者工具進(jìn)展開發(fā)，其程序主要有以下幾個(gè)特點(diǎn)：類Web的應(yīng)用程序，但不是HTML5即用即走，隨手可得擁有離線能力基于微信跨平臺(tái)媲美原生操作體驗(yàn)如下圖：左圖是一個(gè)微信小程序的界面。微信小程序采用Native預(yù)告加載一個(gè)WebView。當(dāng)翻開指定頁(yè)面時(shí)，無(wú)需加載額外資源直接渲染，這種操作方式極大的改善了用戶的操作體驗(yàn)，到達(dá)了原生APP的操作效果。小程序框架上邊兩個(gè)圖片可以說明微信小程序的框架構(gòu)造，微信小程序里面View視圖層與AppServer邏輯層分開的，與現(xiàn)在主流的前后端別離開發(fā)小異，數(shù)據(jù)通信采用微信API進(jìn)展異步請(qǐng)求視圖層的界面布局采用w*ml,視圖層的樣式控制采用w*ss進(jìn)展，在這里要說明一下，微信小程序里面的w*ml與前端里面的HTML似，都是用標(biāo)簽進(jìn)展布局。而w*ss與前端里面的CSS一樣，支持CSS3,動(dòng)畫，變幻等新特性，而界面的邏輯控制就是JS〔微信后期出了一個(gè)w*s，是一個(gè)類JS的語(yǔ)言，語(yǔ)法與JS差不多〕小程序視圖層剛剛在上個(gè)章節(jié)提到了微信小程序的框架構(gòu)造，在這個(gè)章節(jié)，我們主要來(lái)看一下視圖層的相關(guān)介紹。在視圖層中，微信的W*ML作為標(biāo)簽的布局，它支持?jǐn)?shù)據(jù)綁定，輸運(yùn)運(yùn)算，同時(shí)還支持模板引用〔template〕，這些與HTML里面的差不多，唯一有一點(diǎn)區(qū)別的就是在事件綁定這一塊。在微信的視圖層事件綁定時(shí)面，微信不事件采用的是bind的策略，與HTML里面的on是不一樣的，但同時(shí)也支持事件冒泡。微信自己封裝了一系列的視圖層事件，如bindtap點(diǎn)擊，bindlongtap長(zhǎng)按，這些事件針對(duì)移動(dòng)端做了進(jìn)一步的優(yōu)化，例其能夠符合移動(dòng)端APP的操作習(xí)慣而作為界面樣式控制的W*SS,它支持大局部的CSS，同時(shí)，它新增了一個(gè)尺寸單位rp*，這個(gè)單位可以根據(jù)屏幕的寬度進(jìn)展自適用，這點(diǎn)是一個(gè)很大的進(jìn)步，它可以使微信小程序在不同的手機(jī)屏幕下面進(jìn)展自適用〔這一點(diǎn)在以前的HTML+CSS上面，需要通過vw、rem、em\或者媒體查詢來(lái)進(jìn)展〕，同時(shí)，可以使用import來(lái)導(dǎo)入外部的樣式文件，但在這里有一點(diǎn)要說明的就是，W*SS里在，不支持多層選擇器，這樣就防止了組件的部樣式被污染。在CSS里面，我們常用的選擇器有9種，而在微信小程序里面，進(jìn)展精簡(jiǎn)了很多，具體我做了個(gè)列表，如下：在上圖當(dāng)中，我們可以看出，微信小程序的W*SS支持類選擇器，ID選擇器，標(biāo)簽選擇器，分組選擇器以及偽元素選擇器，但是去除了CSS時(shí)面的兄弟~與相鄰兄弟~選擇器，去除了常用的屬性選擇器。在微信小程序的布局里面，主要用到的標(biāo)簽為view標(biāo)簽，這個(gè)標(biāo)簽相當(dāng)于HTML里面的DIV標(biāo)簽，是一個(gè)塊級(jí)標(biāo)簽，同時(shí)，文字標(biāo)簽改為了te*t這個(gè)標(biāo)簽，相當(dāng)于HTML里面的label或者span等行標(biāo)簽，下列圖是微個(gè)小程序的標(biāo)簽與普通的HTML標(biāo)簽比照小程序邏輯層前面講完了小程序的界面神圖層，現(xiàn)在來(lái)講講邏輯層。微信小程序的邏輯層將數(shù)據(jù)處理以后發(fā)送給神力層，同時(shí)承受視圖層的事件反應(yīng)1、上圖就是一個(gè)微信小程序的邏輯代碼，通過這些代碼，我們來(lái)分析一下：App()是小程序的入口，Page()是頁(yè)面的入口微信提供了豐富的API，如微信定位，微信掃一掃，微信支付等功能每個(gè)頁(yè)面有獨(dú)立的作用域，并提供模塊化能力在邏輯的代碼里面，可以進(jìn)展數(shù)據(jù)綁定，事件分發(fā)，生命周期管理，跌幅管理等功能上圖是微信小程序的生命周期圖，微信小程序的頁(yè)面中,常用的生命周期回調(diào)函數(shù)有onLoad,onShow,onReady,onHide,具體的執(zhí)行順序可看上圖。上圖為微信小程序局部API列表。微信小程序里面，不同的頁(yè)面之間進(jìn)展跳轉(zhuǎn)，微信制定了一些相關(guān)的規(guī)，主要有以下幾種：navigatoTo(OBJECT)保存當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用的*個(gè)頁(yè)面，使用navigateBack可以返回到原頁(yè)面，頁(yè)面路徑只能有五層redirectTo(OBJECT)關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到頁(yè)在的*個(gè)頁(yè)面navigateBack(OBJECT)關(guān)閉當(dāng)前頁(yè)面，返回上一級(jí)頁(yè)面或多級(jí)頁(yè)面，可通過getCurrentPages()來(lái)獲取當(dāng)前的頁(yè)面棧，決定返回那一層switchTab(OBJECT)使用該方法，可以切換到tabBar里面的*一個(gè)頁(yè)面，在這里要注意，該方法切換的頁(yè)面必須是在app.json文件里面的tabBar里面注冊(cè)過的頁(yè)面小程序開發(fā)經(jīng)歷在開發(fā)小程序的過程當(dāng)中，有一些開發(fā)經(jīng)歷，現(xiàn)在給各位介紹一下。小程序可以借鑒的優(yōu)點(diǎn)：提前新建WebView，準(zhǔn)備新頁(yè)面渲染View層與邏輯分享，通過數(shù)據(jù)驅(qū)動(dòng)，而不直接操作頁(yè)面元素使用組件，進(jìn)展局步更新視圖層做到組件化開發(fā)參加rp*元素布局，做到自適應(yīng)小程序存在的問題：小程序仍然使用的是WebView渲染需要特定的開發(fā)環(huán)境，依賴微信開發(fā)工具效勞端返回頭不能夠執(zhí)行，如set-cookie沒有瀏覽器環(huán)境，依賴瀏覽器的JS無(wú)法執(zhí)行W*SS背景圖不能使用