2016年4月21日，阿里巴巴在Qcon大會上宣布開源跨平臺移動開發工具Weex，Weex能夠完美兼顧性能與動態性，讓移動開發者通過簡捷的前端語法寫出Native級別的性能體驗，并支持iOS、安卓、YunOS及Web等多端部署。
對于移動開發者來說，Weex主要解決了頻繁發版和多端研發兩大痛點，同時解決了前端語言性能差和顯示效果受限的問題。開發者可通過Weex官網申請內測。（http://alibaba.github.io/weex/） 開發者只需要在自己的APP中嵌入Weex的SDK，就可以通過撰寫HTML/CSS/JavaScript來開發Native級別的Weex界面。Weex界面的生成碼其實就是一段很小的JS，可以像發布網頁一樣輕松部署在服務端，然后在APP中請求執行。

與 現有的開源跨平臺移動開放項目如Facebook的React Native和微軟的Cordova相比，Weex更加輕量，體積小巧。因為基于web conponent標準，使得開發更加簡潔標準，方便上手。Native組件和API都可以橫向擴展，方便根據業務靈活定制。Weex渲染層具備優異的性 能表現，能夠跨平臺實現一致的布局效果和實現。對于前端開發來說，Weex能夠實現組件化開發、自動化數據綁定，并擁抱Web標準。

快速上手

參考文檔：開發文檔
Weex 是一套簡單易用的跨平臺開發方案，能以 web 的開發體驗構建高性能、可擴展的 native 應用，為了做到這些，Weex 與 Vue 合作，使用 Vue 作為上層框架，并遵循 W3C 標準實現了統一的 JSEngine 和 DOM API，這樣一來，你甚至可以使用其他框架驅動 Weex，打造三端一致的 native 應用。

Vue 是什么？

Vue.js 是 Evan You 開發的漸進式 JavaScript 框架。開發者能夠通過撰寫 *.vue 文件，基于 <template>, <style>, <script> 快速構建組件化的 web 應用。

Hello World

Playground App
嘗試 Weex 最簡單的方法是使用 Playground App 和在 dotWe 編寫一個 Hello World 例子。你不需要考慮安裝開發環境或編寫 native 代碼，只需要做下面兩件事：
為你的手機安裝 Playground App，當然，Weex 是跨平臺的框架，你依然可以使用瀏覽器進行預覽，只是這樣你就無法感受到 native 優秀的體驗了。
在新標簽頁中打開 Hello World 例子，點擊預覽，然后用 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>

搭建開發環境

第一步：安裝依賴

brew install node
npm install -g weex-toolkit

國內開發者可以考慮使用淘寶的 npm 鏡像 —— cnpm 安裝 weex-toolkit

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

第二步：初始化

然后初始化 Weex 項目：

$ weex init awesome-project
執行完命令后，在 awesome-project 目錄中就創建了一個使用 Weex 和 Vue 的模板項目。

第三步：開發

之后我們進入項目所在路徑，weex-toolkit 已經為我們生成了標準項目結構。

在 package.json 中，已經配置好了幾個常用的 npm script，分別是：

build: 源碼打包，生成 JS Bundle
dev: webpack watch 模式，方便開發
serve: 開啟靜態服務器
debug: 調試模式
我們先通過 npm install 安裝項目依賴。之后運行 npm run dev 和 npm run serve 開啟watch 模式和靜態服務器。

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

初始化時已經為我們創建了基本的示例，我們可以在 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>

關于 Weex 語法部分，你可以直接參考 Vue Guide

集成到 iOS
通過cocoaPods 集成 Weex iOS SDK到你的項目
首先假設你已經完成了安裝 iOS 開發環境 和 CocoaPods
第一步：添加依賴
導入 Weex iOS SDK 到你已有的項目, 如果沒有，可以參考新建項目在繼續下面內容之前，確保你已有的項目目錄有名稱為 Podfile
文件，如果沒有，創建一個，用文本編輯器打開
集成 framework
WeexSDK 在 cocoaPods 上最新版本 可以在這獲取
在 Podfile
文件中添加如下內容

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

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

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

第二步：安裝依賴
打開命令行，切換到你已有項目 Podfile
這個文件存在的目錄，執行 pod install
，沒有出現任何錯誤表示已經完成環境配置。

第三步：初始化 Weex 環境
在 AppDelegate.m
文件中做初始化操作，一般會在 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 是很重要的一個類，提供了基礎的方法和一些回調，如 renderWithURL
, onCreate
, onFailed
等，可以參見 WXSDKInstance.h
的聲明。
第五步：銷毀 Weex Instance
在 viewController 的 dealloc 階段 銷毀掉 Weex instance，釋放內存，避免造成內存泄露。

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

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

工作原理

整體架構
Weex 表面上是一個客戶端技術，但實際上它串聯起了從本地開發環境到云端部署和分發的整個鏈路。開發者首先可以在本地像撰寫 web 頁面一樣撰寫一個 app 的頁面，然后編譯成一段 JavaScript 代碼，形成 Weex 的一個 JS bundle；在云端，開發者可以把生成的 JS bundle 部署上去，然后通過網絡請求或預下發的方式傳遞到用戶的移動應用客戶端；在移動應用客戶端里，WeexSDK 會準備好一個 JavaScript 引擎，并且在用戶打開一個 Weex 頁面時執行相應的 JS bundle，并在執行過程中產生各種命令發送到 native 端進行的界面渲染或數據存儲、網絡通信、調用設備功能、用戶交互響應等移動應用的場景實踐；同時，如果用戶沒有安裝移動應用，他仍然可以在瀏覽器里打開一個相同的 web 頁面，這個頁面是使用相同的頁面源代碼，通過瀏覽器里的 JavaScript 引擎運行起來的。

How it works

云端部署和分發
Weex 的 JS bundle 可以作為 web 開發中的一段靜態資源進行部署和下發。幾乎可以復用 HTML5 所有的工程體系和最佳實踐。比如在本地開發環境通過部署工具將 JS bundle 部署到 CDN、通過 CMS 或搭建平臺把業務數據和模塊化的前端組件自動化拼接生成 JS bundle、通過服務端 JS bundle 的流量和日志統計頁面的訪問情況、通過 AppCache 或類似的方式對 JS bundle 在客戶端進行緩存或預加載以降低網絡通信的成本等。

客戶端 JavaScript 引擎
Weex 的 iOS 和 Android 客戶端中都會運行一個 JavaScript 引擎，來執行 JS bundle，同時向各端的渲染層發送規范化的指令，調度客戶端的渲染和其它各種能力。我們在 iOS 下選擇了 JavaScriptCore 內核，而在 Android 下選擇了 UC 提供的 v8 內核。無論是從性能還是穩定性方面都提供了強有力的保障。
為了讓整個移動應用的資源利用得更好，我們在客戶端提供的 JavaScript 引擎是單例的，即所有 JS bundle 公用一個 JavaScript 內核實例，同時對每個 JS bundle 在運行時進行了上下文的隔離，使得每個 JS bundle 都能夠高效安全的工作。我們還把 Vue 2.0 這樣的 JS Framework 做了預置，開發者不必把 JS Framework 打包在每個 JS bundle 里，從而大大減少了 JS bundle 的體積，也就進一步保障了頁面打開的速度。

客戶端渲染層
Weex 目前提供了 iOS 和 Android 兩個客戶端的 native 渲染層。每個端都基于 DOM 模型設計并實現了標準的界面渲染接口供 JavaScript 引擎調用。并且結合 web 標準和 native 的特點和優勢實現了一套統一的組件和模塊。Weex 在性能方面的表現也是非常優異的，尤其是界面首屏加載時間、native 下長列表的資源開銷和復用情況、CPU、內存、幀率 等關鍵指標。當然，盡管 Weex 官方已經提供了一組開發者最常用的組件和模塊，但面對豐富多樣的移動應用研發需求，團隊也難免會力不從心，為此我們提供了靈活自由的橫向擴展能力，開發者可以根據自身的情況定制屬于自己的客戶端組件和模塊，進一步豐富 Weex 在客戶端上的能力。

瀏覽器渲染
Weex 除了提供 iOS 和 Android 的客戶端渲染層之外，還基于 Vue 2.0 對官方的所有組件和模塊進行了封裝，開發者可以基于 Vue 2.0 用同一套源代碼構建出在瀏覽器中相同效果的頁面。并且同樣可以橫向擴展。

一次撰寫，多端運行

Weex 提供了多端一致的技術方案。

首先 web 開發體驗在各端當中是相同的。包括語法設計和工程鏈路。
其次，Weex 的組件、模塊設計都是 iOS、Android、Web 的開發者共同討論出來的，有一定的通用性和普遍性。
Weex 開發同一份代碼，可以在不同的端上分別執行，避免了多端的重復研發成本。

Weex 頁面結構

一個 Weex 頁面就是一個相對獨立解耦的移動應用界面，它不僅包括了界面展示、更包含了邏輯處理、設備能力使用、生命周期管理等部分。
界面
DOM 模型
Weex 頁面通過類似 HTML DOM 的方式管理界面，首先頁面會被分解為一個 DOM 樹，，每個 DOM 結點都代表了一個相對獨立的 native 視圖的單元。然后不同的視圖單元之間通過樹形結構組合在了一起，構成一個完整的頁面。
相關鏈接
Weex Native DOM APIs

組件
Weex 支持文字、圖片、視頻等內容型組件，也支持 div、list、scroller 等容器型組件，還包括 slider、input、textarea、switch 等多種特殊的組件。Weex 的界面就是由這些組件以 DOM 樹的方式構建出來的。
相關鏈接
Weex 組件列表

布局系統
Weex 頁面中的組件會按照一定的布局規范來進行排布，我們這里提供了 CSS 中的盒模型、flexbox 和 絕對/相對/固定/吸附布局這三大塊布局模型。
盒模型：通過寬、高、邊框、內外邊距、邊框等 CSS 屬性描述一個組件本身的尺寸。
flexbox：通過 CSS 3 Flexbox 布局規范定義和描述組件之間的空間分布情況。
position：支持 CSS position 屬性中的 absolute
, relative
, fixed
, sticky
位置類型，其中 relative
是默認值。

功能
Weex 提供了非常豐富的系統功能 API，包括彈出存儲、網絡、導航、彈對話框和 toast 等，開發者可以在 Weex 頁面通過獲取一個 native module 的方式引入并調用這些客戶端功能 API。

生命周期
每個 Weex 頁面都有其自身的生命周期，頁面從開始被創建到最后被銷毀，會經歷到整個過程。這是通過對 Weex 頁面的創建和銷毀，在路由中通過 SDK 自行定義并實現的。

使用 weex-toolkit

weex-toolkit 是官方提供的一個腳手架命令行工具，你可以使用它進行 Weex 項目的創建，調試以及打包等功能。
安裝

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

$ weex src/foo.vue

瀏覽器會自動彈出頁面，這個時候你可以看到你所編輯的 Weex頁面的具體效果和頁面布局。如果你使用 Playground 掃描右邊的二維碼，就能夠看到 Weex 在 Android/IOS 設備上的效果了。
如果你需要預覽整個項目目錄，你可以輸入這樣的命令:

$ weex src --entry src/foo.vue

你需要在傳入的參數指定預覽的目錄和入口文件。
打包weex項目
如果開發完成后，你可以使用 weex compile
通過命令行工具進行單個文件或者整個項目的打包。

weex compile src/foo.vue dist

命令行需要兩個參數，你的源碼文件或者目錄， 以及你生成打包后的目錄地址。
調試 Weex 頁面
weex-toolkit支持調試工具。weex devtools ，它是專門為Weex定制的一款實現了 Chrome Debugging Protocol 的 inspect/debug 工具，能夠幫助你快速查看 app 運行狀態和調試 Weex 中的 JS 代碼，當前支持 IOS 和 Android 兩個平臺。
用法

weex debug [options] [we_file|bundles_dir]

選項:

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

開啟調試

$ weex debug

單純啟動一個調試服務器，并同時喚起Chrome瀏覽器打開調試主頁
。這個調試主頁
上會有一個二維碼，使用 Playground App 掃這個二維碼可以開啟 Playground 調試。開啟調試后,設備列表中會出現您的設備，根據提示進行后續的調試操作。
調試 .we
| .vue
文件

$ weex debug your_weex.vue

這個命令會將 your_weex.vue
編譯成 JS Bundle
文件 部署到 debug 服務器；并啟動debug服務器如上述命令那樣打開的調試vue主頁
會多顯示一個二維碼，使用 Playground App掃這個二維碼碼可以加載 your_weex.we
(注意要先掃描開啟調試的那個二維碼碼)。這個命令會自動檢測 your_weex.we
文件變動，如果發現內容被修改則立即重新編譯部署，并刷新 debugger
頁面。.
調試整個bundle/we文件夾
同樣你也可以調試整個目錄的文件，你只需要傳入目錄的路徑和入口文件即可；

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

這個命令會編譯你指定目錄下的所有的 .we
文件,并把編譯好的 JS Bundle 部署到 debug 服務器,他們的地址會映射到 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
參數可以指定一個入口的 .we
文件，這個文件的地址會顯示在調試主頁
上(作為二維碼)。

Weex 和 React Native的比較

Weex和React Native的異同

相同點:

都采用Web的開發模式，使用JS開發；
都可以直接在Chrome中調試JS代碼；
都支持跨平臺的開發；
都可以實現hot reload，邊更新代碼邊查看效果；

不同點:
JS引擎
什么是JS引擎
學習成本
1.環境配置：ReactNative需要按照文檔安裝配置很多依賴的工具，相對比較麻煩。 weex安裝cli之后就可以使用

2.vue vs react:上面已經做過對比react模板JSX學習使用有一定的成本 vue更接近常用的web開發方式，模板就是普通的html，數據綁定使用mustache風格，樣式直接使用css

社區支持
Weex開源較晚，互聯網上相關資料還比較少，社區規模較?。?br> React Native社區則比較活躍，可以參考的項目和資料也比較豐富
一張圖:從渲染時間,內存使用,CPU占用,幀率(圖形處理器每秒鐘能夠刷新幾次,高的幀率可以得到更流暢、更逼真的動畫。每秒鐘幀數 （fps） 愈多，所顯示的動作就會愈流暢。)

1494773-b0456449011ffa04.png