Weex iOS端的自动刷新和调试

Weex iOS端的自动刷新和调试

大家好,又见面了,我是全栈君。

最近开始接触weex。目前weex尚不成熟,官方文档有些粗糙,初学者难免碰壁。这里分享两条我的初学经验,供参考。

自动刷新

Weex有一个网页版的预览工具,提供了修改代码后自动刷新页面的功能。然而作为移动端开发,网页版工具显然不够,我们需要在模拟器或者真实设备中开发和调试。

原理

监控代码的变化,并通知hot-reload服务器。iOS代码中需要监听来自服务器的通知并重新加载界面。

不难发现,weex脚手架为我们创建的工程中,已经包含了相关的实现:

NSString * hotReloadURL = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"WXSocketConnectionURL"];
_hotReloadSocket = [[SRWebSocket alloc] initWithURL:[NSURL URLWithString:hotReloadURL]];
_hotReloadSocket.delegate = self;
[_hotReloadSocket open];

探索

我先用npm start启动网页预览,然后将info.plist中socket服务器的地址改为自己的ip再编译运行项目。结果是不能自动刷新,socket代理也没有被触发。可能是地址不对!可是文档里没告诉我们如何获取正确的地址。

灵机一动,网页版能够自动刷新,那么我们可以通过Chrome的开发者工具监听socket请求。打开开发者工具,选中Network标签,设置filter为WS,然后修改js代码。果然监听到WS请求:

Chrome网络监听

Chrome网络监听

地址有些奇怪。查看socket代理,发现不是我们想要的数据格式。好讨厌的感觉啊~

- (void)webSocket:(SRWebSocket *)webSocket didReceiveMessage:(id)message {
    if ([@"refresh" isEqualToString:message]) {
        [self render];
    }
    @try {
        NSDictionary * messageDic = [WXUtility objectFromJSON:message];
        NSString *method = messageDic[@"method"];
        if ([method hasPrefix:@"WXReload"]) {
            if ([method isEqualToString:@"WXReloadBundle"] && messageDic[@"params"]) {
                self.url = [NSURL URLWithString:messageDic[@"params"]];
            }
            [self render];
        }
       
    } @catch(NSError * error) {}
}

于是便请求度娘的帮助。有前辈的教程中提到,需要用weex命令+入口文件名的方式启动项目,于是照猫画虎:weex dist/index.js
系统报错并提示了正确的用法,看来教程稍微有些陈旧啦。应该这样:weex preview dist/index.js。执行命令后自动打开了一个预览网页,和之前的页面有些大同小异。

打开开发者工具:

Chrome网络监听

用这个地址替换项目中的地址,模拟器可以自动刷新了!

调试

Weex官方文档告诉我们可以通过weex debug命令和Chrome来调试项目,很好很强大。于是我根据文档的说明集成了WXDevtoolsdk,并添加如下代码:

[WXDevTool setDebug:YES];
[WXDevTool launchDevToolDebugWithUrl:@"ws://127.0.0.1:8089/debugProxy/native"];

执行weex debug命令,成功后弹出一个网页:

调试页面

此时编译运行项目,发现不能正常调试,模拟器展示了一个大白屏。既然给我们一个二维码,说明调试地址一定藏在二维码中。但我不想因此实现一个二维码扫描的功能,所以我借助了微信,然后在浏览器打开。原来地址是这样的:ws://127.0.0.1:8089/debugProxy/native/8e2ea364-e514-45a1-a022-363c793d048a(我用127.0.0.1代替了真实的ip)。

修改代码后,可以调试了!不过地址后的字符串8e2ea364-e514-45a1-a022-363c793d048a在重启调试服务器后会变,有些坑,还是集成一个扫一扫吧~

感受

Weex是国人开源的跨平台框架,前途可量。和ReactNative相比,目前weex在开发调试方面的便利性比较差,而且缺乏一篇融会贯通的基础教程。让我这个“老司机”也折腾了一番,何况一个跨平台新手!希望以后能够改进吧。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107700.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • django restful API 代码自动生成_阿里restful接口规范

    django restful API 代码自动生成_阿里restful接口规范restful接口规范什么是接口规范?接口规范就是为了采用不同的后台语言,也能使用同样的接口获取到同样的数据。如何写接口:接口规范是规范化书写接口的,写接口要写url、响应数据​注:如果将请求参

  • 无法定位程序输入点 zend_empty_string php7.dll

    无法定位程序输入点 zend_empty_string php7.dll

  • Mac连接不上无线网络的解决方法「建议收藏」

    Mac连接不上无线网络的解决方法「建议收藏」Mac电脑突然连不上WiFi了怎么办?小编使用了这么久的Mac,这种情况也是出现过很多次的,这个问题如果不是因为苹果无线网硬件出现了故障,基本都能通过排除法来解决问题,主要解决思路是从路由器过热造成网络阻塞,IP地址冲突、系统bug导致等这些方面入手,下面小编给大家介绍一下详细的解决方法,需要的小伙伴看过来!第一步、重启Mac无线网卡点击桌面顶部无线网络图标,下拉菜单中点击“关闭Wi-Fi”,然后再使用同样方法,下拉菜当中点击“Wi-Fi:打开”,重新启动无线网卡。第二步、重启路由器过长时间开着路

  • 《手把手教你学DSP-基于TMS320F28335》书中的错误

    《手把手教你学DSP-基于TMS320F28335》书中的错误1.在书的345页,这种字符串写法是错误的,char*msg。2.估计张卿杰可能是个学着。书的风格感觉就是翻译的PDF文档。转载于:https://www.cnblogs.com/429512065qhq/p/9686253.html…

  • java中如何进行异常处理_java检查时异常

    java中如何进行异常处理_java检查时异常运行时异常是Java编程语言所有异常的父类,这些异常在发生时会崩溃或崩溃,可能会破坏程序或应用程序。与不被视为运行时异常的异常不同,永远不会检查运行时异常。“运行时异常”通常显示程序员的错误,而不是预期程序要处理的条件。当无法发生的情况时,也会使用运行时异常。应该注意的是,当程序内存不足时,将引发程序错误,而不是将其显示为运行时异常。最常见的运行时异常为NullPointerException,A…

  • 国外大容量网盘_百度云网盘高速下载

    国外大容量网盘_百度云网盘高速下载之前在《Mac端软件下载站》这篇文章中有提到:一些网站是采用的国外收费网盘,比如:UsersCloud、ClickUpload、Turbobit、Nitroflare、Rapidgator、Uploaded…这类收费网站就和国内的城通网盘一个模样(应该或多或少大家都有下载过城通网盘上的文件吧),差不多都是下面这种模样????????‍♂️:限制2个小时内只能下载一次限制单线程下载限速到几十KB/s不支持文件续传但其实很多国外软件在谷歌上只能找到这种网盘上的资源,那怎么下载呢?▍1Mi

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号