点我达骑手Weex最佳实践

Posted 2021-04-29 点我达技术团队

一、概述

    截止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。
  包结构如下图所示：  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')
 
   
   
 

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

3、扩展

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

module、component及adapter三者各自定义及使用场景如下图说明。

4、初始化

在应用工程的APP模块下新建单例模式的DWeexManager管理类，由此类统一管理Weex初始化、配置文件加载及路由控制等相关配置。initWeex()是DWeexManager的入口，初始化WXSDK引擎、加载JS配置文件列表及注册扩展Module等。

 
   
   
 

  
    
    
  
 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页面。 

路由流程如下图：

 
   
   
 

  
    
    
  
{
  
    
    
  
    "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文件；

   针对有可能js文件下载失败的情形，每次访问的Weex页面会对js文件进行校验，如果不存在则再次下载。

3、降级Native参数传值

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

四、后语

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