前言

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

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

JS中的async和await

Vue中的Slot用法介绍

介绍

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

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

安装开发环境

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嵌入已有应用实践（三）