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