Weex学习之旅——hot reload

简介

阿里新出的weex，我一个做android的也过来凑个热闹，自己做了一个简单的demo，是一个知乎新闻+日记的APP，功能比较简单，代码也是最基本的写法和用法，初学weex的童鞋们可以参考使用学习一下。

一些童鞋在学习、调试weex的时候非常头疼，每次修改完代码之后，要么扫一下二维码，要么手动刷新一下，很耽误时间。这个demo实现了hot reload，即修改代码，保存后，app端可以直接看到效果。
大概原理，需要启动hot reload端口，即weex xxx.we命令，这个服务启动以后，java添加websocket监听命令，就可以监听到we文件的改变。文件改变的时候，重新render你已经开启的12580端口服务，就是你js打包上传到的服务，这样，就可以实现实时刷新的功能。

使用方法

1、项目地址

2、配置环境

这个大家可以从weex官网去看。weex官网

3、运行项目
首先需要：

npm install

装好node_modules之后，第一次命令如下：

npm run build

然后用studio打开playground代码，把MainActivity.java中的代码

    @Override
    protected String getHost() {
        return "10.12.65.114";
    }

中的return的string修改成你pc的ip就可以了。

把MainActivity.java中的代码

@Override
    protected String setHotRefreshUrl() {
        return "main";
    }

中return的string修改成你要调试的we文件的名字就可以了。

启动watch服务以及debug服务命令如下：

npm run dev

最新增加hot reload功能，修改完代码后，可以在android上直接看到效果。
打开命令行，进入目录src下，执行（weex后面增加的是你要调试的文件名，如果你修改了文件名，只要把下面对应的文件名修改一下就可以了）

weex main.js --qr

• 使用android studio打开playground，运行app，修改代码，就可以直接看到效果了。
• 如果更改代码没有效果，点一下app右上角的刷新按钮，也可以立即看到效果。

遇到的坑

下面这些问题就是我在做weextwo的时候遇到的问题。

1、运行调试

我这里使用的方法其实就是讲生成的js文件放到android中运行的，当然weex是支持类似RN那样，pc作为服务器将生成的bundle分发到真机上，只要修改代码，真机就可以立即看到结果。
不过weex文档有点乱，所以相关东西还没开始写，大家可以去探究探究。

2、网络请求

网络请求返回的数据格式问题，这个主要是要会weex debug，对js加断点，调试，还要主要method和created、ready是两个范围的函数（切忌不要把created方法写到method中），method是你自己要定义的方法，created和ready是weex自带的声明周期方法。
因为weex还没有很好的开发工具，所以我暂时用的webstorm，但是webstorm无法自动化we的格式，所以我当时在写第一个界面的时候就卡住了，一直没有进行我created中的方法，后面才发现，原来自己把created写到method中去了，大家一定要注意了。

3、list的坑

list的每个item点击传入一个id的时候，通过var itemid = e.target.attr.newsid来获取组件中newsid参数值，这种方式遇到一个非常非常奇葩的坑。就是如果这个组件是你自己定义的话，没法获取到，必须是要原生的组件才能获取的到，具体原因还未查明。

4、文档错误

1）webview和imageview的时候，src前面还有一个:，怪不得我开始一直检查不到问题，还有目前webview好像还不支持显示html的功能。

2）textarea和input中需要监控change和input的时候，input的写法是
oninput=“onTextAreaChange”，并不是文档中那种写法，试过，不行。

5、this的作用范围

this的范围不包括回调函数，所以如果要在回调函数中改变data中的数据，我们需要在函数中声明一个局部变量，使self=this，这个self的作用范围就在回调函数中。

6、storage问题
因为你存储或者获取的时候都是在回调函数中获取的，这是一个异步的过程，所以你不能在执行完一个函数之后，直接在下面的过程中，使用回调得到的结果，这个时候回调的结果可能还没拿到，所以下面的过程都要放到回调函数中去。这个地方坑了我老半天。

需要解决的问题

• 日记保存后并没有立马生效，需要点击退出之后重新进app才能生效，因为weex的生命周期没有像android onresume生命周期，所以我暂时还没修改。
• 长按删除，也是没有立马生效，同上原因。
• 界面没有适配（weex没有dp单位），不同分辨率 界面看起来也不同。

效果

好了，最后我们看一下，我们app的运行效果吧！

新闻列表

新闻详情

日记列表

写日记

还有上拉和下拉刷新，我没有截图下来，大家可以去试试。

项目源码