点我达骑手Weex最佳实践

木木

一、概述

 截止11月底点我达骑手APP已完整的接入了13个weex页面,效果还不错,Weex化推进也比较顺利。现特分享一下Android端点我达骑手APP接入步骤及相关核心逻辑,以此作为记录,同时也希望能给后来者带来一些帮助。


二、集成Weex

 集成Weex到已有应用,Android端有两种方式:
     - 源码依赖:能够快速使用WEEX最新功能,可以根据自己项目的特性进行相关改进。
     - SDK依赖:WEEX 会在jcenter 定期发布稳定版本。
    由于业务关系点我达骑手APP接入了菜鸟SDK,而菜鸟SDK通过SDK依赖的方式在其中引入了Weex,因此点我达项目也采用SDK依赖的方式集成。

1、新建Weex module

由于考虑到后期会有多个应用接入Weex,因此把Weex一些的通用功能抽出来放到公共模块,方便其它应用调用。在公共工程中新建一个Android Library类型的module,命名common-weex。
  包结构如下图所示: avatar   common-weex各包的功能点如下:
   activity:提供渲染的页面
   model:实体类
   extend:扩展功能,包含adapter、component及module
   jump:路由跳转相关
   utils:工具类

2、添加build.gradle依赖

在common-weex module下的build.gradle文件添加Weex依赖。

compile 'com.taobao.android:weex_sdk:0.11.0'
compile 'com.taobao.android:weex_inspector:0.12.1'

weex sdk是Weex的核心库,版本号11,weex现在处于快速发展中,各个版本差距比较大,如果不是特殊原因推荐采用最新版本。weex_inspector是Weex Devtools的依赖,能够方便调试页面。

  在骑手应用app模块中添加common-weex module的依赖。

compile project(':common-weex')  

  点我达骑手项目结构如下图所示: avatar

3、扩展

Weex提供了扩展机制,可以根据自己的业务进行定制自己的功能。Weex官方提供了默认网络请求实现DefaultWXHttpAdapter,使用的是 HttpURLConnection进行网络请求,比较老的框架,我们可以自己基于OKHttp3进行实现。需要注意的是Weex没有提供图片的默认实现,如需加载图片,则需要实现实现Weex的图片接口协议。常见的module、component及adapter实现,官方示例中都已经给出完整的案例,GitHub上也有很多优秀的案例。module、component及adapter三者各自定义及使用场景如下图说明。
avatar

4、初始化

在应用工程的APP模块下新建单例模式的DWeexManager管理类,由此类统一管理Weex初始化、配置文件加载及路由控制等相关配置。initWeex()是DWeexManager的入口,初始化WXSDK引擎、加载JS配置文件列表及注册扩展Module等。以下是initWeex()方法的主要逻辑:
  A)context初始化
  B)初始化配置文件及js文件存储路径,一般使用sharedpreferences存储即可。
  C)WXSDK引擎初始化,adapter通过InitConfig.Builder实例进行设置,比如调用setImgAdapter方法设置图片下载的自定义实现。
  D)从本地存储中取js配置列表
  E)自定义Module注册,这里列举的两个Module的功能分别是负责与Native进行交互的公共模块比如签名、拨打电话等及页面跳转。
  initWeex节选代码:

 public void initWeex(Application application) {
        mContext = application.getApplicationContext();
        mWeexPath = mContext.getFilesDir().getPath();
        WXSDKEngine.initialize(application, new InitConfig.Builder().build());
        mConfigList = ConfigManager.getWeexConfigList(mContext);
        try {
            WXSDKEngine.registerModule("DCommon", WXCommonModule.class);
            WXSDKEngine.registerModule("DRouter", WXRouterModule.class);
        } catch (WXException e) {
            e.printStackTrace();
        }
    }

在骑手应用的DwdApplication onCreate方法中调用DWeexManager.getInstance().initWeex(this)进行初始化。

5、渲染

A)新建一个统一的渲染页面WeexPageActivity。
   B)在AndroidManifest.xml文件注册该Activity。虽然所有的Weex页面都是用同一个Activity渲染,但是每一个Weex页面就是一个WeexPageActivity实例。
   C)在onCreate中初始化WXSDKInstance,并加载js文件。如果需要增加加载超时降级,可以在此开始倒计时,如果倒计时结束还没有加载完成则进行降级。
   D) 实现接口IWXRenderListener,重写onRenderSuccess、onException等回调方法,对加载过程进行控制。
   完整实现可以参考官方demo中AbsWeexActivity。所有的Weex页面统一跳转到此activity,通过Intent传入以下四个参数:

  • mUrl:js链接,线上及本地均可,推荐本地
  • mH5:降级到h5的链接
  • mBundleUrl:需要传入Weex页面的参数BUNDLE_URL
  • mPageName:Weex页面对应Native页面名字,从配置文件中获取,降级到Native使用

以下为渲染的核心代码,renderURL方法为加载URL的关键方法,由于本地JS文件与在线JS加载方法不一致,此处需要根据URL判断是否本地JS文件。options为需要传入JS页面的参数,格式类似Http的get请求。mScreenWidth与mScreenHeight是容器的宽高,因为Android手机碎片化比较严重,各种尺寸比例的手机均有,为此Weex提供了动态传入容器的宽高,默认为-1全屏显示。

protected void renderURL(String url, String bundleUrl, String jsonInitData) {  
        Map<String, Object> options = new HashMap<>();
        options.put(WXSDKInstance.BUNDLE_URL, bundleUrl);
        if (isLocalPage()) {
            mInstance.render(mPageName, 
            WXFileUtils.loadFileOrAsset(assembleFilePath(Uri.parse(url)), this),
            options, jsonInitData, mScreenWidth, 
            mScreenHeight, WXRenderStrategy.APPEND_ASYNC);
        } else {
            mInstance.renderByUrl(mPageName, url, options, jsonInitData,  
            mScreenWidth, mScreenHeight, WXRenderStrategy.APPEND_ASYNC);
        }
    }

渲染成功会回调onRenderSuccess方法,在此方法中可以进行完成后的相关操作。如取消渲染计时器及隐藏加载进度条。

6、降级

降级分主动和被动降级两种,主动降级主要是通过开关控制,被动降级是指Weex页面渲染失败或者加载时间超时等异常情况下,为了降低影响优化体验,我们采用的降级,一般降级到Native或者h5页面。被动降级通过重写接口 IWXRenderListener的onException方法进行处理,可以在此调用Native或者h5页面,同时上报错误日志信息。

7、调用

访问页面时,将startActivity(intent)/startActivityForResult(intent, requestCode)修改为DWeexManager.getInstance().startActivity( mContext,intent)/DWeexManager.getInstance().startActivityForResult( mContext, intent, requestCode)即可实现Weex的调用,逻辑在路由层实现,第三章节会讲到路由。为了确保降级至Native之后能正常显示,需要将intent中的参数类型统一修改为String类型,同时确保key一致。


三、进阶知识

1、路由控制

路由主要根据配置文件预先设定好的规则进行控制,配置文件由服务端下发,实现动态更新。由于Weex刚接入,为了降低风险,增加了全局开关以及单个页面开关,开关关闭时就直接访问Native页面。
   路由流程如下图: avatar   举个例子,我们来看下A页面访问B页面之间流转的情况,由于涉及native与weex,分为正向与逆向各4种情形:
   - 正向,会通过Intent所携带的class信息或者Url链接去配置列表查找对应的配置,如果未找到或者开关关闭,就直接访问Native页面(前提是对应的Native页面存在),反之找到对应的配置信息且开关打开表示此页面可以用Weex渲染,然后进行js参数组装,其中js渲染路径会校验本地js文件是否存在,若不存在则使用在线地址同时下载更新js文件,存在则使用js本地路径,最后调用WeexPageActivity渲染页面。
   - 逆向,从B返回A,关掉B页面回到A,此时不会经过路由。逆向返回需要注意的是反传值,比如前一个页面需要后一个页面的值,可以结合startActivityForResult方式及fireGlobalEventCallback配合使用。 avatar   配置文件信息如下,采用json格式:

{
    "weexSwitch": 1,
    "version": "1.0.0",
    "interfaceVersion":"v1",
    "supportCityList":["1"],
    "jsList": [
        {
            "activityName": "com.dwd.setting.MoreActivity",
            "jsDownloadUrl": "http://prodwbbucket.com/weex/js/SettingView.js",
            "h5Url": "",
            "jsName": "setting/SettingView.js",
            "jsSwitch": 1,
            "jsVersion": "1.0"
        }
    ]
}

对应字段解释说明
  外层为全局参数:
   - weexSwitch:全局开关
   - version:配置文件版本号
   - interfaceVersion:weex页面访问接口版本号
   - supportCityList:支持Weex城市列表,区域控制,减小影响范围
  列表为单个js页面相关参数集合:
   - activityName:对应的activity页面名,完整包名
   - jsDownloadUrl:js文件下载链接
   - h5Url:降级H5链接
   - jsName:对应js文件名
   - jsSwitch:单个js开关
   - jsVersion:js文件版本号

2、JS预下载

为了加快Weex页面打开时间,推荐采用本地加载js的方式。为此在程序启动之后更新配置文件同时下载js文件。具体流程如下:
   1) 应用启动时校验配置文件MD5以及版本号,如果不一致更新配置文件,配置文件与应用版本绑定,防止程升级后加载老版本Weex配置文件。另外为了确保实时性,增加了轮询服务进行同步;
   2)遍历js列表,校验本地是否存在该js文件,如果存在,则继续校验js文件版本号(由于目前配置文件为手动上传,无法生成MD5,暂时不比较文件MD5,此处会有风险),若文件不存在或者版本不一致则下载更新js文件;
avatar    针对有可能js文件下载失败的情形,每次访问的Weex页面会对js文件进行校验,如果不存在则再次下载。

3、降级Native参数传值

降级Native时根据路由规则跳转对应的Native页面,同时组装相应的参数。如果是根据Url链接匹配页面则需要拆分链接生成对应参数。特别说明Native页面与js页面参数key需要统一,否则会出现参数无法识别异常。


四、后语

至此整个集成过程已经完成,总体来说集成过程比较顺利,在此感谢Weex技术社区的力量,也希望此文能给后来者一些帮助。不过由于Weex开源时间比较短,整个生态圈还不太完善,在Weex开发的过程中也踩了一些坑,期待能有更多的人加入Weex,一起为Weex的发展贡献自己的一份力量,让Weex发扬光大,一统江湖!