Weex iOS端的自动刷新和调试

2019年9月25日 112次阅读 来源: 三豊

最近开始接触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请求：

《Weex iOS端的自动刷新和调试》

《Weex iOS端的自动刷新和调试》

地址有些奇怪。查看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。执行命令后自动打开了一个预览网页，和之前的页面有些大同小异。

打开开发者工具：

《Weex iOS端的自动刷新和调试》

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

调试

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

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

执行weex debug命令，成功后弹出一个网页：

《Weex iOS端的自动刷新和调试》

此时编译运行项目，发现不能正常调试，模拟器展示了一个大白屏。既然给我们一个二维码，说明调试地址一定藏在二维码中。但我不想因此实现一个二维码扫描的功能，所以我借助了微信，然后在浏览器打开。原来地址是这样的：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在开发调试方面的便利性比较差，而且缺乏一篇融会贯通的基础教程。让我这个“老司机”也折腾了一番，何况一个跨平台新手！希望以后能够改进吧。

    原文作者：三豊
    原文地址: https://segmentfault.com/a/1190000013342677
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞