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

新闻列表

新闻详情

日记列表

写日记

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

项目源码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,776评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,527评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,361评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,430评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,511评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,544评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,561评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,315评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,763评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,070评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,235评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,911评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,554评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,173评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,424评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,106评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,103评论 2 352

推荐阅读更多精彩内容