微信小程序底層實(shí)現(xiàn)原理的示例分析

這篇文章給大家分享的是有關(guān)微信小程序底層實(shí)現(xiàn)原理的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

　　根據(jù)小程序開(kāi)發(fā)文檔-框架(https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html)部分，可以從微信小程序提供的開(kāi)發(fā)接口上看出：

　　1. 提供了JavsScript運(yùn)行環(huán)境，由JavaScript編寫(xiě)的業(yè)務(wù)代碼完成邏輯層的處理

　　2. 通過(guò)數(shù)據(jù)傳輸接口(注冊(cè)Page時(shí)的data屬性及后續(xù)的setData方法調(diào)用)將邏輯層的數(shù)據(jù)傳輸給視圖層

　　3. 視圖層由WXML語(yǔ)言編寫(xiě)的模板通過(guò)“數(shù)據(jù)綁定”與邏輯層傳輸過(guò)來(lái)的數(shù)據(jù)merge成展現(xiàn)結(jié)果并展現(xiàn)

　　4. 視圖的樣式控制由WXSS語(yǔ)言編寫(xiě)的樣式規(guī)則進(jìn)行配置

　　再分別來(lái)看這4點(diǎn)各自的細(xì)節(jié)問(wèn)題：

　　1. 提供了JavsScript運(yùn)行環(huán)境，由JavaScript編寫(xiě)的業(yè)務(wù)代碼完成邏輯層的處理

　　JavaScript運(yùn)行環(huán)境是什么?

　　開(kāi)發(fā)文檔Q&A(https://mp.weixin.qq.com/debug/wxadoc/dev/qa/qa.html)中這句已給出，JS運(yùn)行環(huán)境是在JsCore里：

　　為什么腳本內(nèi)不能使用window等對(duì)象

　　頁(yè)面的腳本邏輯在是在JsCore中運(yùn)行

　　2. 通過(guò)數(shù)據(jù)傳輸接口(注冊(cè)Page時(shí)的data屬性及后續(xù)的setData方法調(diào)用)將邏輯層的數(shù)據(jù)傳輸給視圖層

　　數(shù)據(jù)在邏輯層與視圖層間如何傳輸?

　　視圖為純native渲染，故位于native端。

　　而邏輯層如上所述，是跑在JsCore中的JavaScript代碼。

　　有了JsCore，微信小程序框架的native端與js端就可以通過(guò)JsCore來(lái)相互通信了。于是，微信小程序框架的native端與js端可以約定好通信協(xié)議/規(guī)范，再把js端通過(guò)此通信協(xié)議/規(guī)范與native通信的部分封裝并暴露接口為API(最上層的傳輸或說(shuō)設(shè)置數(shù)據(jù)的API也就是上面說(shuō)的注冊(cè)Page時(shí)的data屬性與后續(xù)的setData方法)，這樣邏輯層的業(yè)務(wù)代碼就可以實(shí)現(xiàn)向視圖層傳輸數(shù)據(jù)了。

　　(對(duì)native其他API的調(diào)用也用類似的方法即能走通)

　　3. 視圖層由WXML語(yǔ)言編寫(xiě)的模板通過(guò)“數(shù)據(jù)綁定”與邏輯層傳輸過(guò)來(lái)的數(shù)據(jù)merge成展現(xiàn)結(jié)果并展現(xiàn)

　　視圖層與數(shù)據(jù)如何merge為展現(xiàn)結(jié)果并展現(xiàn)?

　　首先看WXML語(yǔ)言提供的接口，發(fā)現(xiàn)它：

　　類似于html/xml，用標(biāo)簽方式來(lái)描述視圖

　　類似angular/vue，通過(guò)指令(標(biāo)簽的特殊屬性)與雙大括號(hào)來(lái)實(shí)現(xiàn)模板的增強(qiáng)功能，使模板與數(shù)據(jù)merge為結(jié)果標(biāo)簽

　　但細(xì)看發(fā)現(xiàn)，指令其實(shí)很簡(jiǎn)單，只提供了用于循環(huán)列表的wx:for指令，與用于控制邏輯的wx:if,wx:else,wx:elif指令

　　雙大括號(hào)內(nèi)支持簡(jiǎn)單的表達(dá)式，表達(dá)式中的變量即邏輯層輸入的數(shù)據(jù)

　　每次邏輯層更新數(shù)據(jù)，視圖層會(huì)相應(yīng)更新merge并更新渲染

　　考慮最簡(jiǎn)單的情況，要完成這3個(gè)功能，大致可以通過(guò)做如下事來(lái)完成：

　　native端讀取WXML模板文件，再根據(jù)邏輯層傳來(lái)的數(shù)據(jù)將其中的指令與雙大括號(hào)處理解析(可根據(jù)大括號(hào)表達(dá)式從數(shù)據(jù)中取值并計(jì)算，再以對(duì)表達(dá)式值進(jìn)行循環(huán)與判斷便可相應(yīng)解除wx:for,wx:if指令)，生成與數(shù)據(jù)merge后、可以表征最終展現(xiàn)內(nèi)容的標(biāo)簽串，

　　再以解析xml的方式解析標(biāo)簽為帶有屬性的節(jié)點(diǎn)樹(shù)，并對(duì)應(yīng)節(jié)點(diǎn)樹(shù)中各節(jié)點(diǎn)相應(yīng)創(chuàng)建native中的視圖元素(可能為系統(tǒng)組件、也可能為微信框架中的視圖組件)、設(shè)置相應(yīng)屬性、維護(hù)為正確的父子關(guān)系即可。

　　邏輯層數(shù)據(jù)更新時(shí)，也更新相應(yīng)屬性即可。

　　當(dāng)然實(shí)際處理中，要考慮的因素要多許多，也會(huì)做許多優(yōu)化，但基本思路應(yīng)大致如此。

　　4. 視圖的樣式控制由WXSS語(yǔ)言編寫(xiě)的樣式規(guī)則進(jìn)行配置

　　樣式如何匹配與設(shè)置?

　　構(gòu)建出各視圖元素后，仍由native讀取WXSS文件，用簡(jiǎn)單字符串匹配即可將其解析為一對(duì)一對(duì)的"選擇器-規(guī)則"對(duì)，規(guī)則內(nèi)即為屬性鍵值。之后再對(duì)各視圖元素與"選擇器-規(guī)則"對(duì)中的選擇器進(jìn)行匹配，匹配成功設(shè)置相應(yīng)屬性值(還要考慮全局樣式與頁(yè)面樣式及style屬性樣式中的優(yōu)先級(jí))即可

　　如何使用css樣式對(duì)native元素進(jìn)行布局?

　　最基本的flex布局可以由facebook的css-layout來(lái)完成(GitHub - facebook/css-layout: A subset of CSS (specifically flex-box) re-implemented as a stand alone project for use primarily on mobile. Used by react-native)

　　另外，事件方面，native接收到用戶事件后，必要時(shí)通過(guò)JsCore反向與其內(nèi)運(yùn)行的js進(jìn)行通信，將事件數(shù)據(jù)傳遞給js端的框架，再由js端框架調(diào)起相應(yīng)回調(diào)即可。

感謝各位的閱讀！關(guān)于“微信小程序底層實(shí)現(xiàn)原理的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！