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

版权声明:本文为博主原创文章,未经博主允许不得转载。转载请Email我....... https://blog.csdn.net/Deft_MKJing/article/details/80397305

前言

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

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

JS中的async和await

Vue中的Slot用法介绍

介绍

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

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

类型React NativeWeex
性能较好较弱
上手难度稍高容易
核心理念ReactVue
框架程度较重较轻
特点适合开发整体App适合单页面
社区丰富,Facebook维护残念,托管apache
支持Android、IOSAndroid、IOS、Web
适应性原生开学习成本低Web开发学习成本低
JS引擎V8JSCore
首先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嵌入已有应用实践(三)

展开阅读全文

没有更多推荐了,返回首页