• 集成 Devtools 到 iOS
    • iOS 应用接入
      • 添加依赖
        • 方法一：cocoapods 依赖
        • 方法二：github 源码依赖
      • 集成功能
        • 附加页面刷新功能
    • 使用

    集成 Devtools 到 iOS

    Weex Devtools 能够方便调试 Weex 页面，但此功能离不开 Native 的支持。如何让你的 App 也集成 Devtools，在本章将会详细说明 iOS 端如何接入 Weex Devtools。

    iOS 应用接入

    添加依赖

    方法一：cocoapods 依赖

    在工程目录的 podfile 添加如下代码

    1. source https://github.com/CocoaPods/Specs.git，
    2. pod  'WXDevtool',   '0.7.0', :configurations => ['Debug']，

    目前有如下几个版本：

    0.7.0, 0.6.1, 0.1.1, 0.1.0 [master repo]

    可以通过更新本地 podspec repo，pod search 来查询最新版本，在 podfile 文件添加依赖。

    推荐在DEBUG模式下依赖。

    方法二：github 源码依赖

    1. 拉取最新的WXDevtool代码。

    2. 按照如下图示：直接拖动source目录源文件到目标工程中

      drag

    3. 按照红框中配置勾选

      _

    在相对较大的互联网 App 研发中, framework 静态库被广泛应用，所以推荐使用方法一接入。

    集成功能

    如果按照方法一接入：podfile 的方式，添加头文件包含：

    1. #import <TBWXDevtool/WXDevtool.h>

    如果按照方法二接入：源码依赖的方式，添加头文件包含：

    1. #import "WXDevtool.h"

    查看 WXDevtool 头文件如下：

    1. #import <Foundation/Foundation.h>
    3. @interface WXDevTool : NSObject
    4. /**
    5. *  set debug status
    6. *  @param isDebug  : YES:open debug model and inspect model;
    7. *                    default is NO,if isDebug is NO, open inspect only;
    8. * */
    9. + (void)setDebug:(BOOL)isDebug;
    12. /**
    13. *  get debug status
    14. * */
    15. + (BOOL)isDebug;
    18. /**
    19. *  launch weex debug
    20. *  @param url  : ws://ip:port/debugProxy/native, ip and port is your devtool server address
    21. * eg:@"ws://30.30.29.242:8088/debugProxy/native"
    22. * */
    23. + (void)launchDevToolDebugWithUrl:(NSString *)url;
    25. @end

    setDebug：参数为 YES 时，直接开启 debug 模式，反之关闭，使用场景如下所述

    在你自己的程序中添加如下代码：

    1. [WXDevTool launchDevToolDebugWithUrl:@"ws://30.30.31.7:8088/debugProxy/native"];

    其中的 ws 地址正是 Weex debug 控制台中出现的地址，直接 copy 到 launchDevToolDebugWithUrl 接口中。

    如果程序一启动就开启 Weex 调试，需要在 WeexSDK 引擎初始化之前添加代码：

    1. [WXDevTool setDebug:YES];
    2. [WXDevTool launchDevToolDebugWithUrl:@"ws://30.30.31.7:8088/debugProxy/native"];

    附加页面刷新功能

    • 为什么需要页面刷新功能？

      如下图所示，当点击 debugger 按钮时，js 的运行环境会从手机端（JavaScriptCore）切换到 Chrome（V8），这时需要重新初始化 Weex 环境，重新渲染页面。页面渲染是需要接入方在自己的页面添加。

      _debug

    • 什么场景下需要添加页面刷新功能?

      • 点击 debugger 按钮调试
      • 切换 RemoteDebug 开关
      • 刷新 Chrome 页面（command+R）

    • 如何添加刷新

      在 Weex 页面初始化或 viewDidLoad 方法时添加注册通知，举例如下：

      1. [[NSNotificationCenter defaultCenter] addObserver:self selector:notificationRefreshInstance: name:@"RefreshInstance" object:nil];

      最后千万记得在 dealloc 方法中取消通知，如下所示

      1. - (void)dealloc
      2. {
      3.     [[NSNotificationCenter defaultCenter] removeObserver:self];
      4. }

      页面刷新实现，先销毁当前 instance，然后重新创建 instance，举例如下:

      1.  - (void)render
      2.   {
      3.     CGFloat width = self.view.frame.size.width;
      4.     [_instance destroyInstance];
      5.     _instance = [[WXSDKInstance alloc] init];
      6.     _instance.viewController = self;
      7.     _instance.frame = CGRectMake(self.view.frame.size.width-width, 0, width, _weexHeight);
      9.     __weak typeof(self) weakSelf = self;
      10.     _instance.onCreate = ^(UIView *view) {
      11.         [weakSelf.weexView removeFromSuperview];
      12.         weakSelf.weexView = view;
      13.         [weakSelf.view addSubview:weakSelf.weexView];
      14.         UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification,  weakSelf.weexView);
      15.     };
      16.     _instance.onFailed = ^(NSError *error) {
      18.     };
      20.     _instance.renderFinish = ^(UIView *view) {
      21.         [weakSelf updateInstanceState:WeexInstanceAppear];
      22.     };
      24.     _instance.updateFinish = ^(UIView *view) {
      25.     };
      26.     if (!self.url) {
      27.         return;
      28.     }
      29.     NSURL *URL = [self testURL: [self.url absoluteString]];
      30.     NSString *randomURL = [NSString stringWithFormat:@"%@?random=%d",URL.absoluteString,arc4random()];
      31.     [_instance renderWithURL:[NSURL URLWithString:randomURL] options:@{@"bundleUrl":URL.absoluteString} data:nil];
      32. }

    具体实现可参考 playground WXDemoViewController.m 文件

    说明：目前版本需要注册的通知名称为固定的 “RefreshInstance”，下个版本会添加用户自定义 name 。

    使用

    如果未安装 Debugger Server，在命令行执行 npm install -g weex-toolkit 既可以安装调试服务器，运行命令 weex debug 就会启动 DebugServer 并打开一个调试页面（详情请查看 《Get started》）。页面下方会展示一个二维码，这个二维码用于向 App 传递 Server 端的地址建立连接。

    1. 日志级别控制

      _
      日志级别可以控制native端关于weex的日志。

      日记级别描述如下：

      1. Off       = 0,
      2. Error     = Error
      3. Warning   = Error | Warning,
      4. Info      = Warning | Info,
      5. Log       = Log | Info,
      6. Debug     = Log | Debug,
      7. All       = NSUIntegerMax

      解释：off 关闭日志，Warning 包含 Error、Warning，Info 包含 Warning、Info，Log 包含 Info、Log，Debug 包含 Log、Debug，All 包含所有。

    2. Vdom/Native tree选择

      集成 Devtools 到 iOS - 图5

      图一

      图二

      图二

      点击图一所示native选项会打开图二，方便查看native tree以及view property

      vdom

      图三

      vdom_tree

      图四

      点击图三所示 vdom 选项会打开图四，方便查看 vdom tree 以及 component property。