| 编辑推荐: |
| 本文来自于网络,本文主要介绍了Android端点我达骑手APP接入步骤及相关核心逻辑和Weex的整个集成过程，希望对您的学习有帮助。 |
|
一、概述
截止11月底点我达骑手APP已完整的接入了13个weex页面，效果还不错，Weex化推进也比较顺利。现特分享一下Android端点我达骑手APP接入步骤及相关核心逻辑，以此作为记录，同时也希望能给后来者带来一些帮助。
二、集成Weex
集成Weex到已有应用，Android端有两种方式:
1.源码依赖：能够快速使用WEEX最新功能，可以根据自己项目的特性进行相关改进。
2.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') |
点我达骑手项目结构如下图所示：
3、扩展
Weex提供了扩展机制，可以根据自己的业务进行定制自己的功能。Weex官方提供了默认网络请求实现DefaultWXHttpAdapter，使用的是
HttpURLConnection进行网络请求，比较老的框架，我们可以自己基于OKHttp3进行实现。需要注意的是Weex没有提供图片的默认实现，如需加载图片，则需要实现实现Weex的图片接口协议。常见的module、component及adapter实现，官方示例中都已经给出完整的案例，GitHub上也有很多优秀的案例。module、component及adapter三者各自定义及使用场景如下图说明。
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页面。
路由流程如下图：
举个例子，我们来看下A页面访问B页面之间流转的情况，由于涉及native与weex，分为正向与逆向各4种情形：
- 正向，会通过Intent所携带的class信息或者Url链接去配置列表查找对应的配置，如果未找到或者开关关闭，就直接访问Native页面（前提是对应的Native页面存在），反之找到对应的配置信息且开关打开表示此页面可以用Weex渲染，然后进行js参数组装，其中js渲染路径会校验本地js文件是否存在，若不存在则使用在线地址同时下载更新js文件，存在则使用js本地路径，最后调用WeexPageActivity渲染页面。
- 逆向，从B返回A，关掉B页面回到A，此时不会经过路由。逆向返回需要注意的是反传值，比如前一个页面需要后一个页面的值，可以结合startActivityForResult方式及fireGlobalEventCallback配合使用。
配置文件信息如下，采用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"
}
]
} |
对应字段解释说明
外层为全局参数：
1. weexSwitch：全局开关
2.version：配置文件版本号
3.interfaceVersion：weex页面访问接口版本号
4.supportCityList：支持Weex城市列表，区域控制，减小影响范围
列表为单个js页面相关参数集合：
1.activityName：对应的activity页面名，完整包名
2.jsDownloadUrl：js文件下载链接
3.h5Url：降级H5链接
4.jsName：对应js文件名
5.jsSwitch：单个js开关
6.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发扬光大，一统江湖！
|
