1,Weex 是什么?
Weex 是使用流行的 Web 開發(fā)體驗(yàn)來開發(fā)高性能原生應(yīng)用的框架 ,Weex 致力于使開發(fā)者能基于通用跨平臺(tái)的 Web 開發(fā)語言和開發(fā)經(jīng)驗(yàn),來構(gòu)建 Android、iOS 和 Web 應(yīng)用。簡單來說,在集成了 WeexSDK 之后,你可以使用 JavaScript 語言和前端開發(fā)經(jīng)驗(yàn)來開發(fā)移動(dòng)應(yīng)用。
基于上述,我們可以得到兩個(gè)重要的信息:
首先,Weex與React Native一樣,屬于跨平臺(tái)框架,能構(gòu)建出三端(IOS、Android、Web)應(yīng)用,掌握了Web技術(shù)棧就可以進(jìn)行應(yīng)用(移動(dòng)應(yīng)用)開發(fā),也就是說與React Native一樣,對(duì)Web(前端)開發(fā)人員是友好的
PS: 友好是相對(duì)的,雖然框架層面內(nèi)建了一些模塊與組件,也提供了諸如事件、樣式支持,能滿足基本的開發(fā)需求,進(jìn)行簡單常規(guī)的應(yīng)用開發(fā),但是面對(duì)復(fù)雜或者對(duì)性能要求比較搞的應(yīng)用時(shí),還是需要一定的原生開發(fā)能力。
其次,Weex,Weex可以作為軟件開發(fā)套件(SDK)來進(jìn)行使用,也就是說可以在集成到已有移動(dòng)應(yīng)用上,加載渲染基于Weex構(gòu)建的應(yīng)用,也就是說作為渲染引擎與運(yùn)行時(shí)來使用。
Weex 渲染引擎與 DSL 語法層是分開的,Weex 并不強(qiáng)依賴任何特定的前端框架。目前 Vue.js 和 Rax 這兩個(gè)前端框架被廣泛應(yīng)用于 Weex 頁面開發(fā),同時(shí) Weex 也對(duì)這兩個(gè)前端框架提供了最完善的支持。Weex 的另一個(gè)主要目標(biāo)是跟進(jìn)流行的 Web 開發(fā)技術(shù)并將其和原生開發(fā)的技術(shù)結(jié)合,實(shí)現(xiàn)開發(fā)效率和運(yùn)行性能的高度統(tǒng)一。在開發(fā)階段,一個(gè) Weex 頁面就像開發(fā)普通網(wǎng)頁一樣;在運(yùn)行時(shí),Weex 頁面又充分利用了各種操作系統(tǒng)的原生組件和能力
React Native是React的衍生,而Weex Natvie 則更進(jìn)一步,抽離了DSL層,不依賴特定的前端框架,理解起來可能不是很具象,沒事,接下來我們從Weex的設(shè)計(jì)與運(yùn)行原理去理解。
PS:Weex SDK后來的版本 直接內(nèi)置了Vue2x
2,Weex架構(gòu)設(shè)計(jì)
DSL(領(lǐng)域特定語言)層可以理解為就是前端框架層,也就是用Vue或者其他前端UI庫,DSL編寫的頁面結(jié)構(gòu),會(huì)轉(zhuǎn)換成Virtual Dom(虛擬DOM, DOM的JS對(duì)象表示),Virtua 最終會(huì)被傳遞到容器(宿主)上進(jìn)行解析,最終渲染成原生或者Web控件。
3,Weex運(yùn)行機(jī)制
首先,我們編寫Vue代碼,經(jīng)過打包之后變成可以在 JS運(yùn)行時(shí)執(zhí)行的代碼,我們稱之為JS bundle(每個(gè)頁面/組件都可以生成一個(gè)頁面),可以將Bundle部署在服務(wù)器上。
然后,當(dāng) APP初始化完成之后,就會(huì)去服務(wù)器拉取JS bunlde,JS runtime(在IOS使用的是JS Core,安卓上使用V8) 執(zhí)行JS bunlde里的JS代碼。JS runtime首先會(huì)去拉取weex的核心代碼,之為weex core, 這些核心代碼會(huì)負(fù)責(zé)JS bunlde的解析執(zhí)行工作。 weex core構(gòu)建會(huì)構(gòu)建虛擬DOM, 然后根據(jù)DOM diff算法將對(duì)應(yīng)的修改patch到視圖上。
中間翻譯成native可以執(zhí)行的代碼,是通過weex core和JS bridge來完成的。 native render負(fù)責(zé)最終用戶看到的視圖的渲染。原生渲染器接收上層傳來的渲染指令,并且逐步將其渲染成原生組件。