本文講述iOS項目集成WeexSDK、WXDevtool、GCanvas等；也將介紹native如何與Weex通訊
iOS項目集成WeexSDK
在iOS工程中集成FrameWork無外乎兩種，第一，項目支持cocoaPods，采用cocoaPods 集成 Weex iOS SDK到你的項目；第二，源碼集成，優(yōu)勢在于可以修改WeexSDK，打包生成你自己定制的Weex SDK。
兩種方式官網(wǎng)都提供了參考，雖然有些亂七八糟。
前期只是為了學習，沒有深入學習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導入完成。
iOS工程使用WeexSDK
為了便于擴展，我創(chuàng)建了一個PFWeexDefine存放Weex的宏；創(chuàng)建了PFWeexManager文件管理Weex；PFWeexViewController作為Weex頁面容器。
1、在PFWeexDefine中導入框架頭文件
#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 設置組織
[WXAppConfiguration setAppGroup:@"PFWeex"];
//1.2 設置App的名稱
[WXAppConfiguration setAppName:@"WeexStudyDemo"];
//1.3 設置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. 設置日志的級別(默認的日志級別是Info)
[WXLog setLogLevel:WXLogLevelDebug];
#endif
}
注意，在之前SDK中初始化WeexSDK環(huán)境，方法名為initSDKEnviroment，這是Weex團隊拼寫錯誤，后來廢棄，替換成initSDKEnvironment。學好英語真的很重要??
3、渲染 weex Instance
weex支持兩種渲染模式，一種是整個界面，一種是界面某一部分。你需要給需要渲染的weex視圖指定特定的URL，然后把它添加到父控件中。在實際開發(fā)中全頁面渲染更有意義，前面創(chuàng)建的PFWeexViewController就是繼承于UIViewController。PFWeexViewController作為基礎頁面，需要考慮各種交互：比如手勢返回等，在此不做深入延伸。
4、銷毀 Weex Instance
在 viewController 的 dealloc 階段 銷毀掉 Weex instance，釋放內(nèi)存，避免造成內(nèi)存泄露。
- (void)dealloc {
[_instance destroyInstance];
}
WeexSDK iOS APIs
開始研究WeexSDK for iOS，當然官方文檔先學習一下。對于Weex的使用，就是針對具體的業(yè)務場景實現(xiàn)Handler、Module、Component。
1、概念
Handler：
我們可以把Weex看做是一個提供了基礎套件的UI渲染庫。核心功能還是需要開發(fā)者自己來實現(xiàn)，比如：圖片下載邏輯、網(wǎng)絡請求、導航跳轉(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)絡請求與導航跳轉(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ā)送通知到js:
/**
* @abstract Fire an event to the component and tell Javascript which value has been changed.
* @param eventName 事件名稱，可以在weex文件某個標簽組件監(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)可以設置是否為多次回調(diào)類型，多次回調(diào)的場景如持續(xù)監(jiān)聽位置的變化，并返回給 js。
@implementation WXEchoModule
@synthesize weexInstance; // 讓該module 獲得當前instance
WX_EXPORT_METHOD(@selector(echo:))
- (void)echo:(NSString *)param callback:(WXModuleKeepAliveCallback)callback
{
callback(param,ture);// 此處設置true，該回調(diào)function 可以多次回調(diào)執(zhí)行，可以寫循環(huán)測試.
}
3、weex iOS SDK
WXImgLoaderDefaultImpl
圖片下載 handler。Weex 會把需要設置圖片的 View 和 URL 透露出來，Native 端需要實現(xiàn)這個接口進行圖片下載。WeexSDK kernel 本身沒有提供圖片下載的默認實現(xiàn)。
WXAppConfiguration
是一個用來記錄App配置信息的單例對象
WXSDKEngine
初始化SDK，具體有四個步驟：
1、WXMonitor
- WXMonitor監(jiān)視器記錄狀態(tài)
- WXMonitor是一個普通的對象，里面只存儲了一個線程安全的字典WXThreadSafeMutableDictionary。
- WXMonitor在整個Weex里面擔任的職責是記錄下各個操作的tag值和記錄成功和失敗的原因。
- WXMonitor封裝了各種宏來方便方法的調(diào)用。
- 加載本地的main.js
- WXSDKEngine的初始化
WXSDKEngine的初始化就是整個SDK初始化的關鍵。這一步驟主要是注冊Components，Modules，Handlers 和 執(zhí)行JSFramework - 模擬器WXSimulatorShortcutManager連接本地server
WXDevtool
Weex 開發(fā)了一套 Weex Devtools，它與 Chrome Devtools 極為相似，學習成本很低，目前只支持在 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，雖出來效果，但是毛邊嚴重，但是一些基礎繪圖還是支持不錯。
