首页  »   HTML5

Android + HTML5 混同开发

网友分享于:2013-10-19  浏览:0次
Android + HTML5 混合开发
摘要: 对于 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下载

相关解决方案

最新解决方案