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的运行效果吧!

新闻列表

Weex学习之旅——hot reload_第1张图片

新闻详情

Weex学习之旅——hot reload_第2张图片

日记列表

Weex学习之旅——hot reload_第3张图片

写日记

Weex学习之旅——hot reload_第4张图片

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

项目源码

你可能感兴趣的:(Weex学习之旅——hot reload)