注冊

微信小程序底層實現(xiàn)原理是怎樣?

2017-07-14
導(dǎo)讀:微信小程序底層的實現(xiàn)原理是怎樣的?對于 微信小程序開發(fā) 而言有什么開發(fā)上的便捷? hishop為大家整理解析! 根據(jù)小程序開發(fā)文檔-框架(https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html...
微信小程序底層實現(xiàn)原理是怎樣?

  2017年7月14日,HiShop最新消息,微信小程序底層的實現(xiàn)原理是怎樣的?對于微信小程序開發(fā)而言有什么開發(fā)上的便捷?hishop記者為大家整理解析!

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

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

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

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

  4. 視圖的樣式控制由WXSS語言編寫的樣式規(guī)則進行配置

  再分別來看這4點各自的細節(jié)問題:

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

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

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

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

  頁面的腳本邏輯在是在JsCore中運行

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

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

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

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

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

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

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

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

  首先看WXML語言提供的接口,發(fā)現(xiàn)它:

  類似于html/xml,用標簽方式來描述視圖

  類似angular/vue,通過指令(標簽的特殊屬性)與雙大括號來實現(xiàn)模板的增強功能,使模板與數(shù)據(jù)merge為結(jié)果標簽

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

  雙大括號內(nèi)支持簡單的表達式,表達式中的變量即邏輯層輸入的數(shù)據(jù)

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

  考慮最簡單的情況,要完成這3個功能,大致可以通過做如下事來完成:

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

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

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

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

  4. 視圖的樣式控制由WXSS語言編寫的樣式規(guī)則進行配置

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

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

  如何使用css樣式對native元素進行布局?

  最基本的flex布局可以由facebook的css-layout來完成(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接收到用戶事件后,必要時通過JsCore反向與其內(nèi)運行的js進行通信,將事件數(shù)據(jù)傳遞給js端的框架,再由js端框架調(diào)起相應(yīng)回調(diào)即可。

重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)