微信小程序底層實現原理的示例分析

這篇文章給大家分享的是有關微信小程序底層實現原理的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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

　　1. 提供了JavsScript運行環境，由JavaScript編寫的業務代碼完成邏輯層的處理

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

　　3. 視圖層由WXML語言編寫的模板通過“數據綁定”與邏輯層傳輸過來的數據merge成展現結果并展現

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

　　再分別來看這4點各自的細節問題：

　　1. 提供了JavsScript運行環境，由JavaScript編寫的業務代碼完成邏輯層的處理

　　JavaScript運行環境是什么?

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

　　為什么腳本內不能使用window等對象

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

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

　　數據在邏輯層與視圖層間如何傳輸?

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

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

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

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

　　3. 視圖層由WXML語言編寫的模板通過“數據綁定”與邏輯層傳輸過來的數據merge成展現結果并展現

　　視圖層與數據如何merge為展現結果并展現?

　　首先看WXML語言提供的接口，發現它：

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

　　類似angular/vue，通過指令(標簽的特殊屬性)與雙大括號來實現模板的增強功能，使模板與數據merge為結果標簽

　　但細看發現，指令其實很簡單，只提供了用于循環列表的wx:for指令，與用于控制邏輯的wx:if,wx:else,wx:elif指令

　　雙大括號內支持簡單的表達式，表達式中的變量即邏輯層輸入的數據

　　每次邏輯層更新數據，視圖層會相應更新merge并更新渲染

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

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

　　再以解析xml的方式解析標簽為帶有屬性的節點樹，并對應節點樹中各節點相應創建native中的視圖元素(可能為系統組件、也可能為微信框架中的視圖組件)、設置相應屬性、維護為正確的父子關系即可。

　　邏輯層數據更新時，也更新相應屬性即可。

　　當然實際處理中，要考慮的因素要多許多，也會做許多優化，但基本思路應大致如此。

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

　　樣式如何匹配與設置?

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

　　如何使用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反向與其內運行的js進行通信，將事件數據傳遞給js端的框架，再由js端框架調起相應回調即可。

感謝各位的閱讀！關于“微信小程序底層實現原理的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！