HybridFoundation Hybrid App 基础框架：Android 端会用到代 @codeKK AndroidOpen Source Website

HybridFoundation

Project Url: free46000/HybridFoundation

Introduction: Hybrid App 基础框架：Android 端会用到代码，包含 JS 通信，文件处理工具类，闪屏辅助类和 WebView 的封装

More: Author ReportBugs

Tags:

android-webview-hybrid-js-

这里我整理了Android端会用到代码，包含JS通信，文件处理工具类，闪屏辅助类和WebView的封装。由于源码并没有完善，所以暂时没有发布到Maven仓库

用法

`JS`通信

需要把library中assets文件夹下的DeviceBridge.js放入并加载到你的前端项目中

Android调用JS 首先在JS中注册对应Handler，以注册的字符串为key对应

window.DeviceJsBridge.registMessageHandler("testCallJs", function (message, responseCallback) {
      alert("android 调用 js 方法，消息内容：" + JSON.stringify(message))
      message.data = '我是在 js 中赋值的数据'
      responseCallback(message);
  });

然后就可以在Android代码中调用了

Message message = new Message();
message.setHandlerName("testCallJs");
message.setData("数据内容（onPageFinished 执行 android 调用 js，js 返回的数据会打印在 logcat）");
webView.getJsBridge().sendMessage(message, responseMessage ->
      System.out.println("js 异步 response 消息:" + responseMessage));

JS调用Android 同样首先需要在Android中注册对应Handler，以注册的字符串为key对应

jsBridge.registMessageHandler("connectBluetooth", messageHandler);

然后就可以在JS中调用了

var message = {handlerName: 'testAndroid'}
var result = window.DeviceJsBridge.sendMessage(message, function (message) {
  alert("js 调用 android 异步方法 Response 结果：" + JSON.stringify(message))
})

文件处理工具

相关用法详见代码注释，包含对压缩文件的处理

闪屏辅助类

下面列一下常用的方法

/**
 * 设置闪屏等待时间，最终等待时间和 setDelayObservable 共同决定
 */
public void setDelayTime(long delayTime)

/**
 * 设置闪屏等待 Observable 最终等待时间和 setDelayTime 共同决定
 */
public void setDelayObservable(Observable<?> delayObservable)

/**
 * 设置闪屏隐藏监听
 */
public void setSplashHideListener(SplashHideListener splashHideListener)

/**
 * 展示闪屏
 *
 * @param viewId         包含 Fragment 的 view id
 * @param splashFragment 闪屏 Fragment
 */
public void showSplash(int viewId, Fragment splashFragment)

`HybridWebView`的封装

主要封装了通用的方法，对外提供了必要的监听回调，还包括了JSBridge的使用，让你在使用WebView的时候更方便，具体使用详见Demo

概述

移动开发的跨平台与快速发布一直是开发者的追求，也是技术的一个发展趋势，现在各大厂开始有了自己的大前端团队，所以我们也开始了自己的探索，目前来说主要有两种思路：

Hybrid App 代表:Cordova 通过Webview加载Web页面，在Native和Web页面之间建立双向通信
H5代码Native化代表:ReactNative,Weex等使用各平台Api，把H5代码编译成二进制代码直接运行

其实关于这两种思路对比，网上有很多大牛分析的很全面了，总结来说各有利弊很难完美，本篇文章我们主要讲一下 Hybrid App 实践，采用前后端分离以及单页应用技术开发Web页面，使用WebView加载Web页面，并通过JS通信提供一些Native层的支持，通过接口获取更新后的差异化页面资源文件，在本地覆盖，就可以达到热更新的需求。在我看来此方案更适用于需要快速发布、多端兼容、对性能要求稍低的业务，正好符合我们的需求。

方案详解

既然确定了方向，那么就应该确定具体的方案了，通过自己的经验和网上资料整理，画了时序图：

按照图上的时序，接下来说一下每一步中的实践，以及碰到的坑。下面讲解

初次安装

打包在打包程序时这一步主要是把Html相关资源文件压缩后放在assets文件夹下即可
安装用户安装完应用程序打开后，检测是否为初次使用，如果是则通过程序直接解压包内资源到手机存储上即可，不局限于 SD 卡。

展示页面

闪屏页展示 由于上面的解压资源，还有Webview初始化、JS的加载执行、html的渲染都是耗时操作，并且都是发生在Html展示之前，所以我们选择把闪屏页用Android原生代码来编写，采用覆盖WebView所在Activity的方案，这样在闪屏页隐藏的时候，用户就可以看到业务界面，可以提升用户体验。注：另外提供两种闪屏优化的小技巧，使用透明主题或者设置主题背景图片
加载本地 Html 页面 直接使用WebView#loadUrl()加载本地资源文件即可。由于WebView加载不同页面会出现闪屏的问题，所以我们采用Vue + Vue Router构建单页应用即可。这里Vue Router会有一个小坑，提醒大家注意一下：Vue Router默认采用hash模式，会有一个丑陋的#符号，作为一个有追求的程序员怎么能允许这种很丑的hash，一种更优雅的方式使用HTML5 History模式，但是不幸的是，加载本地资源文件的方式并不能正常解析HTML5 History模式的url，所以只能采用hash模式。
数据请求 为了节省用户的流量和时间，需要把Html资源文件存储在本地，这样数据的请求必须在客户端完成。有两种方案供选择：一是Native层拦截并请求数据再返回给Html层去展示，有我们采用前后端分离直接通过JS请求接口获取数据即可，这样会增加工作量，也不利于职责的分离，所以放弃。二是直接使用JS请求数据，这样会出现跨域访问的问题，相比较来说还是这个比较容易解决的，采用CORS即可
Native 调用 JS Native层调用JS比较简单，执行一段JS代码即可，如：javascript:callJS()
JS 调用 Native JS层调用Native主要分为三种：一：通过WebView#addJavascriptInterface()进行映射，使用起来简单，但是有安全风险，弃用二：自定义协议然后由Native层拦截并解析请求，使用起来复杂，容易和业务耦合，也不是最优选，弃用三：拦截JS#prompt()方法并解析，使用起来复杂，但是比第一种更安全，比第二种灵活一些，所以使用此方案