一、Weex簡介
大約兩年前，為了寫一本Weex的入門書籍，我花了幾個月的時間學習了下Weex跨平台相關的知識。
Weex 是阿裡前端技術團隊開源的一套跨平台開發方案，能以Web的開發體驗建構高性能、可擴充的 Native 應用。簡單來說，在內建了 WeexSDK 之後，開發者就可以使用 JavaScript 語言和前端開發經驗來開發移動應用。Weex 渲染引擎與DSL文法層是分開的，Weex 并不強依賴任何特定的前端架構。Weex 應用的頁面表示層使用Vue，并遵循 W3C 标準實作了統一的 JSEngine 和 DOM API，Weex和React Native一樣是目前流行的跨平台開發架構。
Weex 的另一個主要目标是跟進流行的 Web 開發技術并将其和原生開發的技術結合，實作開發效率和運作性能的高度統一。在開發階段，一個 Weex 頁面就像開發普通網頁一樣；在運作時，Weex 頁面又充分利用了各種作業系統的原生元件和能力。
Weex的官方位址為：https://weex.apache.org/。Weex最簡單的方法是使用 Playground App 和在 dotWe 編寫一個 Hello World 的例子，開發者甚至不需要安裝任何的開發環境或編寫Native代碼即可開始一個Weex應用程式。
通過下圖，你可以大緻了解 Weex 是如何工作的。
在這裡插入圖檔描述
二、環境搭建
開發Weex程式之前，需要先搭建好相關的開發環境，為了同時開發Android和iOS跨平台應用，還需要準備一台Mac電腦，然後安裝一些必要的軟體，比如Homebrew、Node、weex-toolkit、weexpack以及原生Android和iOS環境。
Homebrew
Homebrew是Mac系統的包管理器，用于安裝NodeJS和一些其他必需的工具軟體，安裝指令如下。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 複制
需要注意的是，在Max OS X 10.11以上版本中，homebrew在安裝軟體時可能會碰到/usr/loca目錄不可寫的權限問題，需要以管理者權限運作。
Node.js
Weex目前需要NodeJS 6.0或更高版本，Homebrew預設安裝的是最新版本，一般都滿足要求。
brew install node 複制
安裝Node後建議設定npm鏡像以加速後面的項目建構過程。注意：不要使用cnpm！cnpm安裝的子產品路徑比較奇怪，有可能packager不能正常識别。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global 複制
weex-toolkit
weex-toolkit 是官方提供的一個腳手架指令行工具，可以使用它進行 Weex 項目的建立，調試以及打包等功能，安裝weex-toolkit的指令如下所示。
npm install weex-toolkit -g 複制
weexpack
weexpack 是新一代的weex應用工程和插件工程開發套件，是基于weex快速搭建應用原型的利器。可以建立weex應用工程和插件工程，快速打包 weex 應用并安裝到手機運作，還可以建立weex插件模版并釋出插件到weex應用市場， 使用weexpack 能夠友善的在在weex工程和native工程中安裝插件，安裝weexpack的指令如下。
npm install weexpack -g 複制
三、建立項目
3.1 初始化項目
完成上面的軟體安裝後，接下來就可以使用 weex create 指令來建立一個空的模闆項目，如下所示。
weex create awesome-app 複制
指令執行完以後，在目前目錄的 awesome-app 檔案夾裡就有了一個空的 Weex + Vue.js 項目，目錄結構如下所示。
├── android.config.json
├── configs
├── dist
├── ios.config.json
├── node_modules
├── package-lock.json
├── package.json
├── platforms
│ └── platforms.json
├── plugins
├── src //源碼
├── test
├── web
│ └── assets
│ ├── index.html
│ ├── index.js
└── webpack.config.js 複制
3.2 開發
進入剛剛建立的檔案夾，并且安裝依賴，然後執行 npm start指令。
cd awesome-app
npm install
npm start 複制
然後工具會啟動一個本地的 web 服務，監聽 8081 端口。然後打開 http://localhost:8081 檢視頁面在 Web 下的渲染效果。
在這裡插入圖檔描述
當然，也可以使用Playground App掃碼頁面二維碼檢視效果，不管需要說明的是，掃碼二維碼的手機需要在同一個區域網路。
3.3 編譯和運作
預設情況下 weex create 指令并不初始化 iOS 和 Android 項目，不過我們可以通過執行
weex platform add
指令來添加特定平台支援。
weex platform add ios
weex platform add android 複制
執行上面的指令後，platforms目錄就會多了Android和iOS的原生工程目錄。當開發環境準備就緒後，運作下面的指令，可以在模拟器或真實裝置上啟動應用。
weex run ios
weex run android
weex run web 複制
如果沒有任何錯誤，運作的效果如下圖所示。
在這裡插入圖檔描述
3.4 調試
weex-toolkit 還提供了強大的調試功能，隻需要執行如下指令即可。
eex debug 複制
這條指令會啟動一個調試服務，并且在 Chrome （目前隻支援基于 V8 引擎的桌面浏覽器） 中打開調試頁面。