本文講述iOS項目集成WeexSDK、WXDevtool超全、GCanvas等碱工；也將介紹native如何與Weex通訊
iOS項目集成WeexSDK
在iOS工程中集成FrameWork無外乎兩種，第一予弧，項目支持cocoaPods以躯，采用cocoaPods 集成 Weex iOS SDK到你的項目槐秧；第二，源碼集成忧设，優(yōu)勢在于可以修改WeexSDK刁标，打包生成你自己定制的Weex SDK。
兩種方式官網(wǎng)都提供了參考见转，雖然有些亂七八糟命雀。
前期只是為了學(xué)習(xí)，沒有深入學(xué)習(xí)Weex SDK源碼斩箫，采用cocoaPods集成吏砂，首先確保你的cocoaPods版本為較新版本撵儿。
查看WeexSDK版本，目前為0.12.0
pod search WeexSDK
創(chuàng)建狐血、編輯Podfile
打開命令行淀歇，切換到你已有項目 Podfile 這個文件存在的目錄，執(zhí)行pod init匈织；用文本編輯器打開Podfile文件浪默，添加如下內(nèi)容
source 'git@github.com:CocoaPods/Specs.git'
target 'YourTarget' do
platform :ios, '7.0'
pod 'WeexSDK', '0.12.0' ## 建議使用WeexSDK新版本
end
添加WXDevtool，如果項目用到SDWebImage缀匕，也一并添加纳决，添加完成后如圖（建議添加的庫都search下，使用最新版本）：
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
source 'git@github.com:CocoaPods/Specs.git'
target 'WeexStudyDemo' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!
# Pods for WeexStudyDemo
platform :ios, '7.0'
pod 'WeexSDK', '0.12.0' ## 建議使用WeexSDK新版本
pod 'SDWebImage', '4.0.0'
pod 'SocketRocket', '0.5.1'
pod 'WXDevtool', '0.9.5'
end
4乡小、安裝依賴
執(zhí)行 pod install阔加，沒有出現(xiàn)任何錯誤表示已經(jīng)完成環(huán)境配置。
SDK導(dǎo)入完成满钟。
iOS工程使用WeexSDK
為了便于擴展胜榔，我創(chuàng)建了一個PFWeexDefine存放Weex的宏；創(chuàng)建了PFWeexManager文件管理Weex湃番；PFWeexViewController作為Weex頁面容器夭织。
1、在PFWeexDefine中導(dǎo)入框架頭文件
#ifdef EnableWeexSDK
#import <WeexSDK/WeexSDK.h>
#import <WeexSDK/WXSDKInstance.h>
#import <WeexSDK/WXSDKEngine.h>
#import <WeexSDK/WXUtility.h>
#import <WeexSDK/WXDebugTool.h>
#import <WeexSDK/WXSDKManager.h>
#import <WeexSDK/WXEventModuleProtocol.h>
#import <WeexSDK/WXModuleProtocol.h>
#import <TBWXDevTool/WXDevTool.h>
#endif
2吠撮、在PFWeexManager創(chuàng)建單例尊惰，管理WeexSDK，初始化Weex環(huán)境
在 AppDelegate.m 文件中使用PFWeexManager纬向，一般會在 didFinishLaunchingWithOptions 方法中添加择浊。
- (void)initWeexSDK {
#ifdef EnableWeexSDK
//1.1 設(shè)置組織
[WXAppConfiguration setAppGroup:@"PFWeex"];
//1.2 設(shè)置App的名稱
[WXAppConfiguration setAppName:@"WeexStudyDemo"];
//1.3 設(shè)置App的版本號
[WXAppConfiguration setAppVersion:AppVersion];
//2. 初始化`WeexSDK`環(huán)境
[WXSDKEngine initSDKEnvironment];
//3. 注冊自定義的組件和模型(可選) [如果有就注冊如果沒有就不注冊]
//register custom module and component戴卜，optional
//[WXSDKEngine registerComponent:@"YourView" withClass:[MyViewComponent class]];
//[WXSDKEngine registerModule:@"YourModule" withClass:[YourModule class]];
//4. 注冊協(xié)議的實現(xiàn),可選
//[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
//5. 設(shè)置日志的級別(默認的日志級別是Info)
[WXLog setLogLevel:WXLogLevelDebug];
#endif
}
注意逾条，在之前SDK中初始化WeexSDK環(huán)境，方法名為initSDKEnviroment投剥，這是Weex團隊拼寫錯誤师脂，后來廢棄，替換成initSDKEnvironment江锨。學(xué)好英語真的很重要??
3吃警、渲染 weex Instance
weex支持兩種渲染模式，一種是整個界面啄育，一種是界面某一部分酌心。你需要給需要渲染的weex視圖指定特定的URL，然后把它添加到父控件中挑豌。在實際開發(fā)中全頁面渲染更有意義安券，前面創(chuàng)建的PFWeexViewController就是繼承于UIViewController墩崩。PFWeexViewController作為基礎(chǔ)頁面，需要考慮各種交互：比如手勢返回等侯勉，在此不做深入延伸鹦筹。
4、銷毀 Weex Instance
在 viewController 的 dealloc 階段 銷毀掉 Weex instance址貌，釋放內(nèi)存铐拐，避免造成內(nèi)存泄露。
- (void)dealloc {
[_instance destroyInstance];
}
WeexSDK iOS APIs
開始研究WeexSDK for iOS练对，當(dāng)然官方文檔先學(xué)習(xí)一下遍蟋。對于Weex的使用，就是針對具體的業(yè)務(wù)場景實現(xiàn)Handler螟凭、Module匿值、Component。
1赂摆、概念
Handler：
我們可以把Weex看做是一個提供了基礎(chǔ)套件的UI渲染庫挟憔。核心功能還是需要開發(fā)者自己來實現(xiàn)，比如：圖片下載邏輯烟号、網(wǎng)絡(luò)請求绊谭、導(dǎo)航跳轉(zhuǎn)等等。
例如圖片下載：
[WXSDKEngine registerHandler:[CNCWeexImageLoaderImplement new] withProtocol:@protocol(WXImgLoaderProtocol)];Module：
Module可以理解為JS端需要調(diào)用native才能處理的邏輯汪拥，并且在JS<->native進行交互达传。這么說有點抽象，舉個具體的例子：比如在JS端想訪問native端的數(shù)據(jù)庫（coredata迫筑、realm等）宪赶，就需要實現(xiàn)一個module來滿足JS調(diào)用native寫好的module以實現(xiàn)native的邏輯。
例如網(wǎng)絡(luò)請求與導(dǎo)航跳轉(zhuǎn)：
[WXSDKEngine registerModule:@"urlRoute" withClass:[CNCWeexURLRouteModule class]];
[WXSDKEngine registerModule:@"networkRequest" withClass:[CNCWeexURLRouteModule class]];Component：
在JS滿足不了或者實現(xiàn)成本很高的時候脯燃，則可以在native端實現(xiàn)Component供JS調(diào)用搂妻。
例如：自定義通知事件，用于 native 自定義部分和 js 進行實踐通知辕棚，比如傳遞下拉事件到 js欲主，這個是在 component 基類的方法，可以直接使用
再如：要實現(xiàn)一個跑馬燈UI的效果逝嚎，在native端實現(xiàn)扁瓢，并且注冊到JS。JS端調(diào)用补君，即可展示出跑馬燈引几。
2、native與js交互
-
native發(fā)送通知到j(luò)s:
/**
* @abstract Fire an event to the component and tell Javascript which value has been changed.
* @param eventName 事件名稱挽铁，可以在weex文件某個標(biāo)簽組件監(jiān)聽伟桅，命名規(guī)范為 onXXX
* @param params 數(shù)據(jù)
* @param domChanges 發(fā)生改變的數(shù)據(jù)
**/
- (void)fireEvent:(NSString *)eventName params:(NSDictionary *)params domChanges:(NSDictionary *)domChanges
-
js回調(diào)結(jié)果給native
多用于 Module 回調(diào)結(jié)果給 js硅堆，回調(diào)類型分為下面兩種：
WXModuleCallback 為了性能考慮，該回調(diào)只能回調(diào)通知js一次贿讹，之后會被釋放渐逃，多用于一次結(jié)果
WXModuleKeepAliveCallback 該回調(diào)可以設(shè)置是否為多次回調(diào)類型，多次回調(diào)的場景如持續(xù)監(jiān)聽位置的變化民褂，并返回給 js茄菊。
@implementation WXEchoModule
@synthesize weexInstance; // 讓該module 獲得當(dāng)前instance
WX_EXPORT_METHOD(@selector(echo:))
- (void)echo:(NSString *)param callback:(WXModuleKeepAliveCallback)callback
{
callback(param,ture);// 此處設(shè)置true，該回調(diào)function 可以多次回調(diào)執(zhí)行赊堪，可以寫循環(huán)測試.
}
3面殖、weex iOS SDK
WXImgLoaderDefaultImpl
圖片下載 handler。Weex 會把需要設(shè)置圖片的 View 和 URL 透露出來哭廉，Native 端需要實現(xiàn)這個接口進行圖片下載脊僚。WeexSDK kernel 本身沒有提供圖片下載的默認實現(xiàn)。
WXAppConfiguration
是一個用來記錄App配置信息的單例對象
WXSDKEngine
初始化SDK遵绰，具體有四個步驟：
1辽幌、WXMonitor
- WXMonitor監(jiān)視器記錄狀態(tài)
- WXMonitor是一個普通的對象，里面只存儲了一個線程安全的字典WXThreadSafeMutableDictionary椿访。
- WXMonitor在整個Weex里面擔(dān)任的職責(zé)是記錄下各個操作的tag值和記錄成功和失敗的原因乌企。
- WXMonitor封裝了各種宏來方便方法的調(diào)用。
- 加載本地的main.js
- WXSDKEngine的初始化
WXSDKEngine的初始化就是整個SDK初始化的關(guān)鍵成玫。這一步驟主要是注冊Components加酵，Modules，Handlers 和 執(zhí)行JSFramework - 模擬器WXSimulatorShortcutManager連接本地server
WXDevtool
Weex 開發(fā)了一套 Weex Devtools哭当，它與 Chrome Devtools 極為相似猪腕，學(xué)習(xí)成本很低，目前只支持在 Chrome 瀏覽器里使用钦勘。在終端輸入weex debug指令（最新版本 starter kit 添加了 npm run debug 支持）陋葡，會彈出 Weex Devtools，打開 Playground个盆，掃描 Devtools 的二維碼來啟動 Debugger脖岛。
這塊講解起來比較繁雜朵栖，需要在使用過程中摸索颊亮，餓了么講解的不錯傳送門；github上也有也經(jīng)典講解https://github.com/weexteam/article/issues/50陨溅。
GCanvas
Weex支持的屬性真的太少太少太少终惑，一不留神就可能會掉到坑了，項目中有個圓形進度條需求门扇，用客戶端分分鐘開發(fā)的事雹有，用Weex無法實現(xiàn)（也可能自身太菜）偿渡，后來用Vue寫出來一個，拿到Weex上依然不兼容（噴了一口老血）霸奕，后來沒辦法溜宽，采用GCanvas，雖出來效果质帅，但是毛邊嚴重适揉，但是一些基礎(chǔ)繪圖還是支持不錯。
