Weex系列一、建構Weex工程
Posted on
2017-03-10 17:18
我是小強zz
閱讀(354)
評論(0)
編輯
收藏
舉報
Weex比React Native更簡單，更容易學習，并且做到真正的跨平台，一套代碼可以多個平台運作。是以建議大家都用Weex吧。
一、安裝Node
已經安裝Node的，請忽略過去。
檢查Node是否安裝的指令：
$ node -v
v7.3.0
大家可以看阿裡團隊的博文，我這裡也說下。
1、要先安裝Node。在Mac我是用Homebrew來安裝的。
安裝指令： brew install node
2、接着我們需要安裝Weex CLI。
終端中執行： sudo npm install -g weex-toolkit
3、npm 是 Node 的子產品管理器，執行install因為連的是國外的伺服器，事件可能會很慢。如果大家運作上面的語句很慢 可以按下面的來做，如果大家已經FQ，就不用按下面的來了。
3.1、删除代理設定：
#npm config delete proxy
#npm config delete https-proxy
然後 終端執行：
npm --registry https://registry.npm.taobao.org info underscore
也可以用下面2種方法：
3.2、終端執行：
npm config set registry https://registry.npm.taobao.org npm info underscore
如果上面配置正确這個指令會有字元串response
3.3：編輯 ~/.npmrc 加入下面内容，将配置寫死，下次用的時候配置還在registry = https://registry.npm.taobao.org
4、如果安裝中遇到下面的警報，可以忽略，不用管，也可以運作指令來修正。
4.1、安裝的時候報警報：npm warn deprecated [email protected]: lodash@<3.0.0，
可以執行下面2句指令行即可：
npm uninstall lodash
npm install lodash@latestnpm cache clean
4.2、如果報錯：npm ERR! tar.unpack untar error ，可以執行下面指令：sudo npm cache clean
二、引入SDK
1、我們建立一個項目：WeexDemo。
2、從github下載下傳Weex項目後，然後将ios/sdk 檔案夾複制到根目錄，并建立一個Podfile檔案，檔案内容為：
source \'https://github.com/CocoaPods/Specs.git\'
platform :ios, \'7.0\'
#inhibit_all_warnings!
def common
pod \'WeexSDK\', :path=>\'./sdk/\'
end
target \'WeexDemo\' do
common
end
3、指令行cd到根目錄，然後執行pod install --verbose --no-repo-update
如圖：
三、寫代碼
我們用最簡單的方式來先把代碼寫出來。
首先我們先做個簡單的Demo。已經放到github上了。大家可以下載下傳看看，我們下面講的就是這個Demo的代碼。
1、建立一個項目,初始化SDK。
在AppDelegate檔案裡的didFinishLaunchingWithOptions方法裡 初始化Weex的SDK。如圖：
初始化Weex的SDK
上圖中，我們先配置了一些資訊，也可以不配置。直接 初始化SDK：
[WXSDKEngine initSDKEnvironment];
其中 列印類型 我們設定的為WXLogLevelAll。 該枚舉的全部類型為：
WXLogLevel枚舉
初始化SDK後，需要調用registerModule方法 注冊我們自己寫的WXEventModule。Module可以讓JS主動調用原生iOS代碼。
registerModule我們後面再講，我們可以先把registerModule這句 給注釋掉。先看VC如何加載js 來實作一個頁面的。
2、VC頁面設定。
我們在ViewController頁面 先寫個原生的按鈕，然後 用指定的 URL 渲染 weex 的 view，把該view添加到VC的view上。
self.view上加上一個原生的UIButton。用render方法來初始化JS的頁面。
我們在viewDidLoad裡讀取了一個helloWeex.js的檔案路徑，下面我們會講 這個js是怎麼建立生成的。現在大家就當已經建立好了。
addTestBtn方法是用來建立原生UIButton的。
3、加載JS檔案顯示頁面
我們先初始化WXSDKInstance，WXSDKInstance可以通過renderWithURL方法根據傳入的js來建立相關的UIView，它有一些回調方法：
onCreate：根視圖rootView建立的時候
onFailed：處理失敗後
renderFinish：視圖渲染完成
componentForRef：通過視圖索引拿到對應的元件視圖
我們在onCreate 的block中将WXSDKInstance生成好的UIView add到self.view上。
4、上面代碼運作的效果如下：
四、前端頁面
Sublime 可以設定weex高亮。大家可以點選去看下。
我們來看下 上面說的js檔案 是怎麼建立生成的。
我們建立一個helloWeex.we的檔案。如圖：
helloWeex.we
1、代碼分析
上文中的template模闆中預設建了一個顯示文字為“Hello Weex” 的text。其中class="title"，也就是樣式為title。onclick="onClickTitle"：也就是 點選該文本會調用onClickTitle的js方法。
然後下面設定了title的樣式：.title { color: red; } 。是以字型會顯示紅色。
最下面設定了onClickTitle的js方法。是以當你點選文本的時候 會在控制台列印日志，但是alert方法在iOS中沒有執行，這個我們後面再說。
2、浏覽器運作效果
在終端 cd到改檔案所在的目錄，然後執行： weex helloWeex.we 。
會自動打開浏覽器：http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=helloWeex.js&loader=xhr
點選該文本，會提示相關文字：
3、生成js檔案
然後再終端執行：
weex helloWeex.we -o helloWeex.js
會生成 js檔案，我們把這個js檔案拖到項目中。目錄如下：
WeexDemo項目檔案
4、WeexPlayground掃描
如果你想不想引入到自己項目中，而是想直接在手機上看上面helloWeex.we的效果。可以從AppStore下載下傳WeexPlayground，然後 在終端中輸入： weex helloWeex.we --qr 。
終端會生成一個二維碼（如下圖），然後用WeexPlayground 這個APP掃描這個二維碼 即可。