2016-12-23

Weex调研总结

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);

自定义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的方法是不行的，在中英文的文档中分别有两种方式一种是通过一种是通过 ,两种我都试过了没有效果。

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

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显示页面，不过服务器我搭在了我的电脑上，之后会迁移到外网上。

一些目前遇到的问题

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

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

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

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

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

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

目前的成果

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

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

跑通更新流程；

we文件的管理和demo项目可以在这里下载：https://g.hz.netease.com/klandroid/gala

之后要做的事

扩展kaola项目下的公共apiModule给js文件使用；

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

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

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