Android + HTML5 混合开发

Posted 2020-10-08

摘要: 对于 android + html5 混合开发以下的观点仅仅是我的个人观点，如果有什么不对的地方请指正

简介： 混合开发的 App（Android + HTML5）就是在一个 App 中内嵌一个轻量级的浏览器（WebView），一部分原生的功能改为 HTML5 来开发，这部分功能不仅能够在不升级 App 的情况下动态更新，而且可以在 Android 或 ios 的 App 上同时运行，让用户的体验更好又可以节省开发的资源。

##成品 APP：

1. 超星慕课（一款包含 Java 和 C# 学习的视频软件）

2. 列车时刻表查询（一款根据国家列车时刻表的查询火车车次信息的查询软件）

3. 便捷天气预报查询（一款由聚合数据提供 Json 数据的中国城市天气预报查询系统）

4. 豆豆新闻（一款由于谷歌新闻提供 API 结合新浪新闻提供 Json 数据的实时新闻软件）

5. 豆豆电影（一款最新电影下载的软件，数据由6080、1905、电影天堂提供视频资源的 App ）

6. 嬴政视频（一款可以搜索哔哔哩哩视频的 APP ，提供在线播放功能）

###超星慕课

• 主要技术点

  1. Android 前端：APICloud 提供的 SuperWebView 、二维码插件 ZXing 。
  2. HTML5 前端:APICloud 提供的 H5 模块、JQuery中的 ajax 、前端框架 bootstrap 。
  3. Java 后端：Spring+SpringMVC+MyBatis 。

• 内部执行过程：

  前端：原生代码加载 SuperWebView ，执行 assets 目录下的 HTML5 页面，然后通过 APICloud 提供的 H5 模块完成原生代码和 H5 页面之间的交互（主要使用javascript）。

  后端：Java 的框架代码 Spring+SpringMVC+MyBatis 联合处理后台数据，主要为前端提供 Json 格式数据的数据，前端请求数据需要使用到 ajax 接收后端的标准 Json 格式的数据。

###列车时刻表查询

• 主要技术点

  1. Android 前端：HBuilder 提供的移动 APP 框架 。
  2. HTML5 前端:jQuery Mobile、HTML5 的 WebSQL 。
  3. Other 后端：WebService 接口（Java） 。

• 内部执行过程：

  前端：原生代码结合 HTML5 标准代码，通过直接加载 HTML5 代码，渲染代码至 WevView 界面的显示（jQuery Mobile 中提供的 List 列表），通过 ajax 的 GET 请求 Json 数据的格式得到数据。在留言板目录采用了 HTML5 的自带数据库 WebSQL 数据库，通过 db 命令对数据库进行 add 和 query 操作。

  后端：国家列车网的 WebService 接口，使用了跨域资源请求的方式请求数据 。

###嬴政视频

• 主要技术点

  1. Android 前端：OKHttp（网络请求框架）、MediaPlayer（视频框架） 。
  2. HTML5 前端:无 。
  3. Other 后端：WebService 接口（php） 。

• 内部执行过程：

  前端：对基本的 Android 提供的 Navigation Drawer Activity 示例进行修改（删除Item、重写BaseAdapter），分别通过 OKHttp 框架的 GET 和 POST 进行请求/二次请求操作，把取得的数据通过适配器进行填充。

  后端：哔哔哩哩 WebService 接口，通过 ajax 的字符串拼接方式完成 POST 请求获取数据 。

##架构分析 1.普通模式（怎么快怎么写）
2.MVC（模型 [ 安卓 > model 充当模型部分 ] + 视图 [ HTML5 > 数据的显示层 ] + 控制器 [ 安卓 > 控制层 ] ）
3.MVVM（模型 [ 安卓 > model 充当部分模型 ] + 视图 [ HTML5 > 数据的显示和处理层 ] + 视图模型 [ HTML5 > model 充当部分模型 ] ）
4.MVP（模型 [ 安卓 > mode 充当模型部分 ] + 视图 [ ( 安卓 + HTML5 ) > 混合显示部分 ] + 中间件 [ 安卓 > 控制层 ] ）

总结：<font color=‘red‘>在 Adnroid + HTML5 混合开发的模式中，需要根据项目的大小选择合理的开发模式，如果项目的功能和数据都非常少就不建议使用任何架构，直接写代码就行，如果代码多的情况下就要选择模式了，常用的模式有三种： MVC / MVP / MVVM 三种模式，其中适合混合开发的模式有 MVP 与 MVVM 这两种模式。在使用这两种模式开发 APP 时，应注意分清 [ 多View混合型 / 单View混合型 / Web 主体型 ] 三种开发情况，在不考虑性能的情况下可以采用 Web 主体型进行开发 [ 动态调用外部网页 ] 。</font>

##技术点分析

1. 原生代码加载 HTML5：定义本地方法 效果提供给 Android 端调用 被调用后将获得参数值，定义本地点击事件 效果调用 Android 方法 传递参数给 Android 客服端。
2. HTML 5页面在 WebView 中的动态数据：通过 AJAX 和 HTML5的JSON.parse() 方法获得数据，进行 append 追加。
3. 混合开发下的前后端的数据交互：
   ①：数据获取都是在资源页面上通过 ajax 异步完成的（在资源页面完成预加载或者渲染）。
   ②：读取本地数据库文件，敏感操作通过 js 函数返回给 android 的后台进行处理。
   ③：着重注意 HTML5 页面的数据保存在 WebSQL 中的数据是没有经过加密的，任何人都可以读取，加密的话要参考 md5.js 或者使用混淆或者请求网络页面，然后加上 token 等验证操作。
4. 传输加密方案： DES与AES、RSA三种典型加密算法。
5. APP代码加密方案：伪加密、混淆保护、运行时验证、使用加密软件。

##APP测试流程 1.使用腾讯压测大师（WeTest）对 APP 的后端接口进行压力测试，对 APP 本身进行云端性能测试以及兼容性测试。并生成测试报告。
2.对 APP 进行安全测试：

①.测试从数据的本地存储到数据的传输、处理以及远程访问等各个环节，基于相应的安全标准/行业标准评估App的安全特性。
②.借鉴在Web App和网络安全测试的一些成功经验在智能终端App测试中进行裁减或适配。 ③.检测App的用户授权级别，数据泄漏，非法授权访问等。
④.对App的输入有效性校验、认证、授权、敏感数据存储、数据加密等方面进行检测,以期发现潜在的安全问题。
⑤.基于各种通信协议或相应的行业安全标准检视App是否满足相应的要求。
⑥.使用加固应用加固后重新签名。

##APP发布流程 1.上架所需文件（安装包、应用商标、应用截图（4~6张）、各应用市场的账号）。
2.上架操作：

①.先登录开发者平台地址，进行登录。
②.登录后，进入管理中心，如果之前已经上传了应用的话，会在下面显示已有应用的信息。
③.进入管理中心后，点击创建软件选择软件。
④.上传apk安装文件，完善应用描述信息及上传图标和截图。
⑤.提交后，等待审核。

#所有资源参考资料：
1.RSA加密的方式和解密方式
2.AES简单加密解密的方法实现
3.最简单的DES加密算法实现
4.DES与AES、RSA三种典型加密算法的比较
5.Android使用OKHTTP解析JSON数据
6.H5操作WebSQL数据库
7.Android中的一个Json数据解析类的实现
8.跨平台框架在线文档
9.HTML5混合开发API
10.WEB跨域资源共享
11.OKHttp网络请求框架所有文献

成品APP下载