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>
本文由用户 nyul7962 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!