Weex之微體驗(yàn)

前言

之前的幾個(gè)月里项戴，已經(jīng)狠狠地體驗(yàn)了一把React-Native茬斧，享受著React-Native帶來(lái)的快捷，也承受著踩坑的痛苦刁俭。改用一句非常流行話“從入門到直接放棄”。而隨著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)目名稱 XXX茁瘦。運(yùn)行后，相應(yīng)的文件便會(huì)被創(chuàng)建储笑。

$ weex init

2. 在被創(chuàng)建的文件中甜熔，對(duì)于熟悉前端或是React-Native的同學(xué)而言，你會(huì)看到一個(gè)尤為親切的文件名——package.json突倍。就是它告訴我們腔稀，我們還需要安裝一些局部依賴庫(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文件匹舞，代碼如圖所示

4.在當(dāng)前目錄叫榕，終端執(zhí)行pod install

5.當(dāng)前目錄下創(chuàng)建一個(gè)新文件夾weex（可命令行mkdir weex），終端cd到weex目錄下姊舵，執(zhí)行weex init

6.安裝局部依賴庫(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代碼中自定義圖片加載類，該類需要遵守WXImgLoaderProtocol協(xié)議祸憋，并實(shí)現(xiàn)協(xié)議方法会宪。圖片加載類寫好后，還需在入口函數(shù)中注冊(cè)蚯窥。這里不做過(guò)多敘述掸鹅，可以參考官方Demo。在iOS中拦赠，一個(gè)Weex頁(yè)面對(duì)應(yīng)一個(gè)視圖控制器巍沙，在這里用的是官方封裝好的WXBaseViewController，你也可以選擇繼承它寫一個(gè)視圖控制器荷鼠，或是自己寫一個(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ù)稱瞻惋，他們正在“憋大招”，所以還是很期待??援岩。

3. Weex自身還不能加載本地圖片熟史。不過(guò)集成到iOS工程中后，可以通過(guò)自定義圖片加載類同時(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)在還很“年輕”履植，使用的用戶還不是很多，以至于社區(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ū)眷蚓！