本文讲述iOS项目集成WeexSDK、WXDevtool、GCanvas等；也将介绍native如何与Weex通讯
iOS项目集成WeexSDK
在iOS工程中集成FrameWork无外乎两种，第一，项目支持cocoaPods，采用cocoaPods 集成 Weex iOS SDK到你的项目；第二，源码集成，优势在于可以修改WeexSDK，打包生成你自己定制的Weex SDK。
两种方式官网都提供了参考，虽然有些乱七八糟。
前期只是为了学习，没有深入学习Weex SDK源码，采用cocoaPods集成，首先确保你的cocoaPods版本为较新版本。
查看WeexSDK版本，目前为0.12.0
pod search WeexSDK
创建、编辑Podfile
打开命令行，切换到你已有项目 Podfile 这个文件存在的目录，执行pod init；用文本编辑器打开Podfile文件，添加如下内容
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、安装依赖
执行 pod install，没有出现任何错误表示已经完成环境配置。
SDK导入完成。
iOS工程使用WeexSDK
为了便于扩展，我创建了一个PFWeexDefine存放Weex的宏；创建了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创建单例，管理WeexSDK，初始化Weex环境
在 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`环境
[WXSDKEngine initSDKEnvironment];
//3. 注册自定义的组件和模型(可选) [如果有就注册如果没有就不注册]
//register custom module and component，optional
//[WXSDKEngine registerComponent:@"YourView" withClass:[MyViewComponent class]];
//[WXSDKEngine registerModule:@"YourModule" withClass:[YourModule class]];
//4. 注册协议的实现,可选
//[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
//5. 设置日志的级别(默认的日志级别是Info)
[WXLog setLogLevel:WXLogLevelDebug];
#endif
}
注意，在之前SDK中初始化WeexSDK环境，方法名为initSDKEnviroment，这是Weex团队拼写错误，后来废弃，替换成initSDKEnvironment。学好英语真的很重要😂
3、渲染 weex Instance
weex支持两种渲染模式，一种是整个界面，一种是界面某一部分。你需要给需要渲染的weex视图指定特定的URL，然后把它添加到父控件中。在实际开发中全页面渲染更有意义，前面创建的PFWeexViewController就是继承于UIViewController。PFWeexViewController作为基础页面，需要考虑各种交互：比如手势返回等，在此不做深入延伸。
4、销毁 Weex Instance
在 viewController 的 dealloc 阶段 销毁掉 Weex instance，释放内存，避免造成内存泄露。
- (void)dealloc {
[_instance destroyInstance];
}
WeexSDK iOS APIs
开始研究WeexSDK for iOS，当然官方文档先学习一下。对于Weex的使用，就是针对具体的业务场景实现Handler、Module、Component。
1、概念
Handler：
我们可以把Weex看做是一个提供了基础套件的UI渲染库。核心功能还是需要开发者自己来实现，比如：图片下载逻辑、网络请求、导航跳转等等。
例如图片下载：
[WXSDKEngine registerHandler:[CNCWeexImageLoaderImplement new] withProtocol:@protocol(WXImgLoaderProtocol)];Module：
Module可以理解为JS端需要调用native才能处理的逻辑，并且在JS<->native进行交互。这么说有点抽象，举个具体的例子：比如在JS端想访问native端的数据库（coredata、realm等），就需要实现一个module来满足JS调用native写好的module以实现native的逻辑。
例如网络请求与导航跳转：
[WXSDKEngine registerModule:@"urlRoute" withClass:[CNCWeexURLRouteModule class]];
[WXSDKEngine registerModule:@"networkRequest" withClass:[CNCWeexURLRouteModule class]];Component：
在JS满足不了或者实现成本很高的时候，则可以在native端实现Component供JS调用。
例如：自定义通知事件，用于 native 自定义部分和 js 进行实践通知，比如传递下拉事件到 js，这个是在 component 基类的方法，可以直接使用
再如：要实现一个跑马灯UI的效果，在native端实现，并且注册到JS。JS端调用，即可展示出跑马灯。
2、native与js交互
-
native发送通知到js:
/**
* @abstract Fire an event to the component and tell Javascript which value has been changed.
* @param eventName 事件名称，可以在weex文件某个标签组件监听，命名规范为 onXXX
* @param params 数据
* @param domChanges 发生改变的数据
**/
- (void)fireEvent:(NSString *)eventName params:(NSDictionary *)params domChanges:(NSDictionary *)domChanges
-
js回调结果给native
多用于 Module 回调结果给 js，回调类型分为下面两种：
WXModuleCallback 为了性能考虑，该回调只能回调通知js一次，之后会被释放，多用于一次结果
WXModuleKeepAliveCallback 该回调可以设置是否为多次回调类型，多次回调的场景如持续监听位置的变化，并返回给 js。
@implementation WXEchoModule
@synthesize weexInstance; // 让该module 获得当前instance
WX_EXPORT_METHOD(@selector(echo:))
- (void)echo:(NSString *)param callback:(WXModuleKeepAliveCallback)callback
{
callback(param,ture);// 此处设置true，该回调function 可以多次回调执行，可以写循环测试.
}
3、weex iOS SDK
WXImgLoaderDefaultImpl
图片下载 handler。Weex 会把需要设置图片的 View 和 URL 透露出来，Native 端需要实现这个接口进行图片下载。WeexSDK kernel 本身没有提供图片下载的默认实现。
WXAppConfiguration
是一个用来记录App配置信息的单例对象
WXSDKEngine
初始化SDK，具体有四个步骤：
1、WXMonitor
- WXMonitor监视器记录状态
- WXMonitor是一个普通的对象，里面只存储了一个线程安全的字典WXThreadSafeMutableDictionary。
- WXMonitor在整个Weex里面担任的职责是记录下各个操作的tag值和记录成功和失败的原因。
- WXMonitor封装了各种宏来方便方法的调用。
- 加载本地的main.js
- WXSDKEngine的初始化
WXSDKEngine的初始化就是整个SDK初始化的关键。这一步骤主要是注册Components，Modules，Handlers 和 执行JSFramework - 模拟器WXSimulatorShortcutManager连接本地server
WXDevtool
Weex 开发了一套 Weex Devtools，它与 Chrome Devtools 极为相似，学习成本很低，目前只支持在 Chrome 浏览器里使用。在终端输入weex debug指令（最新版本 starter kit 添加了 npm run debug 支持），会弹出 Weex Devtools，打开 Playground，扫描 Devtools 的二维码来启动 Debugger。
这块讲解起来比较繁杂，需要在使用过程中摸索，饿了么讲解的不错传送门；github上也有也经典讲解https://github.com/weexteam/article/issues/50。
GCanvas
Weex支持的属性真的太少太少太少，一不留神就可能会掉到坑了，项目中有个圆形进度条需求，用客户端分分钟开发的事，用Weex无法实现（也可能自身太菜），后来用Vue写出来一个，拿到Weex上依然不兼容（喷了一口老血），后来没办法，采用GCanvas，虽出来效果，但是毛边严重，但是一些基础绘图还是支持不错。
