weex用于android调研总结

1.更新方式

更新方式主要有两种,

第一种,将准备和项目一起打包的js文件放置在assets文件夹下,同时增加更新js文件的逻辑和读取更新文件的逻辑,当在apk发布之后想要更新js文件时,只要走下载逻辑,将js文件下载到自定义目录下,在加载的时候读取新的js文件即可。

这种方式的缺点在于,js文件普遍都比较大,我目前做的两个demo一个展示的功能页面是40kb,红包雨动画是16kb,如果有数十个文件,那么apk的大小也是无法保证的。

第二种,直接访问后台提供的js文件,即通过网络方式加载,类似于webview加载h5页面,此种方式可以搭配缓存策略来做。

两种方式可以配合使用,对于比较重要的页面可以放在assets下面,其他的页面可以通过初始化时进行下载,之后如果有更新可以通过和本地的文件进行版本比对,如果需要更新再下载,不需要更新就是用本地文件。变动较大的可以直接使用网络文件。

2.自定义组件

自定义Native View
public class WeexImageView extends WXComponent {

public WeexImageView(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, boolean isLazy) {
    super(instance, dom, parent, isLazy);
}

@Override
protected View initComponentHostView(@NonNull Context context) {
    return new KaolaImageView(context);
}

@Override
public View getHostView() {
    return super.getHostView();
}

@WXComponentProp(name = "url")
public void setUrlStr(String url) {
    ImageLoaderManager.startLoad(new ImageLoaderBuilder(((KaolaImageView) mHost), url));
}
}
//注册之后weex才能使用当前view
WXSDKEngine.registerComponent("kaolaimage", WeexImageView.class);

通过$vm(id)找到自定义组件的上下文,通过this.$el(id)找到组件。

自定义Module
public class DeviceModule extends WXModule {
  @WXModuleAnno
  public void getOSVersion(@Nullable JSCallback callback) {
    String osversion = android.os.Build.VERSION.RELEASE;
    if(callback != null) {
      callback.invoke(osversion);
    }
  }

  @WXModuleAnno
  public void getSDKVersion(@Nullable JSCallback callback) {
    @SuppressWarnings("deprecation")
    String sdkversion = android.os.Build.VERSION.SDK;
    if(callback != null) {
      callback.invoke(sdkversion);
    }
  }
}

WXSDKEngine.registerModule("deviceApi", DeviceModule.class);
自定义weex View

官方文档中提到了自定义weex view的方法,其中在一个新的we文件中定义view是可以达到效果的,如果新view与使用者不在同一个目录下,需要使用 require('path-a/new.we') 引用进来才可以。官网孩提供的另外一种,文件内部的引用view的方法是不行的,在中英文的文档中分别有两种方式一种是通过 <element> 一种是通过 <we-element> ,两种我都试过了没有效果。

3.调试方式

调试方式我开发的时候主要采用了三层方式。第一层在浏览器中调试,第二层通过weex-pack在官方提供的demo项目中调试,第三步再放在我们项目中进行调试。

1.在浏览器中进行调试,官方提供了单独的we页面可以直接通过weex filename.we命令热更新到浏览器中查看。通过这种方式可以很方便的在浏览器中查看log信息。

这个命令有个缺点,多个文件就无法通过此命令动态更新,必须一个一个执行。

2.通过weex-pack命令,能够生成一个官方提供的demo项目,其中提供了android,ios和web三种方式的打包,通过这种方式可以直接打包成apk在手机上调试。

在demo中调试时,可以使用weex debug命令,打开浏览器的窗口,扫描二维码即可在浏览器中调试,方便查看log信息。

这个步骤需要针对手机进行布局上的一些微调,因为我在实现过程中发现在浏览器中运行正常的demo,放在手机上就显示不正确了。主要是表现在布局上,目前还不太清楚原理,估计可能底weex使用的布局有关系。

但是这种方式也有缺点,初始化项目完成之后,需要手动更改一次playground项目中的assets/disc目录下的文件(可以全部删除),因为每次打包不会删掉已经无用的文件。感觉这里是个bug。

3.在项目中打包查看,通过以上两步基本上放在我们项目中就不会有什么问题了。在weex_gala分支下,我也在调试面板里增加了更新和demo显示页面,不过服务器我搭在了我的电脑上,之后会迁移到外网上。

一些目前遇到的问题

打包工具很多但是有一些不是很完善,还需要等待他们的版本更新,比如weexpack工具可以直接打包成apk,但是无用的文件却不会删掉,需要手动删除。weex loader工具需要自己设置很多东西来管理项目。期待之后weexpack的完善。

目前还不支持停止和还原动画,他们之后的任务已经罗列在这里了https://github.com/alibaba/weex/issues/1494

分页加载的流畅性比RN好了很多,但是官方提供的下拉刷新和上拉加载效果都不是很好,会有卡顿的情况。

对Native的依赖比RN多,本身并没有加载图片的方法,需要依赖native的加载图片逻辑。当然也可以使用native的网络加载模式。

因为参考了vue,所以主要的view更新都是响应式的,即数据更新之后,view中即可实时显示出来,但是这种data设置需要在<template>标签内,如果想在<style>中更新就不行了。

单个的we文件的大小在10k以内,但是生成的js文件就很大了,我做的两个功能分别是16kb(动画)和43kb(列表)。网上的Demo中有的有上百kb,所以是否要把js文件放在本地的assets文件夹下还是需要考虑的。

目前的成果

完成了之前列表页的分页加载逻辑实现;

完成了首页富运营红包雨动画的实现;

跑通更新流程;

之后要做的事

在项目中统一weex总线逻辑;

红包雨动画的暂停和点击效果;

使用项目中成熟的模块,例如请求模块和一些基本信息获取的方法;

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

推荐阅读更多精彩内容