2016年4月21日害捕，阿里巴巴在Qcon大會(huì)上宣布開源跨平臺(tái)移動(dòng)開發(fā)工具Weex映胁，Weex能夠完美兼顧性能與動(dòng)態(tài)性，讓移動(dòng)開發(fā)者通過簡(jiǎn)捷的前端語法寫出Native級(jí)別的性能體驗(yàn)甥郑，并支持iOS昧互、安卓、YunOS及Web等多端部署薪介。
對(duì)于移動(dòng)開發(fā)者來說祠饺，Weex主要解決了頻繁發(fā)版和多端研發(fā)兩大痛點(diǎn)，同時(shí)解決了前端語言性能差和顯示效果受限的問題汁政。開發(fā)者可通過Weex官網(wǎng)申請(qǐng)內(nèi)測(cè)道偷。（http://alibaba.github.io/weex/） 開發(fā)者只需要在自己的APP中嵌入Weex的SDK缀旁，就可以通過撰寫HTML/CSS/JavaScript來開發(fā)Native級(jí)別的Weex界面。Weex界面的生成碼其實(shí)就是一段很小的JS勺鸦，可以像發(fā)布網(wǎng)頁一樣輕松部署在服務(wù)端并巍，然后在APP中請(qǐng)求執(zhí)行。

與 現(xiàn)有的開源跨平臺(tái)移動(dòng)開放項(xiàng)目如Facebook的React Native和微軟的Cordova相比换途，Weex更加輕量懊渡，體積小巧。因?yàn)榛趙eb conponent標(biāo)準(zhǔn)军拟，使得開發(fā)更加簡(jiǎn)潔標(biāo)準(zhǔn)剃执，方便上手。Native組件和API都可以橫向擴(kuò)展懈息，方便根據(jù)業(yè)務(wù)靈活定制肾档。Weex渲染層具備優(yōu)異的性 能表現(xiàn)，能夠跨平臺(tái)實(shí)現(xiàn)一致的布局效果和實(shí)現(xiàn)辫继。對(duì)于前端開發(fā)來說怒见，Weex能夠?qū)崿F(xiàn)組件化開發(fā)、自動(dòng)化數(shù)據(jù)綁定骇两，并擁抱Web標(biāo)準(zhǔn)。

快速上手

參考文檔：開發(fā)文檔
Weex 是一套簡(jiǎn)單易用的跨平臺(tái)開發(fā)方案低千，能以 web 的開發(fā)體驗(yàn)構(gòu)建高性能配阵、可擴(kuò)展的 native 應(yīng)用，為了做到這些示血，Weex 與 Vue 合作棋傍，使用 Vue 作為上層框架，并遵循 W3C 標(biāo)準(zhǔn)實(shí)現(xiàn)了統(tǒng)一的 JSEngine 和 DOM API难审，這樣一來瘫拣，你甚至可以使用其他框架驅(qū)動(dòng) Weex，打造三端一致的 native 應(yīng)用告喊。

Vue 是什么麸拄？

Vue.js 是 Evan You 開發(fā)的漸進(jìn)式 JavaScript 框架。開發(fā)者能夠通過撰寫 *.vue 文件黔姜，基于 <template>, <style>, <script> 快速構(gòu)建組件化的 web 應(yīng)用拢切。

Hello World

Playground App
嘗試 Weex 最簡(jiǎn)單的方法是使用 Playground App 和在 dotWe 編寫一個(gè) Hello World 例子。你不需要考慮安裝開發(fā)環(huán)境或編寫 native 代碼秆吵，只需要做下面兩件事：
為你的手機(jī)安裝 Playground App淮椰，當(dāng)然，Weex 是跨平臺(tái)的框架，你依然可以使用瀏覽器進(jìn)行預(yù)覽主穗，只是這樣你就無法感受到 native 優(yōu)秀的體驗(yàn)了泻拦。
在新標(biāo)簽頁中打開 Hello World 例子，點(diǎn)擊預(yù)覽忽媒，然后用 Playground 掃碼即可争拐。

<template>
  <div>
    <text class="text">{{text}}</text>
  </div>
</template>
<style>
  .text {
    font-size: 50;
  }
</style>
<script>
  export default {
    data () {
      return {
        text: 'Hello World.'
      }
    }
  }
</script>

搭建開發(fā)環(huán)境

第一步：安裝依賴

brew install node
npm install -g weex-toolkit

國內(nèi)開發(fā)者可以考慮使用淘寶的 npm 鏡像 —— cnpm 安裝 weex-toolkit

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install -g weex-toolkit

第二步：初始化

然后初始化 Weex 項(xiàng)目：

$ weex init awesome-project
執(zhí)行完命令后，在 awesome-project 目錄中就創(chuàng)建了一個(gè)使用 Weex 和 Vue 的模板項(xiàng)目猾浦。

第三步：開發(fā)

之后我們進(jìn)入項(xiàng)目所在路徑陆错，weex-toolkit 已經(jīng)為我們生成了標(biāo)準(zhǔn)項(xiàng)目結(jié)構(gòu)。

在 package.json 中金赦，已經(jīng)配置好了幾個(gè)常用的 npm script，分別是：

build: 源碼打包对嚼，生成 JS Bundle
dev: webpack watch 模式夹抗，方便開發(fā)
serve: 開啟靜態(tài)服務(wù)器
debug: 調(diào)試模式
我們先通過 npm install 安裝項(xiàng)目依賴。之后運(yùn)行 npm run dev 和 npm run serve 開啟watch 模式和靜態(tài)服務(wù)器纵竖。

然后我們打開瀏覽器漠烧，進(jìn)入 http://localhost:8080/index.html 即可看到 weex h5 頁面。

初始化時(shí)已經(jīng)為我們創(chuàng)建了基本的示例靡砌，我們可以在 src/foo.vue 中查看已脓。

代碼如下所示：

<template>
  <div class="wrapper">
    <text class="weex">Hello Weex !</text>
    <text class="vue">Hello Vue !</text>
  </div>
</template>
<style scoped>
  .wrapper {
    flex-direction: column;
    justify-content: center;
  }
  .weex {
   font-size: 60px;
   text-align: center;
   color: #1B90F7;
  }
  .vue {
   font-size: 60px;
   text-align: center;
   margin-top: 30px;
   color: #41B883;
  }
</style>

關(guān)于 Weex 語法部分，你可以直接參考 Vue Guide

集成到 iOS
通過cocoaPods 集成 Weex iOS SDK到你的項(xiàng)目
首先假設(shè)你已經(jīng)完成了安裝 iOS 開發(fā)環(huán)境 和 CocoaPods
第一步：添加依賴
導(dǎo)入 Weex iOS SDK 到你已有的項(xiàng)目, 如果沒有通殃，可以參考新建項(xiàng)目在繼續(xù)下面內(nèi)容之前度液，確保你已有的項(xiàng)目目錄有名稱為 Podfile
文件，如果沒有画舌，創(chuàng)建一個(gè)堕担，用文本編輯器打開
集成 framework
WeexSDK 在 cocoaPods 上最新版本 可以在這獲取
在 Podfile
文件中添加如下內(nèi)容

source 'git@github.com:CocoaPods/Specs.git'
target 'YourTarget' do
platform :ios, '7.0'
pod 'WeexSDK', '0.9.5' ## 建議使用WeexSDK新版本
end

源碼集成
首先 拷貝 ios/sdk
目錄到你已有項(xiàng)目目錄 (此處以拷貝到你已有項(xiàng)目的根目錄為例子)，然后在 Podfile
文件中添加

source 'git@github.com:CocoaPods/Specs.git'
target 'YourTarget' do
platform :ios, '7.0'
pod 'WeexSDK', :path=>'./sdk/'
end

第二步：安裝依賴
打開命令行曲聂，切換到你已有項(xiàng)目 Podfile
這個(gè)文件存在的目錄霹购，執(zhí)行 pod install
，沒有出現(xiàn)任何錯(cuò)誤表示已經(jīng)完成環(huán)境配置朋腋。

第三步：初始化 Weex 環(huán)境
在 AppDelegate.m
文件中做初始化操作齐疙，一般會(huì)在 didFinishLaunchingWithOptions
方法中如下添加。

//business configuration
[WXAppConfiguration setAppGroup:@"AliApp"];
[WXAppConfiguration setAppName:@"WeexDemo"];
[WXAppConfiguration setAppVersion:@"1.0.0"];

//init sdk enviroment
[WXSDKEngine initSDKEnviroment];

//register custom module and component旭咽，optional
[WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];
[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];

//register the implementation of protocol, optional
[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];

//set the log level
[WXLog setLogLevel: WXLogLevelAll];

第四步：渲染 weex Instance
Weex 支持整體頁面渲染和部分渲染兩種模式贞奋，你需要做的事情是用指定的 URL 渲染 Weex 的 view，然后添加到它的父容器上轻专，父容器一般都是 viewController忆矛。

#import <WeexSDK/WXSDKInstance.h>
- (void)viewDidLoad
{
[super viewDidLoad];

_instance = [[WXSDKInstance alloc] init];
_instance.viewController = self;
_instance.frame = self.view.frame;

__weak typeof(self) weakSelf = self;
_instance.onCreate = ^(UIView *view) {
[weakSelf.weexView removeFromSuperview];
[weakSelf.view addSubview:weakSelf.weexView];
};

_instance.onFailed = ^(NSError *error) {
//process failure
};

_instance.renderFinish = ^ (UIView *view) {
//process renderFinish
};
NSURL *url = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"js"]
[_instance renderWithURL:url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
}

WXSDKInstance 是很重要的一個(gè)類，提供了基礎(chǔ)的方法和一些回調(diào)，如 renderWithURL
, onCreate
, onFailed
等催训，可以參見 WXSDKInstance.h
的聲明洽议。
第五步：銷毀 Weex Instance
在 viewController 的 dealloc 階段 銷毀掉 Weex instance，釋放內(nèi)存漫拭，避免造成內(nèi)存泄露亚兄。

- (void)dealloc
{
[_instance destroyInstance];
}

導(dǎo)入 Weex SDK framework 到工程
可以通過源碼編譯出 Weex SDK，可以在新的 feature 或者 bugfix 分支采驻，嘗試最新的 feature审胚。
參考此處直接導(dǎo)入 weexSDK。

工作原理

整體架構(gòu)
Weex 表面上是一個(gè)客戶端技術(shù)礼旅，但實(shí)際上它串聯(lián)起了從本地開發(fā)環(huán)境到云端部署和分發(fā)的整個(gè)鏈路膳叨。開發(fā)者首先可以在本地像撰寫 web 頁面一樣撰寫一個(gè) app 的頁面，然后編譯成一段 JavaScript 代碼痘系，形成 Weex 的一個(gè) JS bundle菲嘴；在云端，開發(fā)者可以把生成的 JS bundle 部署上去汰翠，然后通過網(wǎng)絡(luò)請(qǐng)求或預(yù)下發(fā)的方式傳遞到用戶的移動(dòng)應(yīng)用客戶端龄坪；在移動(dòng)應(yīng)用客戶端里，WeexSDK 會(huì)準(zhǔn)備好一個(gè) JavaScript 引擎复唤，并且在用戶打開一個(gè) Weex 頁面時(shí)執(zhí)行相應(yīng)的 JS bundle健田，并在執(zhí)行過程中產(chǎn)生各種命令發(fā)送到 native 端進(jìn)行的界面渲染或數(shù)據(jù)存儲(chǔ)、網(wǎng)絡(luò)通信佛纫、調(diào)用設(shè)備功能妓局、用戶交互響應(yīng)等移動(dòng)應(yīng)用的場(chǎng)景實(shí)踐；同時(shí)雳旅，如果用戶沒有安裝移動(dòng)應(yīng)用跟磨，他仍然可以在瀏覽器里打開一個(gè)相同的 web 頁面，這個(gè)頁面是使用相同的頁面源代碼攒盈，通過瀏覽器里的 JavaScript 引擎運(yùn)行起來的抵拘。

How it works

云端部署和分發(fā)
Weex 的 JS bundle 可以作為 web 開發(fā)中的一段靜態(tài)資源進(jìn)行部署和下發(fā)昔馋。幾乎可以復(fù)用 HTML5 所有的工程體系和最佳實(shí)踐。比如在本地開發(fā)環(huán)境通過部署工具將 JS bundle 部署到 CDN糖耸、通過 CMS 或搭建平臺(tái)把業(yè)務(wù)數(shù)據(jù)和模塊化的前端組件自動(dòng)化拼接生成 JS bundle秘遏、通過服務(wù)端 JS bundle 的流量和日志統(tǒng)計(jì)頁面的訪問情況、通過 AppCache 或類似的方式對(duì) JS bundle 在客戶端進(jìn)行緩存或預(yù)加載以降低網(wǎng)絡(luò)通信的成本等嘉竟。

客戶端 JavaScript 引擎
Weex 的 iOS 和 Android 客戶端中都會(huì)運(yùn)行一個(gè) JavaScript 引擎垄提，來執(zhí)行 JS bundle，同時(shí)向各端的渲染層發(fā)送規(guī)范化的指令周拐，調(diào)度客戶端的渲染和其它各種能力。我們?cè)?iOS 下選擇了 JavaScriptCore 內(nèi)核凰兑，而在 Android 下選擇了 UC 提供的 v8 內(nèi)核妥粟。無論是從性能還是穩(wěn)定性方面都提供了強(qiáng)有力的保障。
為了讓整個(gè)移動(dòng)應(yīng)用的資源利用得更好吏够，我們?cè)诳蛻舳颂峁┑?JavaScript 引擎是單例的勾给，即所有 JS bundle 公用一個(gè) JavaScript 內(nèi)核實(shí)例，同時(shí)對(duì)每個(gè) JS bundle 在運(yùn)行時(shí)進(jìn)行了上下文的隔離锅知，使得每個(gè) JS bundle 都能夠高效安全的工作播急。我們還把 Vue 2.0 這樣的 JS Framework 做了預(yù)置，開發(fā)者不必把 JS Framework 打包在每個(gè) JS bundle 里售睹，從而大大減少了 JS bundle 的體積桩警，也就進(jìn)一步保障了頁面打開的速度。

客戶端渲染層
Weex 目前提供了 iOS 和 Android 兩個(gè)客戶端的 native 渲染層昌妹。每個(gè)端都基于 DOM 模型設(shè)計(jì)并實(shí)現(xiàn)了標(biāo)準(zhǔn)的界面渲染接口供 JavaScript 引擎調(diào)用捶枢。并且結(jié)合 web 標(biāo)準(zhǔn)和 native 的特點(diǎn)和優(yōu)勢(shì)實(shí)現(xiàn)了一套統(tǒng)一的組件和模塊。Weex 在性能方面的表現(xiàn)也是非常優(yōu)異的飞崖，尤其是界面首屏加載時(shí)間烂叔、native 下長(zhǎng)列表的資源開銷和復(fù)用情況、CPU固歪、內(nèi)存蒜鸡、幀率 等關(guān)鍵指標(biāo)。當(dāng)然，盡管 Weex 官方已經(jīng)提供了一組開發(fā)者最常用的組件和模塊逢防，但面對(duì)豐富多樣的移動(dòng)應(yīng)用研發(fā)需求叶沛，團(tuán)隊(duì)也難免會(huì)力不從心，為此我們提供了靈活自由的橫向擴(kuò)展能力胞四，開發(fā)者可以根據(jù)自身的情況定制屬于自己的客戶端組件和模塊恬汁，進(jìn)一步豐富 Weex 在客戶端上的能力。

瀏覽器渲染
Weex 除了提供 iOS 和 Android 的客戶端渲染層之外辜伟，還基于 Vue 2.0 對(duì)官方的所有組件和模塊進(jìn)行了封裝氓侧，開發(fā)者可以基于 Vue 2.0 用同一套源代碼構(gòu)建出在瀏覽器中相同效果的頁面。并且同樣可以橫向擴(kuò)展导狡。

一次撰寫约巷，多端運(yùn)行

Weex 提供了多端一致的技術(shù)方案。

首先 web 開發(fā)體驗(yàn)在各端當(dāng)中是相同的旱捧。包括語法設(shè)計(jì)和工程鏈路独郎。
其次，Weex 的組件枚赡、模塊設(shè)計(jì)都是 iOS氓癌、Android、Web 的開發(fā)者共同討論出來的贫橙，有一定的通用性和普遍性贪婉。
Weex 開發(fā)同一份代碼，可以在不同的端上分別執(zhí)行卢肃，避免了多端的重復(fù)研發(fā)成本疲迂。

Weex 頁面結(jié)構(gòu)

一個(gè) Weex 頁面就是一個(gè)相對(duì)獨(dú)立解耦的移動(dòng)應(yīng)用界面，它不僅包括了界面展示莫湘、更包含了邏輯處理尤蒿、設(shè)備能力使用、生命周期管理等部分幅垮。
界面
DOM 模型
Weex 頁面通過類似 HTML DOM 的方式管理界面腰池，首先頁面會(huì)被分解為一個(gè) DOM 樹，军洼，每個(gè) DOM 結(jié)點(diǎn)都代表了一個(gè)相對(duì)獨(dú)立的 native 視圖的單元巩螃。然后不同的視圖單元之間通過樹形結(jié)構(gòu)組合在了一起，構(gòu)成一個(gè)完整的頁面匕争。
相關(guān)鏈接
Weex Native DOM APIs

組件
Weex 支持文字避乏、圖片、視頻等內(nèi)容型組件甘桑，也支持 div拍皮、list歹叮、scroller 等容器型組件，還包括 slider铆帽、input咆耿、textarea、switch 等多種特殊的組件爹橱。Weex 的界面就是由這些組件以 DOM 樹的方式構(gòu)建出來的萨螺。
相關(guān)鏈接
Weex 組件列表

布局系統(tǒng)
Weex 頁面中的組件會(huì)按照一定的布局規(guī)范來進(jìn)行排布，我們這里提供了 CSS 中的盒模型愧驱、flexbox 和 絕對(duì)/相對(duì)/固定/吸附布局這三大塊布局模型慰技。
盒模型：通過寬、高组砚、邊框吻商、內(nèi)外邊距、邊框等 CSS 屬性描述一個(gè)組件本身的尺寸糟红。
flexbox：通過 CSS 3 Flexbox 布局規(guī)范定義和描述組件之間的空間分布情況艾帐。
position：支持 CSS position 屬性中的 absolute
, relative
, fixed
, sticky
位置類型，其中 relative
是默認(rèn)值盆偿。

功能
Weex 提供了非常豐富的系統(tǒng)功能 API柒爸，包括彈出存儲(chǔ)、網(wǎng)絡(luò)事扭、導(dǎo)航揍鸟、彈對(duì)話框和 toast 等，開發(fā)者可以在 Weex 頁面通過獲取一個(gè) native module 的方式引入并調(diào)用這些客戶端功能 API句旱。

生命周期
每個(gè) Weex 頁面都有其自身的生命周期，頁面從開始被創(chuàng)建到最后被銷毀晰奖，會(huì)經(jīng)歷到整個(gè)過程谈撒。這是通過對(duì) Weex 頁面的創(chuàng)建和銷毀，在路由中通過 SDK 自行定義并實(shí)現(xiàn)的匾南。

使用 weex-toolkit

weex-toolkit 是官方提供的一個(gè)腳手架命令行工具啃匿，你可以使用它進(jìn)行 Weex 項(xiàng)目的創(chuàng)建，調(diào)試以及打包等功能蛆楞。
安裝

weex-toolkit
支持預(yù)覽你當(dāng)前開發(fā)的weex頁面(.we
或者.vue
)溯乒，你只需要指定預(yù)覽的文件路徑即可：

$ weex src/foo.vue

瀏覽器會(huì)自動(dòng)彈出頁面，這個(gè)時(shí)候你可以看到你所編輯的 Weex頁面的具體效果和頁面布局豹爹。如果你使用 Playground 掃描右邊的二維碼裆悄，就能夠看到 Weex 在 Android/IOS 設(shè)備上的效果了。
如果你需要預(yù)覽整個(gè)項(xiàng)目目錄臂聋，你可以輸入這樣的命令:

$ weex src --entry src/foo.vue

你需要在傳入的參數(shù)指定預(yù)覽的目錄和入口文件光稼。
打包weex項(xiàng)目
如果開發(fā)完成后或南，你可以使用 weex compile
通過命令行工具進(jìn)行單個(gè)文件或者整個(gè)項(xiàng)目的打包。

weex compile src/foo.vue dist

命令行需要兩個(gè)參數(shù)艾君，你的源碼文件或者目錄采够， 以及你生成打包后的目錄地址。
調(diào)試 Weex 頁面
weex-toolkit支持調(diào)試工具冰垄。weex devtools 蹬癌，它是專門為Weex定制的一款實(shí)現(xiàn)了 Chrome Debugging Protocol 的 inspect/debug 工具，能夠幫助你快速查看 app 運(yùn)行狀態(tài)和調(diào)試 Weex 中的 JS 代碼虹茶，當(dāng)前支持 IOS 和 Android 兩個(gè)平臺(tái)逝薪。
用法

weex debug [options] [we_file|bundles_dir]

選項(xiàng):

-h, --help 顯示幫助
-V, --verbose 顯示 debug 服務(wù)器運(yùn)行時(shí)的各種 log
-v, --version 顯示版本
-p, --port [port] 設(shè)置 debug 服務(wù)器端口號(hào) 默認(rèn)為8088
-e, --entry [entry] debug 一個(gè)目錄時(shí),這個(gè)參數(shù)指定整個(gè)目錄的入口 bundle 文件,這個(gè) bundle 文件的地址會(huì)顯示在 debug 主頁上(作為二維碼)
-m, --mode [mode] 設(shè)置構(gòu)建 we 文件的方式，transformer 最基礎(chǔ)的風(fēng)格適合單文件写烤， loader:webpack 風(fēng)格 適合模塊化的多文件 . 默認(rèn)為 transformer

開啟調(diào)試

$ weex debug

單純啟動(dòng)一個(gè)調(diào)試服務(wù)器翼闽，并同時(shí)喚起Chrome瀏覽器打開調(diào)試主頁
。這個(gè)調(diào)試主頁
上會(huì)有一個(gè)二維碼洲炊，使用 Playground App 掃這個(gè)二維碼可以開啟 Playground 調(diào)試感局。開啟調(diào)試后,設(shè)備列表中會(huì)出現(xiàn)您的設(shè)備，根據(jù)提示進(jìn)行后續(xù)的調(diào)試操作暂衡。
調(diào)試 .we
| .vue
文件

$ weex debug your_weex.vue

這個(gè)命令會(huì)將 your_weex.vue
編譯成 JS Bundle
文件 部署到 debug 服務(wù)器询微；并啟動(dòng)debug服務(wù)器如上述命令那樣打開的調(diào)試vue主頁
會(huì)多顯示一個(gè)二維碼，使用 Playground App掃這個(gè)二維碼碼可以加載 your_weex.we
(注意要先掃描開啟調(diào)試的那個(gè)二維碼碼)狂巢。這個(gè)命令會(huì)自動(dòng)檢測(cè) your_weex.we
文件變動(dòng)撑毛，如果發(fā)現(xiàn)內(nèi)容被修改則立即重新編譯部署，并刷新 debugger
頁面唧领。.
調(diào)試整個(gè)bundle/we文件夾
同樣你也可以調(diào)試整個(gè)目錄的文件藻雌，你只需要傳入目錄的路徑和入口文件即可；

$weex debug your/we/path -e index.we

這個(gè)命令會(huì)編譯你指定目錄下的所有的 .we
文件,并把編譯好的 JS Bundle 部署到 debug 服務(wù)器,他們的地址會(huì)映射到 http://lcoalhost:8088/weex/ 下比如 your/we/path/index.we
可以通過 http://lcoalhost:8088/weex/index.js 訪問斩个。your/we/path/demo/test.we
可以通過 http://lcoalhost:8088/weex/demo/index.js 胯杭。
-e
參數(shù)可以指定一個(gè)入口的 .we
文件，這個(gè)文件的地址會(huì)顯示在調(diào)試主頁
上(作為二維碼)受啥。

Weex 和 React Native的比較

Weex和React Native的異同

相同點(diǎn):

都采用Web的開發(fā)模式做个，使用JS開發(fā)；
都可以直接在Chrome中調(diào)試JS代碼滚局；
都支持跨平臺(tái)的開發(fā)居暖；
都可以實(shí)現(xiàn)hot reload，邊更新代碼邊查看效果藤肢；

不同點(diǎn):
JS引擎
什么是JS引擎
學(xué)習(xí)成本
1.環(huán)境配置：ReactNative需要按照文檔安裝配置很多依賴的工具太闺，相對(duì)比較麻煩。 weex安裝cli之后就可以使用

2.vue vs react:上面已經(jīng)做過對(duì)比react模板JSX學(xué)習(xí)使用有一定的成本 vue更接近常用的web開發(fā)方式嘁圈，模板就是普通的html跟束，數(shù)據(jù)綁定使用mustache風(fēng)格莺奸，樣式直接使用css

社區(qū)支持
Weex開源較晚，互聯(lián)網(wǎng)上相關(guān)資料還比較少冀宴，社區(qū)規(guī)模較忻鸫；
React Native社區(qū)則比較活躍略贮，可以參考的項(xiàng)目和資料也比較豐富
一張圖:從渲染時(shí)間,內(nèi)存使用,CPU占用,幀率(圖形處理器每秒鐘能夠刷新幾次,高的幀率可以得到更流暢甚疟、更逼真的動(dòng)畫。每秒鐘幀數(shù) （fps） 愈多逃延，所顯示的動(dòng)作就會(huì)愈流暢览妖。)

1494773-b0456449011ffa04.png