用js調(diào)用android和ios底層功能，用html5展示界面。性能比不上原生app

瞎猜的：用Native抹平了系統(tǒng)間的差異，搞套DSL把系統(tǒng)的API暴露給前端開發(fā)。可以理解為沒有編譯過程的React Native/Weex，有WebAPP的靈活性，又有接近Native的性能。

根據(jù)小程序開發(fā)文檔-框架(https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html)部分，可以從微信小程序提供的開發(fā)接口上看出：1. 提供了JavsScript運(yùn)行環(huán)境，由JavaScript編寫的業(yè)務(wù)代碼完成邏輯層的處理2. 通過數(shù)據(jù)傳輸接口（注冊Page時(shí)的data屬性及后續(xù)的setData方法調(diào)用）將邏輯層的數(shù)據(jù)傳輸給視圖層3. 視圖層由WXML語言編寫的模板通過“數(shù)據(jù)綁定”與邏輯層傳輸過來的數(shù)據(jù)merge成展現(xiàn)結(jié)果并展現(xiàn)4. 視圖的樣式控制由WXSS語言編寫的樣式規(guī)則進(jìn)行配置再分別來看這4點(diǎn)各自的細(xì)節(jié)問題：1. 提供了JavsScript運(yùn)行環(huán)境，由JavaScript編寫的業(yè)務(wù)代碼完成邏輯層的處理JavaScript運(yùn)行環(huán)境是什么？開發(fā)文檔Q&A(https://mp.weixin.qq.com/debug/wxadoc/dev/qa/qa.html)中這句已給出，JS運(yùn)行環(huán)境是在JsCore里：為什么腳本內(nèi)不能使用window等對象頁面的腳本邏輯在是在JsCore中運(yùn)行2. 通過數(shù)據(jù)傳輸接口（注冊Page時(shí)的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時(shí)的data屬性與后續(xù)的setData方法），這樣邏輯層的業(yè)務(wù)代碼就可以實(shí)現(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，用標(biāo)簽方式來描述視圖類似angular/vue，通過指令(標(biāo)簽的特殊屬性)與雙大括號來實(shí)現(xiàn)模板的增強(qiáng)功能，使模板與數(shù)據(jù)merge為結(jié)果標(biāo)簽但細(xì)看發(fā)現(xiàn)，指令其實(shí)很簡單，只提供了用于循環(huán)列表的wx:for指令，與用于控制邏輯的wx:if,wx:else,wx:elif指令雙大括號內(nèi)支持簡單的表達(dá)式，表達(dá)式中的變量即邏輯層輸入的數(shù)據(jù)每次邏輯層更新數(shù)據(jù)，視圖層會(huì)相應(yīng)更新merge并更新渲染考慮最簡單的情況，要完成這3個(gè)功能，大致可以通過做如下事來完成：native端讀取WXML模板文件，再根據(jù)邏輯層傳來的數(shù)據(jù)將其中的指令與雙大括號處理解析(可根據(jù)大括號表達(dá)式從數(shù)據(jù)中取值并計(jì)算，再以對表達(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)樹，并對應(yīng)節(jié)點(diǎn)樹中各節(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語言編寫的樣式規(guī)則進(jìn)行配置樣式如何匹配與設(shè)置？構(gòu)建出各視圖元素后，仍由native讀取WXSS文件，用簡單字符串匹配即可將其解析為一對一對的"選擇器-規(guī)則"對，規(guī)則內(nèi)即為屬性鍵值。之后再對各視圖元素與"選擇器-規(guī)則"對中的選擇器進(jìn)行匹配，匹配成功設(shè)置相應(yīng)屬性值（還要考慮全局樣式與頁面樣式及style屬性樣式中的優(yōu)先級）即可如何使用css樣式對native元素進(jìn)行布局？最基本的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接收到用戶事件后，必要時(shí)通過JsCore反向與其內(nèi)運(yùn)行的js進(jìn)行通信，將事件數(shù)據(jù)傳遞給js端的框架，再由js端框架調(diào)起相應(yīng)回調(diào)即可。另有一些細(xì)節(jié)可參見：微信小程序開發(fā)API調(diào)研 - 呂晟的文章 - 知乎專欄歡迎討論，望輕拍 : )

通過網(wǎng)頁代碼調(diào)用原生的api/控件，然后一堆限制，始終不理解為什么這些程序員不自己寫個(gè)移動(dòng)網(wǎng)站，非要鉆微信的籠子，沒有性格沒有下限。

作者：phodal鏈接：http://zhuanlan.zhihu.com/p/22607204來源：知乎著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)。本來想的是昨天晚上寫這篇文章的，后來昨天在寫一個(gè)Cordova上的iOS插件的時(shí)候各種不順。對接的第三方SDK不給力，于是六點(diǎn)多回到家的時(shí)候，我就就開始娛樂了，哈哈哈~~其實(shí)這篇文章應(yīng)該算是一篇拾遺。從map組件說起在今天公布的開發(fā)文檔里，我們知道使用一個(gè)地圖組件的時(shí)候是這樣子的：<map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map> 在之前的文件里，我們提到過這個(gè)文件是wxml文件，然后我們要用wxcc將其轉(zhuǎn)換為virtual dom中的方法，如：./wcc -d map.xml 它就會(huì)返回一個(gè)js的方法，如：/*v0.7cc_20160919*/ var $gwxc var $gaic={} $gwx=function(path,global){ function _(a,b){b&&a.children.push(b);} function _n(tag){$gwxc++;if($gwxc>=16000){throw enough, dom limit exceeded, you don do stupid things, do you?};return {tag:tag.substr(0,3)==wx-?tag:wx-+tag,attr:{},children:[]}} function _s(scope,env,key){return typeof(scope[key])!=undefined?scope[key]:env[key]} ... 插播一句：上面有一個(gè)count，很有意思$gwxc > 16000，這個(gè)就是dom數(shù)的count。超了就來個(gè)異常：enough, dom limit exceeded, you dont do stupid things, do you?，中文意思就是：你個(gè)愚蠢的人類，你是一個(gè)前端開發(fā)人員嗎？隨后，在瀏覽器里調(diào)試一下：JSON.stringify($gwx(map.wxml)(test)) 在小程序中是要這樣調(diào)用的： document.dispatchEvent(new CustomEvent("generateFuncReady", { detail: { generateFunc: $gwx(map.wxml) } })) 就會(huì)返回下面的結(jié)果：{ "children": [ { "attr": { "covers": "", "latitude": "113.324520", "longitude": "23.099994", "markers": "", "style": "width: 375px; height: 200px;" }, "children": [], "tag": "wx-map" } ], "tag": "wx-page" } 看來這個(gè)名為wx-map的標(biāo)簽就是微信下的map標(biāo)簽，它是wx-page的children。然后讓我們在WAWebview中搜索一下，就會(huì)發(fā)現(xiàn)一個(gè)很有意思的代碼:{ is: "wx-map", behaviors: ["wx-base", "wx-native"], template: <div id="map" style="width: 100%; height: 100%;"></div>, properties: { latitude: {type: Number, reflectToAttribute: !0, observer: "latitudeChanged", value: 39.92}, longitude: {type: Number, reflectToAttribute: !0, observer: "longitudeChanged", value: 116.46}, scale: {type: Number, reflectToAttribute: !0, observer: "scaleChanged", scale: 16}, markers: {type: Array, value: [], reflectToAttribute: !1, observer: "markersChanged"}, covers: {type: Array, value: [], reflectToAttribute: !1, observer: "coversChanged"}, _mapId: {type: Number} } 它的behaviors中有一句：wx-native，這莫非就是傳說中的native組件：順便再看一個(gè)video是不是也是一樣的：{ is: "wx-video", behaviors: ["wx-base", "wx-player", "wx-native"], template: <div class="container"> <video id="player" webkit-playsinline style="display: none;"></video> <div id="default" class="bar" style="display: none;"> <div id="button" class$="button {{_buttonType}}"></div> <div class="time currenttime" parse-text-content>{{_currentTime}}</div> <div id="progress" class="progress"> <div id="ball" class="ball" style$="left: {{_progressLeft}}px;"> <div class="inner"></div> </div> <div class="inner" style$="width: {{_progressLength}}px;"></div> </div> <div class="time duration" parse-text-content>{{_duration}}</div> <div id="fullscreen" class="fullscreen"></div> </div> </div> <div id="fakebutton"></div>, properties: { _videoId: {type: Number}, _progressLeft: {type: Number, value: -22}, _progressLength: {type: Number, value: 0} } 好了，你那么聰明，我就這么說一半好了，剩下你自己去猜。可以肯定的是：map標(biāo)簽在開發(fā)的時(shí)候會(huì)變成HTML + CSSmap標(biāo)簽在微信上可以使用類似于Cordova的形式調(diào)用 Native組件再接著說，virtual dom的事，回到示例代碼里的map.js:Page({ data: { markers: [{ latitude: 23.099994, longitude: 113.324520, name: T.I.T 創(chuàng)意園, desc: 我現(xiàn)在的位置 }], covers: [{ latitude: 23.099794, longitude: 113.324520, icaonPath: ../images/car.png, rotate: 10 }, { latitude: 23.099298, longitude: 113.324129, iconPath: ../images/car.png, rotate: 90 }] } }) js里只放置了data，剩下的都是依據(jù)上面的值變動(dòng)的observer，如：_updatePosition_hiddenChangedlatitudeChangedlongitudeChangedscaleChangedcoversChanged...這種代碼的感覺比React更進(jìn)了一步的節(jié)奏，本來你還需要編碼來觀察state，現(xiàn)在只需要state變動(dòng)了就可以了。。。23333....，你們這些程序員都會(huì)被fire的。好了，這里差不多就這樣了~~。重新審視WXWebview.js于是，我重新逛逛WXWebview.js，發(fā)現(xiàn)這個(gè)文件里面不只有component的內(nèi)容，還有：reportSDKwebviewSDK ??virtual_domexparserwx-components.jswx-components.css等等，你是不是已經(jīng)猜到我在說什么了，上一篇中我們說到了PageFrame： <!-- percodes --> <!--{{WAWebview}}--> <!--{{reportSDK}}--> <!--{{webviewSDK}}--> <!--{{exparser}}--> <!--{{components_js}}--> <!--{{virtual_dom}}--> <!--{{components_css}}--> <!--{{allWXML}}--> <!--{{eruda}}--> <!--{{style}}--> <!--{{currentstyle}}--> <!--{{generateFunc}}--> 在之前的想法里，我覺得我必須要集齊上面的SDK，才能招喚中神龍。后來，我看到了這句：isDev ? { "<!--{{reportSDK}}-->": "reporter-sdk.js", "<!--{{webviewSDK}}-->": "webview-sdk.js", "<!--{{virtual_dom}}-->": "virtual_dom.js", "<!--{{exparser}}-->": "exparser.js", "<!--{{components_js}}-->": "wx-components.js", "<!--{{components_css}}-->": "wx-components.css" } : {"<!--{{WAWebview}}-->": "WAWebview.js"} 如果不是開發(fā)環(huán)境就使用WAWebview.js，在開發(fā)環(huán)境中使用使用xxSDK，那么生產(chǎn)環(huán)境是怎么回事？如果是在開發(fā)環(huán)境會(huì)去下載最新的SDK，好像不對~~，哈哈。。我猜這部分，我需要一個(gè)內(nèi)測id，才能猜出這個(gè)答案。有意思的是，IDE會(huì)對比version.json，然后去獲取最新的，用于預(yù)覽？{ "WAService.js": 2016092000, "WAWebview.js": 2016092000, "wcc": 2016092000, "wcsc": 2016092000 } 上面已經(jīng)解釋清楚了WAWebview的功能了，那么WAService.js呢——就是封裝那些API的，如downloadFile：uploadFile: function (e) { u("uploadFile", e, {url: "", filePath: "", name: ""}) && (0, s.invokeMethod)("uploadFile", e) }, downloadFile: function (e) { u("downloadFile", e, {url: ""}) && (0, s.invokeMethod)("downloadFile", e) } 這一點(diǎn)上仍然相當(dāng)有趣，在我們開發(fā)的時(shí)候仍然是WAWebview做了相當(dāng)多的事，而它和WAService的打包是分離的。那么，我們從理論上來說，只需要有WAWebview就可以Render頁面了。

幾天了，沒心情細(xì)分代碼我猜測是，js->bridge->系統(tǒng)，然后，系統(tǒng)->bridge->jswebviewbridge這個(gè)東西，前端方面我稍微寫過一點(diǎn)，以這個(gè)為基礎(chǔ)猜的。微信應(yīng)用號充當(dāng)了bridge的功能如果是這樣，性能可以和客戶端媲美，但是組件的定制性差，因?yàn)榻M件是調(diào)取系統(tǒng)的不好改。也可能調(diào)用的不是系統(tǒng)組件而是微信寫在微信app內(nèi)的組件，這樣的話定制問題就可以等微信慢慢開放接口了。待我睡醒細(xì)看。

總結(jié)

以上是生活随笔為你收集整理的微信小程序底层的实现原理是怎样的?的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。