零基础学习weex（四）iOS集成WeexSDK

本文讲述iOS项目集成WeexSDK、WXDevtool、GCanvas等；也将介绍native如何与Weex通讯

iOS项目集成WeexSDK

在iOS工程中集成FrameWork无外乎两种，第一，项目支持cocoaPods，采用cocoaPods 集成 Weex iOS SDK到你的项目；第二，源码集成，优势在于可以修改WeexSDK，打包生成你自己定制的Weex SDK。 两种方式官网都提供了参考，虽然有些乱七八糟。

• cocoaPods集成
• 源码集成

前期只是为了学习，没有深入学习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封装了各种宏来方便方法的调用。

1. 加载本地的main.js
2. WXSDKEngine的初始化 WXSDKEngine的初始化就是整个SDK初始化的关键。这一步骤主要是注册Components，Modules，Handlers 和 执行JSFramework
3. 模拟器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，虽出来效果，但是毛边严重，但是一些基础绘图还是支持不错。