Android weex 上手体验

2017-08-17 本文已影响612人 Kevin是只兔子

我写之前就有预感，这必然是一片阅读量极低的文章

相信大家都有听过react-native，weex，就算没听过，肯定也知道混发开发，因为这是一条踏上去就难以回头的装逼之路。但我相信其实大多数人都没有真正的开发过，然鹅，我已经在这条路上走了快两年了。

前话
16年4月份时候，我们这个不大的创业公司开始了嵌入react-native（后文简称RN）之路，我这个对前端一无所知的小白开发人员开始了填坑之旅。但这篇文章旨在上手weex，我这边就不细说RN了。
17年5月份，由于RN在iOS端对长列表的内存回收机制并不理想（经常出现内存溢出而闪退），所以终于在嵌入RN一年以后，从我司项目中移除了。这也是我正是接手RN一周年之际。
所以，如我所愿，又开始weex的填坑之旅。但不得不说，weex还是很好上手的，同时也解决了内存问题。

什么是weex

Weex能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。真正实现一次撰写，多平台运行。

为什么要用weex

东西是好东西，对于电商这类经常需要变动 APP 界面的尤其适用。看看天猫、淘宝首页你就知道了。但一定不会适用于所有人，需求千变万化，总有框架照顾不到的地方。我在下面也列几张我们用weex后的首页。

平时的时候这个样子的，还是比较正常普通的：

image.png

促销的时候就这个样子了：

image.png

大家能看出来变化还是特别大的，效果还是很明显的。第一张和最后一张都是我的截屏。中间两张是设计图，但最终效果是一模一样的，下面还有列表，由于数据太长了我就不截图了，大家有兴趣可以下载小红唇APP自己看一下。

用原生如何实现？

当我没用weex的时候，我想：这还非得用weex，我用native也能实现。我接不同的type展现不同的UI不就行了。这当然可以了，我始终相信一点，需求通过不同的技术手段都可以实现，只是实现方式的简易程度和灵活度的差别。

用weex的优势？

首先，weex是组件化的。什么是组件化？很好理解，他的每一块儿都是独立，我们只需根据不同的类型，将不同的组件组合在一起就行了，耦合度很低，当一个组件出问题不会影响其他组件渲染。但如果我用原生写，肯定是一页，然后根据不同的数据，展现出来，可能一个数据出错，我这一整页都是空白的。其次，weex还有一个好处，可以热更新这个页面，假如：线上时突然又想新增一种组件样式（例如banner吧），这个时候原生界面肯定说：等下个版本迭代给你新加。但weex就可以直接新增一种组件，然后发一个热更新文件，让原生加载新的js文件即可。

Android 嵌入weex

1.集成weex有两种模式，一种是源码集成，另一种sdk依赖。这里没有坑，就按照接入文档接入就行，有一点注意一下，用源码依赖可以拿到最新版本，但通过源码依赖拿的版本就会落后一些，但比较稳定。
2.接入weex后需要自己实现一个ImageAdapter，用于展示图片，我这里把我写的ImageAdapter传到这里，大家可以自取，直达链接。我是基于glide框架的，当然也可以选择基于fresco，picasso等等。
3.文档说只说了通过file的形式加载js文件，其实我们也可以通过URL的方式渲染，当我们调试的时候就需要连接服务器进行修改，也就是通过URL方式加载。

//根据URL渲染
mInstance.renderByUrl(getPageName(), url, options, jsonInitData, WXRenderStrategy.APPEND_ONCE);
//根据文件渲染
mWXSDKInstance.render(name, WXFileUtils.loadAsset(name+".js", this), null, null, WXRenderStrategy.APPEND_ASYNC);

Android 嵌入weex devtools调试工具

1.先通过npm install 安装项目依赖。之后运行npm run dev和npm run serve
2.运行weex debug，就会开启一个chrome 的 inspect/debug 工具
3.完成上面两个步骤，服务端就相当于配置成功了，之后我们只需要在我们的代码中配好相应的库，完善代码就可以了

Android 实现热调试功能

Android调试功能很简单就可以实现，但是热调试功能却花我一些时间。什么是热调试功能呢？当我修改服务器的代码，通过刷新浏览器，APP端数据也会跟着改变，这就是热调试。热调试功能是如何工作的呢？其实当我刷新时，会在APP的广播接收器接到相应的指令，此时我们重新reload相应的js文件即可。

  public void registerBroadcastReceiver(BroadcastReceiver receiver, IntentFilter filter) {
        mBroadcastReceiver = receiver != null ? receiver : new DefaultBroadcastReceiver();
        if (filter == null) {
            filter = new IntentFilter();
        }
        filter.addAction(IWXDebugProxy.ACTION_DEBUG_INSTANCE_REFRESH);
        filter.addAction(WXSDKEngine.JS_FRAMEWORK_RELOAD);
        LocalBroadcastManager.getInstance(getApplicationContext())
                .registerReceiver(mBroadcastReceiver, filter);
        if (mReloadListener == null) {
            setReloadListener(new WxReloadListener() {
                @Override
                public void onReload() {
                    createWeexInstance();
                    renderPage();
                }
            });
        }
        if (mRefreshListener == null) {
            setRefreshListener(new WxRefreshListener() {
                @Override
                public void onRefresh() {
                    createWeexInstance();
                    renderPage();
                }

            });
        }
    }

weex上手还是比较容易的，希望每个人都有一直学习的热情与能力~