weex用于android调研总结

   <h3><strong>1.更新方式</strong></h3>    <p>更新方式主要有两种，</p>    <p>第一种，将准备和项目一起打包的js文件放置在assets文件夹下，同时增加更新js文件的逻辑和读取更新文件的逻辑，当在apk发布之后想要更新js文件时，只要走下载逻辑，将js文件下载到自定义目录下，在加载的时候读取新的js文件即可。</p>    <p>这种方式的缺点在于，js文件普遍都比较大，我目前做的两个demo一个展示的功能页面是40kb，红包雨动画是16kb，如果有数十个文件，那么apk的大小也是无法保证的。</p>    <p>第二种，直接访问后台提供的js文件，即通过网络方式加载，类似于webview加载h5页面，此种方式可以搭配缓存策略来做。</p>    <p>两种方式可以配合使用，对于比较重要的页面可以放在assets下面，其他的页面可以通过初始化时进行下载，之后如果有更新可以通过和本地的文件进行版本比对，如果需要更新再下载，不需要更新就是用本地文件。变动较大的可以直接使用网络文件。</p>    <h3><strong>2.自定义组件</strong></h3>    <p>自定义Native View</p>    <pre>  <code class="language-java">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);</code></pre>    <p>通过$vm(id)找到自定义组件的上下文，通过this.$el(id)找到组件。</p>    <p>自定义Module</p>    <pre>  <code class="language-java">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);</code></pre>    <p>自定义weex View</p>    <p>官方文档中提到了自定义weex view的方法，其中在一个新的we文件中定义view是可以达到效果的，如果新view与使用者不在同一个目录下，需要使用 <strong>require('path-a/new.we')</strong> 引用进来才可以。官网孩提供的另外一种，文件内部的引用view的方法是不行的，在中英文的文档中分别有两种方式一种是通过 <strong><element></strong> 一种是通过 <strong><we-element></strong> ,两种我都试过了没有效果。</p>    <h3><strong>3.调试方式</strong></h3>    <p>调试方式我开发的时候主要采用了三层方式。第一层在浏览器中调试，第二层通过weex-pack在官方提供的demo项目中调试，第三步再放在我们项目中进行调试。</p>    <p>1. <strong>在浏览器中进行调试</strong> ，官方提供了单独的we页面可以直接通过weex filename.we命令热更新到浏览器中查看。通过这种方式可以很方便的在浏览器中查看log信息。</p>    <p>这个命令有个缺点，多个文件就无法通过此命令动态更新，必须一个一个执行。</p>    <p>2. <strong>通过weex-pack命令</strong> ，能够生成一个官方提供的demo项目，其中提供了android，ios和web三种方式的打包，通过这种方式可以直接打包成apk在手机上调试。</p>    <p>在demo中调试时，可以使用weex debug命令，打开浏览器的窗口，扫描二维码即可在浏览器中调试，方便查看log信息。</p>    <p>这个步骤需要针对手机进行布局上的一些微调，因为我在实现过程中发现在浏览器中运行正常的demo，放在手机上就显示不正确了。主要是表现在布局上，目前还不太清楚原理，估计可能底weex使用的布局有关系。</p>    <p>但是这种方式也有缺点，初始化项目完成之后，需要手动更改一次playground项目中的assets/disc目录下的文件(可以全部删除)，因为每次打包不会删掉已经无用的文件。感觉这里是个bug。</p>    <p>3. <strong>在项目中打包查看</strong> ，通过以上两步基本上放在我们项目中就不会有什么问题了。在weex_gala分支下，我也在调试面板里增加了更新和demo显示页面，不过服务器我搭在了我的电脑上，之后会迁移到外网上。</p>    <p>一些目前遇到的问题</p>    <p>打包工具很多但是有一些不是很完善，还需要等待他们的版本更新，比如weexpack工具可以直接打包成apk，但是无用的文件却不会删掉，需要手动删除。weex loader工具需要自己设置很多东西来管理项目。期待之后weexpack的完善。</p>    <p>分页加载的流畅性比RN好了很多，但是官方提供的下拉刷新和上拉加载效果都不是很好，会有卡顿的情况。</p>    <p>对Native的依赖比RN多，本身并没有加载图片的方法，需要依赖native的加载图片逻辑。当然也可以使用native的网络加载模式。</p>    <p>因为参考了vue，所以主要的view更新都是响应式的，即数据更新之后，view中即可实时显示出来，但是这种data设置需要在 <strong><template\></strong> 标签内，如果想在 <strong><style\></strong> 中更新就不行了。</p>    <p>单个的we文件的大小在10k以内，但是生成的js文件就很大了，我做的两个功能分别是16kb(动画)和43kb(列表)。网上的Demo中有的有上百kb，所以是否要把js文件放在本地的assets文件夹下还是需要考虑的。</p>    <p>目前的成果</p>    <p>完成了之前列表页的分页加载逻辑实现；</p>    <p>完成了首页富运营红包雨动画的实现；</p>    <p>跑通更新流程；</p>    <p>之后要做的事</p>    <p>在项目中统一weex总线逻辑；</p>    <p>红包雨动画的暂停和点击效果；</p>    <p>使用项目中成熟的模块，例如请求模块和一些基本信息获取的方法；</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/9755ba86143d</p>    <p> </p>