前言
之前的幾個月里，已經狠狠地體驗了一把React-Native，享受著React-Native帶來的快捷，也承受著踩坑的痛苦。改用一句非常流行話“從入門到直接放棄”。而隨著Weex的開源，仿佛又看到了一絲希望的曙光，于是閑暇之余先嘗試一番，應大領導要求做些技能儲備，以便將來不時之需……
閑話不多說，下面開始體驗之旅
準備工作——Weex環境搭建
1. 首先安裝Node.js
$ brew install node
2. 安裝Weex的集成環境
$ sudo npm install -g weex-toolkit
3. 驗證是否安裝成功
$ weex
4. 開發工具選擇
我使用的是Sublime Text，期間也使用過WebStorm，但總是莫名的卡頓所以最終放棄了。
Sublime Text高亮狀態設置：View -> Syntax -> Vue Component
Weex項目——“Hello Weex!”
1. 新建一個文件 WeexDemo，在 WeexDemo 目錄下用終端執行：weex init，接著按照提示輸入項目名稱 XXX。運行后，相應的文件便會被創建。
$ weex init
2. 在被創建的文件中，對于熟悉前端或是React-Native的同學而言，你會看到一個尤為親切的文件名——package.json。就是它告訴我們，我們還需要安裝一些局部依賴庫，所以老老實實地在終端接著運行npm install。（做個說明，新版的Node.js中已經集成了npm，所以我們在安裝過新版的Node.js后就無需再安裝npm了。當然你也可以運行npm -v來查看電腦中是否安裝）。
$ npm install
3. 執行后，WeexDemo文件中的目錄如圖所示
· index.html——瀏覽器啟動頁面
· src——用來存放.we文件
· webpack.config.js——webpack的配置文件
4. 一切就緒后，我們可以查看一下這個項目最終的運行結果是什么。終端運行npm run serve
瀏覽器訪問：http://localhost:8080/，這樣你就會看到一個“HelloWeex!” 的頁面。（如果打開的頁面沒顯示，可以先執行npm run dev 后再執行 npm run serve ）
$ npm run serve
當然也可以更快捷一點，weex-bootstrap.we為src中的文件，我們通過運行weex src/weex-bootstrap.we直接在瀏覽器中查看weex-bootstrap.we的運行結果。
$ weex src/weex-bootstrap.we
5. 運行結果如圖所示
如何集成Weex到iOS工程中
作為iOS開發，當然還需要把Weex集成到iOS工程中好好體驗一把。說干就干，并且有圖有真相。
1. 項目初始化
2. 在根目錄下執行touch Podfile，然后編輯Podfile文件，代碼如圖所示
3.下載最新的WeexSDK，地址為：https://github.com/alibaba/weex，將sdk文件夾拷貝到新建的iOS項目中，和Podfile里配置的路徑保持一致
4.在當前目錄，終端執行pod install
5.當前目錄下創建一個新文件夾weex（可命令行mkdir weex），終端cd到weex目錄下，執行weex init
6.安裝局部依賴庫，在當前目錄下（weex目錄下）執行：npm install
7.創建一個文件夾js，存放后面weex src -o js生成的js文件。為什么要生成js文件，建議去查看Weex的工作原理
8.將創建的js文件夾導入到Xcode工程的文件列表,注意箭頭所指
9.Xcode打開workspace項目文件，在AppDelegate.m文件中導入頭文件#import 。初始化代碼
10.運行結果如圖所示
在模擬器中，沒有顯示網絡圖片是因為需要在iOS代碼中自定義圖片加載類，該類需要遵守WXImgLoaderProtocol協議，并實現協議方法。圖片加載類寫好后，還需在入口函數中注冊。這里不做過多敘述，可以參考官方Demo。在iOS中，一個Weex頁面對應一個視圖控制器，在這里用的是官方封裝好的WXBaseViewController，你也可以選擇繼承它寫一個視圖控制器，或是自己寫一個視圖控制器配合WXSDKInstance來實現Weex頁面渲染。
Weex-Demo演示
1. Gif動態圖展示
2. Weex-Demo下載地址：https://github.com/yanshiyu/Weex-Demo.git?里面的實現功能在這里不做敘述，有興趣的同學可以下載Demo到本地閱讀。有問題的也可以在github上留言提問。
總結
1. 因為之前入手過React-Native，所以轉戰Weex還是很比較輕松，但是開發之前還是需要好好研究文檔，遇到復雜點功能則需要仔細研讀阿里的官方Demo。
2. 目前Weex的文檔還不夠詳細，遭到很多開發人員的吐槽，阿里內部人員回復稱，他們正在“憋大招”，所以還是很期待??。
3. Weex自身還不能加載本地圖片。不過集成到iOS工程中后，可以通過自定義圖片加載類同時實現網絡圖片和本地圖片的加載。
4. 不得不說，Weex中的ListView是一個很大亮點，不僅實現了cell復用，而且數據處理方面也很簡單。
5. 說實話，Weex初體驗感覺還是很好的，只是Weex現在還很“年輕”，使用的用戶還不是很多，以至于社區不是很活躍，相關技術博客也不是很多。希望隨著Weex各方面的完善，越來越多的人可以投身到Weex開發中來，真正的做到”Write once, run everywhere”。
==================
此文之前于2016-11-29發布于微信公眾號insightLabs上，今日特重新發布于簡書！
==================
