作為一個(gè)純iOS開發(fā)者，每次想學(xué)習(xí)web都是看兩小時(shí)就放棄。這次希望自己能夠堅(jiān)持下去。關(guān)于weex與 react native，暫且不管有多少坑，先嘗試踩一踩，畢竟踩坑也是站立在巨人肩上。本文僅僅作為個(gè)人學(xué)習(xí)筆記，歡迎留言溝通。
對(duì)比：
兩者對(duì)比，這篇文章講解不錯(cuò)傳送門，在此稍作總結(jié)。
相同點(diǎn)：
- 組件化，樣式、邏輯和界面的分離
- 都能熱更新，可以邊更改代碼，邊調(diào)試
- 都可以在chrome中調(diào)試JS代碼
- 使用flex布局（flex傳送門）
不同點(diǎn)：
weex （weex官方）：write once, run anywhere
貓廠2016年6月開源的基于vue.jsvue傳送門的小巧輕量的前端開發(fā)框架；weex可以直接在mvn項(xiàng)目中使用；weex提供了一個(gè)playground，可以方便的預(yù)覽正在開發(fā)的頁面（在Apple Store上可以下載）；weex可以支持Android iOS web三個(gè)平臺(tái)；
ReactNative：learn once, write anywhere
Facebook在2015年3月在F8開發(fā)者大會(huì)上開源的基于React跨平臺(tái)UI框架；需要解決mvn依賴的問題，必須自己修改源碼，打包發(fā)布；ReactNative開發(fā)一個(gè)頁面，需要建立一個(gè)native工程，然后編譯運(yùn)行；ReactNative支持Android iOS兩個(gè)平臺(tái)，需要自己擴(kuò)展去支持web；
公司一個(gè)同事噴“ React Native環(huán)境很難搭建”，其實(shí)真正了解后其實(shí)就是需要配置很多依賴工具，本篇先從weex入手。學(xué)習(xí)一個(gè)技術(shù)，我喜歡先從基礎(chǔ)入手，有一定基礎(chǔ)上提出自己的問題，再深入學(xué)習(xí)，解決。在初接觸weex時(shí)難免會(huì)有以下問題：
- 如何在mac上搭建weex環(huán)境？
- 如何使用weex創(chuàng)建工程，編寫經(jīng)典的HelloWorld?
- 如何將weex集成到iOS工程?
- 如何將weex創(chuàng)建的工程轉(zhuǎn)換成js在iOS工程中使用?
本篇將一一講解。
基礎(chǔ)概念
- Homebrew： macOS套件管理器
- npm：avaScript 包管理工具
- weex-toolkit：官方提供的一個(gè)腳手架命令行工具，你可以使用它進(jìn)行 Weex 項(xiàng)目的創(chuàng)建，調(diào)試以及打包等功能
- Sublime Text：優(yōu)雅的代碼編輯器
- cocoaPods：iOS最常用最有名的類庫管理工具
- .we：weex創(chuàng)建的文件類型
開始吧！
一、搭建開發(fā)環(huán)境
1、安裝Homebrew
<code>/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"</code>
2、安裝Node
<code>brew install node</code>
3、檢測(cè)是否安裝成功，目前為v7.7.3
<code>node -v</code>
安裝完node后會(huì)自動(dòng)安裝npm，檢查npm，目前為4.1.2
<code>npm -v</code>
4、npm安裝weex-toolkit
<code>npm install -g weex-toolkit</code>
*可能會(huì)出現(xiàn)權(quán)限不夠，用sudo執(zhí)行；
<code>sudo npm install -g weex-toolkit</code>
*可能會(huì)出現(xiàn)Vue未安裝警告，不用管。
查看版本，目前為v1.0.4
<code>weex -v</code>
驗(yàn)證是否安裝成功
<code>weex -h</code>
出現(xiàn)下圖表示成功，其中命令需要熟練使用。
至此weex環(huán)境搭建成功！
二、Weex下HelloWord
官方采用weex init創(chuàng)建項(xiàng)目，需要了解的可以穿越過去傳送門，在此，感謝MountainX的博文采用Sublime Text創(chuàng)建編輯.we，相信大家對(duì)Sublime Text都有種親切感。
1、使用Sublime創(chuàng)建一個(gè)名為helloWorld.we文件，添加代碼：
<code>
<div>
<text>Hello World</text>
</div>
</code>
保存。
2、打開Terminal，cd到helloWorld.we所在目錄，執(zhí)行命令：
<code>weex helloWorld.we </code>
瀏覽器自動(dòng)打開一個(gè)新的標(biāo)簽頁，展示helloWorld.we的執(zhí)行效果：
*鏈接中的hot reload，驗(yàn)證了熱更新
用手機(jī)安裝的WeexPlayground掃描，同步運(yùn)行在app中。
3、上面的示例只是一個(gè)非常簡(jiǎn)單的雛形，而一個(gè)比較完整的Weex程序包括三個(gè)部分：模板（Template）、樣式（Style）和腳本（Script）。用Sublime打開helloWorld.we，編輯
<code>
<template>
<div>
<text class="title" onclick="onClickTitle">Hello World</text>
</div>
</template>
<style>
.title { color: red; }
</style>
<script>
module.exports = {
methods: {
onClickTitle: function (e) {
console.log(e);
alert('title clicked.');
}
}
}
</script>
</code>
保存。見證奇跡的一刻到了，Hello World自動(dòng)刷新為紅色，點(diǎn)擊彈框提示框。
至此，一個(gè)完整helloWorld的weex項(xiàng)目就完成了。
有沒有小激動(dòng)？先喝個(gè)茶，平靜下心情。
繼續(xù)！
三、將weex集成到iOS工程
你可以選擇從GitHub上直接下載Weex源碼，你也可以通過cocoaPods集成 Weex SDK到iOS工程。
在此，講述通過cocoaPods(偉大的iOS類庫管理工具)集成。
mark一個(gè)福利：
cocoaPods安裝
cocoaPods可能會(huì)遇到的問題
回歸正題：
1、cd到你的應(yīng)用根目錄，pod init創(chuàng)建Podfile文件（如果已有Podfile文件則跳過），我本地的應(yīng)用名稱為weexTest，放在桌面
<code>
cd ~/Desktop/weexTest
pod init
</code>
2、查看weexSDK版本，目前版本是0.8.0
<code>
pod search 'weexSDK'
</code>
查看weex命令行工具ATSDK-Weex版本
<code>
pod search ATSDK-Weex
</code>
目前版本是0.8.0
3、打開Podfile， vim福利
<code>vim Podfile</code>
后如下圖：
<code>
Uncomment the next line to define a global platform for your project
platform :ios, '9.0'
target 'weexTest' do
Uncomment the next line if you're using Swift or would like to use dynamic frameworks
use_frameworks!
Pods for weexTest
end
</code>
4、編輯Podfile
你可以輸入上面weexSDK版本，也可以不指定，編輯后如圖：
<code>
Uncomment the next line to define a global platform for your project
platform :ios, '9.0'
target 'weexTest' do
Uncomment the next line if you're using Swift or would like to use dynamic frameworks
use_frameworks!
Pods for weexTest
pod 'WeexSDK' #不指定版本
pod 'ATSDK-Weex', '0.0.1'
end
</code>
4、執(zhí)行Podfile，pod install安裝
<code>
pod install
</code>
至此，集成完成。
5、打開weexTest工程，運(yùn)行，報(bào)錯(cuò)Undefined symbols for architecture arm64
6、缺少靜態(tài)庫文件，在Targets中新增libsqlite3.0.tbd：
Targets->Build Phases->Link Binary With Libraries->libsqlite3.0.tbd
在此運(yùn)行，調(diào)試臺(tái)打印日志[DYMTLInitPlatform] platform initialization successful！
完美！
四、深入學(xué)習(xí)Weex
后續(xù)完成！
哈哈，開始踩坑。因?yàn)閣eex才開始發(fā)不一年不到，很多問題他們也在一步步解決和完善。前文提到用Sublime創(chuàng)建.we，是基于vue1.0，目前vue2.0按照之前的方法，在.we的根目錄下執(zhí)行weex helloWorld會(huì)出現(xiàn)對(duì)應(yīng)的js，現(xiàn)在走不通了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
至此，要尋找其他方法，在下一章中講解。
