iOS开发之Weex爬坑之路环境部署和Devtools Debug（一）

前言

不多说，直接开始Weex，算是记录这段时间对新技术的学习积累。期间看了很多Vue.js和Node.js的基础，顺便捋了以下CSS的flex-box布局等等前端的知识，太多了太杂了，还是用笔记记录下。直接从官方介绍，开始

补充一个传送门：和文章没什么关系

JS中的async和await

Vue中的Slot用法介绍

介绍

启动环境，搭建第一个Demo，按照官方的来

同为跨平台解决方案，咱们先看下和RN的对比，由于国内淘宝搞的轻量级，所以我们还是先爬爬Weex坑

类型	React Native	Weex
性能	较好	较弱
上手难度	稍高	容易
核心理念	React	Vue
框架程度	较重	较轻
特点	适合开发整体App	适合单页面
社区	丰富，Facebook维护	残念，托管apache
支持	Android、IOS	Android、IOS、Web
适应性	原生开学习成本低	Web开发学习成本低
JS引擎	V8	JSCore

首先Weex是支持Vue.js框架，可以看一遍官方Vue文档，就可以开始撸了 Vue.js

由于是单页面应用，因此Vue-router了解下  Vue-router

再看下JS和HTML和CSS的基础，就可以搞一下简单的了

安装开发环境

1.安装Node 

可以用HomeBrew或者直接下载https://nodejs.org/en/download/ 很简单，安装好如下即可

mintoudeMacBook-Pro:~ mintou$ node -v
v8.11.1
mintoudeMacBook-Pro:~ mintou$ npm -v
4.6.1
mintoudeMacBook-Pro:~ mintou$ 

2.安装weex-toolkit

npm install weex-toolkit -g

mintoudeMacBook-Pro:~ mintou$ weex -v
   v1.3.5
 - weexpack : v1.2.3
 - weex-debugger : v1.0.12
 - weex-builder : v0.4.0
 - weex-previewer : v1.5.1

这条命令会向你命令行环境中注册一个 weex 命令。

3.创建项目

weex create awesome-app

这里会有很多提示，什么标题啊，作者啊，描述啊啥的，主要你如果简单的跑起来，可以都选择默认值，如果你要做点事，那就吧vue-router给安装了，后面的单元测试可以暂时不选。

网络好也就几分钟的事，然后就可以开发了

4.进入项目，安装依赖，预览

cd awesome-app
npm install
npm start

然后工具会启动一个本地的 web 服务，监听 8081 端口。你可以打开 http://localhost:8081查看页面在 Web 下的渲染效果。 源代码在 src/ 目录中，你可以像一个普通的 Vue.js 项目一样来开发.

这里按照官方的来，基本可以看到第一个网页的效果

5.运行到iOS项目

weex platform add ios

weex run ios

这两句帮我们编译好了jsbundle，然后顺便把原生项目的cocoapods都给带起来了，直接选择模拟器就跑起来了，如果你是自己编译好而已，那么可以自己pod install也行，文件目录如下，cd到ios目录就好

也就一杯茶的时间，项目就能跑起来了，如果看过Vuejs的话入口和文件目录改改就知道如何操作了，这里就不多说这些了，很简单，下面隆重介绍一下如果debug方式来调试。为什么测试这个模块，是因为，网上有几个项目（本来用的人就少，所以要珍惜几个项目）都没配置web端，只是配置了移动端启动，因此，你启动web服务是看不到任何东西的，但是你直接跑起来你的App，你压根看不到你的js和页面是不是出问题了，哪里出问题了都不知道？因此，我们试着用一下Debug模式

可以先看下官方介绍weektoolkit基本介绍，后面我会结合我遇到的场景分析

集成Devtools到iOS，通过App的服务来Debug

这里注意的是不是普通的Vue.js开启的Web页面调试，而是通过Devtools启动模拟器之后进行和Web关联的调试，怎么说呢？就是如果你没有配置Web环境，你Weex写的代码无法在Web预览，就很扯淡，你借助这个工具，开启App的同时，连接到对应的Web服务，然后进行js代码编写，保存之后就能实时同步多端

根据上面的介绍，你的项目基本框架已经跑起来了，你在你的pod文件下加上，或者直接copy走我这个

source 'git@github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
#inhibit_all_warnings!

def common
    pod  'WXDevtool', '0.15.3', :configurations => ['Debug']
	pod 'WeexSDK'
    pod 'WeexPluginLoader'
    pod 'SDWebImage', '3.7.5'
    pod 'SocketRocket', '0.4.2'
end

target 'WeexDemo' do
    common
end

target 'WeexUITestDemo' do
    common
end

安装好之后，我们用终端到路径下，执行

weex debug 

你就能看到一个带二维码的网页 

1.方案一（官方Demo可以扫一下即可Debug）

第一个方式是和官方Demo点击打开链接下载下来一样，弄一个扫二维码的页面，然后你在你的项目中扫描这个二维码，你的App和网页上都会出现同步，你可以看到所有的结构和Debug信息

2.方案二，你不想弄一个页面，你可以按照我这个思路搞一下也行

第一，你看下官方介绍

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

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

我是这么理解的，反正当时看这个得知道为什么写这个？

因此，看了下官方Demo里面扫一扫的url拦截操作

#pragma mark Remote debug
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
- (BOOL)remoteDebug:(NSURL *)url
{
    if ([url.scheme isEqualToString:@"ws"]) {
        [WXSDKEngine connectDebugServer:url.absoluteString];
        [WXSDKEngine initSDKEnvironment];
        
        return YES;
    }
    
    NSString *query = url.query;
    for (NSString *param in [query componentsSeparatedByString:@"&"]) {
        NSArray *elts = [param componentsSeparatedByString:@"="];
        if([elts count] < 2) continue;
        if ([[elts firstObject] isEqualToString:@"_wx_debug"]) {
            [WXDebugTool setDebug:YES];
            [WXSDKEngine connectDebugServer:[[elts lastObject]  stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding]];
            if ([[[self.navigationController viewControllers] objectAtIndex:0] isKindOfClass:NSClassFromString(@"WXDemoViewController")]) {
                WXDemoViewController * vc = (WXDemoViewController*)[[self.navigationController viewControllers] objectAtIndex:0];
                [vc performSelector:NSSelectorFromString(@"loadRefreshCtl")];
                [self.navigationController popToViewController:vc animated:NO];
            }
            return YES;
        } else if ([[elts firstObject] isEqualToString:@"_wx_devtool"]) {
            NSString *devToolURL = [[elts lastObject]  stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
            [WXDevTool launchDevToolDebugWithUrl:devToolURL];
            if ([[[self.navigationController viewControllers] objectAtIndex:0] isKindOfClass:NSClassFromString(@"WXDemoViewController")]) {
                WXDemoViewController * vc = (WXDemoViewController*)[[self.navigationController viewControllers] objectAtIndex:0];
                [self.navigationController popToViewController:vc animated:NO];
            }
            
            return YES;
        }
    }
    
    return NO;
}

可以通过断点得到，这里else if里面的url最后传进去的样式，这就不贴出来了，就是下面那张gif顶部的样式，经过操作，我们只需要拿到最后的channelld拼接到对应的url上

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.window.backgroundColor = [UIColor whiteColor];
    
    [WXDevTool setDebug:YES];
    [WXDevTool launchDevToolDebugWithUrl:@"ws://192.168.1.47:8088/debugProxy/native/d4b322b3-d97e-47f1-935e-b50084fbf4a6"];
    
    [WeexSDKManager setup];
    
    [self.window makeKeyAndVisible];
    
    // Override point for customization after application launch.
    [self startSplashScreen];
    
    return YES;
}

方案二思路总结：

weex debug打开服务网页，出现二维码，我们点击二维码，可以在url上获取到channelld，然后在app初始化的方法里面调用链接上服务，注意这里的最后一串路径是变化的，每次同步的时候需要看一下是否是服务最新的id。

然后如果你热更新的话，最好用命令启动app

weex platform add ios
weex run ios

然后你更改你vue样式的代码，就可以不打开web服务的情况下进行App debug。

注意：

这上面的左边视图是debug窗口的，而不是weex run web跑起来的web服务，我们这里是针对无法正常配置或者跑web服务的情况下，我们如何通过App的服务来网页Debug，毕竟有些时候我也不知道为什么web服务为什么跑步起来，反正iframe就是显示不了。

中间的就是我们的App应用，右边就是代码了，我们可以进行实时更新预览了，环境部署和Debug差不多了，就可以正常写点东西了

网上针对Weex的文章很少，这也算是自己遇到的问题自己总结记录下，免得以后找都找不到

纯Weex开发框架介绍（二）

Weex嵌入已有应用实践（三）