一：写在前面
用过RN的都知道，RN有HotReload技术。而且修改一下RCTSocket.m（具体什么文件忘记了）文件中的localhost地址即可实现。但是Weex官方文档中并没有提及Weex 热加载的技术。是不是并不能实现呢？答案是否定的。在我翻阅了很多过时的陈旧的资料，以及Weexdemo后发现，weex也是可以实现热加载的。不知道是不是叫做hot reload，还是说只有RN的才是hot reload。我们暂时叫做实时更新吧。严谨一些。
二：什么是Hot reload？以及实现原理。
这里借鉴React Native 热加载（Hot Reload）原理简介 ，不知道weex的实时更新是否使用的和RN同样的技术。
warning:这一点埋个坑，以后来补。
三：Weex的实时更新实现
3.1 需求
我们要使用Weex在原有项目实现部分界面，但是总是拿手机去扫码感觉很low，为什么不能像RN一样，修改了js文件，界面直接在真机刷新呢？但是官方并没有提供相关的技术支持（也可能是我没找到）。简而言之，今天要把weex的实时加载（RN的hot reload）这个功能开启一下，分享给大家。这方法比较笨。如果有更好的办法，希望下方留言。谢谢。
3.2 过程
3.2.1 前期准备
首先，要有一个集成了weex项目的iOS 项目，具体的搭建流程可以参考这篇文章First:WEEX环境搭建+iOS现有项目集成;
3.2.2 过程
前面有很多过程，就不细谈了，大家都比较关心如何开启实时刷新，那就直接上干货。
前提：手机和电脑在同一个局域网内。
- 1.首先我们需要在pod中集成SRWebSocket，这个是为了加一个监听，监听文件的修改，并发送文件修改时的通知。在pod中复制以下代码.
pod 'SocketRocket', '0.4.2'
- 2.然后我们需要在Viewcontroller中导入SocketRocket的库，并导入代理方法。端口我发现都是8082，weexdemo中写的也是8082，代码如下
- (void)openHotReload{
NSURL *socketURL = [NSURL URLWithString:[NSString stringWithFormat:@"ws://%@:%@", /*后面会说这个ip地址的由来*/, @"8082"]];
self.hotReloadSocket = [[SRWebSocket alloc] initWithURL:socketURL protocols:@[@"echo-protocol"]];
self.hotReloadSocket.delegate = self;
[self.hotReloadSocket open];
}
- 3.实现SocketRocket的代理方法
- (void)webSocket:(SRWebSocket *)webSocket didReceiveMessage:(id)message{
if ([@"refresh" isEqualToString:message]) {
[self initWeexView];//这里是要自己初始化的weexview，下面给一个简单的weexview的实现
}
}
- (void)initWeexView{
_instance = [[WXSDKInstance alloc]init];
_instance.viewController = self;
_instance.frame = self.view.bounds;
__weak typeof(self) weakSelf = self;
_instance.onCreate = ^(UIView *view) {
[weakSelf.weexView removeFromSuperview];
weakSelf.weexView = view;
[weakSelf.view addSubview:weakSelf.weexView];
};
_instance.onFailed = ^(NSError *error) {
//process failure
};
_instance.renderFinish = ^ (UIView *view) {
};
;
//实时刷新，注意这个地方的后面的dist/App.weex.js，是你的vue文件的路径和名字。
[_instance renderWithURL:[NSURL URLWithString:@"http:///*这个地址后面会说*//dist/App.weex.js"] options:nil data:nil];
}
- 4.实现hot reload，我们需要一个ip地址。
1. 首先cd到你自己写的vue文件。
2. 在终端输入 weex preview /*你的vue文件*/
这时会看到弹出一个浏览器。
3.这个浏览器前面的ip地址就是我们需要的ip地址。那么文件的路径是什么呢？点击那个大的二维码，看一下url，里面有文件路径。
5.替换上面提到的路径以及ip地址。
6.运行程序。随便修改vue文件，command+s保存一下，不出意外手机就会跟着刷新了。
四： 踩坑
4.1 IP地址
1.要同一个局域网下。
2.如果实在不知道路径，可以点一下那个大大的二维码，上面的URL就是本地编译的jsbundle文件路径。
3.websocket监听的是8082端口。render的是8081。别搞错。
修正：这里的监听的端口是会变化的。不一定是8082，8081。render的端口就在URL中，监听的端口比较隐蔽。我有必要说一下如何确定监听端口。
还记的之前输入weex preview ..vue那个命令行么？
会弹出一个页面，我们用chrome，进入调试界面。
我们点击NetWork，在header中可以找到类似于
Request URL: ws://192.168.10.238:8083/这样的东西。
后面的8083就是socket监听的端口。
五：预告
下一章节:JS与Native的交互--iOS篇
我是二毛，一个集智慧和逗比于一身的iOSer
