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 |
安装开发环境
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 -gmintoudeMacBook-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 iosweex 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 '[email protected]/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嵌入已有应用实践（三）