一劫瞳、什么是 weex

Weex 是阿里巴巴開(kāi)源的一套構(gòu)建高性能索绪、可擴(kuò)展的原生應(yīng)用跨平臺(tái)開(kāi)發(fā)方案斤贰。首先總結(jié)一下 weex 的特點(diǎn)：

1. 頁(yè)面的開(kāi)發(fā)目前支持Rax和Vue

   Weex 也不是只支持 Vue 和 Rax佑淀，你也可以把自己喜歡的前端框架集成到 Weex 中耗拓，有一個(gè)文檔擴(kuò)展前端框架描述了如何實(shí)現(xiàn)拇颅，但是這個(gè)過(guò)程仍然非常復(fù)雜和棘手，你需要了解關(guān)于 js-native 之間通信和原生渲染引擎的許多底層細(xì)節(jié)乔询。

2. 一次編寫(xiě)樟插，三端（Android、iOS竿刁、前端）運(yùn)行

前提是都集成了 weex sdk黄锤，另外視覺(jué)表現(xiàn)做不到完全一樣，有的會(huì)有一些差異食拜，需要做一下適配鸵熟。所以寫(xiě) weex 頁(yè)面的時(shí)候，如果支持三端负甸，便需要在三端都進(jìn)行自測(cè)流强。

3. UI 的繪制通過(guò) native 的組件痹届，JavaScript 邏輯在 JS 引擎里運(yùn)行，兩者通過(guò) JavaScriptCore 通信

   weex 里使用組件都需要在 native 端注冊(cè)打月，這樣 weex 里才可以使用队腐，運(yùn)行的時(shí)候通過(guò)注冊(cè)時(shí)記錄的 map 進(jìn)行查找。weex sdk 內(nèi)置注冊(cè)了一些基礎(chǔ)的組件奏篙，包括 list柴淘、text、input 等报破。WXJSCoreBridge 封裝了 JavaScriptCore 實(shí)現(xiàn) native 和 js 之間的通信悠就。

4. 支持 Native 擴(kuò)展

   可以將 native 的 UI 組件封裝成 component，將 native 的邏輯代碼封裝成 module充易。從而在 weex 里可以進(jìn)行使用梗脾。這里的 natiev UI 組件包括 modal、webview盹靴、image 等炸茧，這里的 native 邏輯代碼包括 storage、network 等稿静。

5. 每個(gè) weex 頁(yè)面會(huì)被打包成一個(gè) js 文件梭冠，weex sdk 將 js 文件渲染成一個(gè) view

   weex 的打包通過(guò) webpack，將每個(gè)頁(yè)面打包成獨(dú)立的一個(gè) js 文件改备，weex sdk 會(huì)將 js 進(jìn)行解析控漠，將 UI 部分繪制成一個(gè) view, 再綁定 view 的事件與 js 代碼綁定。

二悬钳、為什么要使用weex進(jìn)行無(wú)線開(kāi)發(fā)

1. 效率問(wèn)題

   1）開(kāi)發(fā)的人力成本

   如果不算 web 端盐捷，一個(gè)頁(yè)面本來(lái)需要 Android 和 iOS 2 個(gè)人開(kāi)發(fā)；使用 weex 后只需要 1 個(gè)開(kāi)發(fā)頁(yè)面默勾。

   2）開(kāi)發(fā)的編譯速度

   隨著項(xiàng)目漸漸變得龐大碉渡，Android 項(xiàng)目一次編譯需要 2-3 分鐘，機(jī)器不好的還需要 10 分鐘母剥，iOS 可能會(huì)快一點(diǎn)滞诺，也需要 1-2 分鐘。使用 weex 后环疼，界面修改习霹，只需要十幾秒。

   3）測(cè)試效率

   提測(cè)之后炫隶，發(fā)現(xiàn) bug淋叶，修復(fù)完成，測(cè)試總需要重新下載一個(gè)包進(jìn)行安裝等限；使用 weex 后爸吮，跟原生無(wú)關(guān)的 bug，只要測(cè)試重啟 App 就可以進(jìn)行驗(yàn)證望门。

2. 動(dòng)態(tài)化

   weex 頁(yè)面最后打包完是一個(gè) js 文件形娇，只要能做到動(dòng)態(tài)下發(fā) JavaScript，那便可以實(shí)現(xiàn)動(dòng)態(tài)化筹误，可以熱修復(fù)桐早，甚至可以熱部署，完全替換或者新增頁(yè)面厨剪。

3. 成熟度

   在 2016 年阿里雙十一中哄酝，Weex 在阿里雙十一會(huì)場(chǎng)中的覆蓋率接近 99%，頁(yè)面數(shù)量接近 2000祷膳，覆蓋了包括主會(huì)場(chǎng)陶衅、分會(huì)場(chǎng)、分分會(huì)場(chǎng)直晨、人群會(huì)場(chǎng)在內(nèi)幾乎所有的阿里雙十一會(huì)場(chǎng)業(yè)務(wù)搀军。阿里雙十一主會(huì)場(chǎng)秒開(kāi)率97%，全部會(huì)場(chǎng)頁(yè)面達(dá)到 93%勇皇。 2016 年 12 月 15 日罩句，阿里巴巴宣布將移動(dòng)開(kāi)源項(xiàng)目 Weex 捐贈(zèng)給 Apache 基金會(huì)開(kāi)始孵化。
   2017 年敛摘，weex 在阿里業(yè)務(wù)里增長(zhǎng)如下圖门烂，來(lái)自 WeexConf 2018。

   
   
   avatar

三兄淫、Weex的工作原理

483534391-5722ddf9bbf7d_articlex.jpg

1. 打包

熟悉 React Native 的人都知道屯远， React Native 的發(fā)布實(shí)際上就是發(fā)布一個(gè) JSBundle，Weex 也是這樣拖叙，但不同的是氓润，Weex 將工程進(jìn)行分包，發(fā)布多個(gè) JSBundle薯鳍。因?yàn)?Weex 是單頁(yè)獨(dú)立開(kāi)發(fā)的咖气，每個(gè)頁(yè)面都將通過(guò) Weex 打包器將 vue/we 頁(yè)面打包成一個(gè)單獨(dú)的 JSBundle，這樣的好處在于減少單個(gè) bundle 包的大小挖滤，使其變的足夠小巧輕量崩溪，提高增量更新的效率。

# 僅打包
$ npm run build
 打包+構(gòu)建
$ weex build ios
# 打包+構(gòu)建+安裝執(zhí)行
$ weex run ios

以上三種均會(huì)觸發(fā) Weex 對(duì)工程進(jìn)行打包斩松。
在我們執(zhí)行了以上打包命令后伶唯，所有的工程文件將被單獨(dú)打成一個(gè)獨(dú)立的 JSBundle，如下：

1494908-9e44c2ec85dfbf56.png

打包后的 JSBundle 有兩種格式

# 由.vue文件打包出來(lái)的包格式（簡(jiǎn)寫(xiě)）惧盹，使用 vue 2.0 語(yǔ)法編寫(xiě)
// { "framework": "Vue"} 
/******/ (function(modules) { 
       .......
/******/ })

# 由.we文件打包出來(lái)的包格式（簡(jiǎn)寫(xiě)）乳幸，使用 weex 語(yǔ)法編寫(xiě)
// { "framework": "Weex" }
/******/ (function(modules) { 
        .......
/******/ })

不同的頭部是要告訴使用什么語(yǔ)法解析此JSBundle瞪讼。

至此，我們準(zhǔn)備「熱更新的包」就已經(jīng)準(zhǔn)備完畢了粹断，接下就是發(fā)包執(zhí)行了符欠。

2. 發(fā)包

打包后的 JSBundle 一般發(fā)布到發(fā)包服務(wù)器上，客戶端從服務(wù)器更新包后即可在下次啟動(dòng)執(zhí)行新的版本瓶埋，而無(wú)需重新下載 app希柿，因?yàn)檫\(yùn)行依賴的 WeexSDK 已經(jīng)存在于客戶端了，除非新包依賴于新的 SDK养筒，這也是熱更新的基本原理曾撤。

【W(wǎng)eexSDK】包括

 >【JS Framework】JSBundle 的執(zhí)行環(huán)境
 
 >【JS-Native Bridge】中間件或者叫通訊橋梁，也叫【W(wǎng)eex Runtime】
 
 >【Native Render Engine】解析 js 端發(fā)出的指令做原生控件布局渲染

3. 執(zhí)行

   Weex 的 iOS 和 Android 客戶端的【JSFramework】中都會(huì)運(yùn)行一個(gè) JavaScript 引擎晕粪，來(lái)執(zhí)行 JS bundle挤悉，同時(shí)向各端的渲染層發(fā)送規(guī)范化的指令，調(diào)度客戶端的渲染和其它各種能力兵多。iOS 下選擇了 JavaScriptCore 內(nèi)核尖啡，而在 Android 下選擇了 UC 提供的 v8 內(nèi)核（RN兩端都是JavaScriptCore 內(nèi)核）。

   JSBundle 被 push 到客戶端后就會(huì)在 JSFramework 中執(zhí)行剩膘，最終輸出三端可讀性的 VNode 節(jié)點(diǎn)衅斩，數(shù)據(jù)結(jié)構(gòu)簡(jiǎn)化如下：

{
tag: 'div',
data: {
 staticStyle: { justifyContent: 'center' }
},
children: [{
 tag: 'text',
 data: {
   staticClass: 'txt'
 },
 context: {
   $options: {
     style: {
       freestyle: {
         textAlign: 'center',
         fontSize: 200
       }
     }
   }
 },
 children: [{
   tag: '',
   text: '文字'
 }]
}]
} 

有了統(tǒng)一的 VNode 節(jié)點(diǎn)，各端即可根據(jù)自己的方法解析渲染原生UI了怠褐，之前的所有操作都是一致的畏梆，包括文件格式、打包編譯過(guò)程奈懒、模板指令奠涌、組件的生命周期、數(shù)據(jù)綁定等磷杏。

然而由于目標(biāo)執(zhí)行環(huán)境不同（瀏覽器和 Weex 容器）溜畅，在渲染真實(shí)原生 UI 的時(shí)候調(diào)用的接口也不同。

1494908-1a151022056cbade.png

此過(guò)程發(fā)生在【W(wǎng)eex SDK】的【W(wǎng)eex Runtime】中极祸。

最后【W(wǎng)eex Runtime】發(fā)起渲染指令callNative({...})有RenderEngine完成渲染

總結(jié)一下

• Weex 文件分包打包成單個(gè) JSBundle 文件
• 發(fā)布到發(fā)包服務(wù)器上慈格，通過(guò)熱更新 push 到用戶的客戶端，交由【W(wǎng)eex SDK】執(zhí)行解析
• SDK 中的【JS Framework】執(zhí)行 Bundle 腳本生成 Virtual DOM
• Virtual DOM 經(jīng)由各端執(zhí)行環(huán)境【W(wǎng)eex Runtime】解析翻譯成執(zhí)行指令
• 【Native RenderEngine】接收到指令后執(zhí)行渲染操作遥金，作出渲染出完整的界面

四浴捆、基本開(kāi)發(fā)

預(yù)備知識(shí)點(diǎn)

入門(mén) Weex 前需要了解以下知識(shí)，這樣能幫助你更快的掌握

Node：《Node.js 教程》

Vue：《Vue.js官方教程》

ES6：《ECMAScript 6 入門(mén)》

再者就是 ios 和 android 開(kāi)發(fā)語(yǔ)法的入門(mén)和編輯器的使用

安裝開(kāi)發(fā)環(huán)境

1.安裝Node

https://nodejs.org/en/download/

查看node版本

node -v

查看npm版本

npm -v

2.安裝weex-toolkit

npm install weex-toolkit -g

查看weex版本

weex -v

3.創(chuàng)建項(xiàng)目

weex create （項(xiàng)目名稱）

4.進(jìn)入項(xiàng)目稿械，安裝依賴选泻，預(yù)覽

cd 項(xiàng)目路徑
npm install
npm start

5.編譯和運(yùn)行

weex platform add ios
weex platform add android
weex run ios
weex run android
weex run web

6.調(diào)試

weex debug

參考文檔

• weex官方文檔
• 網(wǎng)易嚴(yán)選App感受Weex開(kāi)發(fā)（已完結(jié)）
• 基于weex的有贊無(wú)線開(kāi)發(fā)框架