Android + HTML5 混合开发
简介: 混合开发的 App(Android + HTML5)就是在一个 App 中内嵌一个轻量级的浏览器(WebView),一部分原生的功能改为 HTML5 来开发,这部分功能不仅能够在不升级 App 的情况下动态更新,而且可以在 Android 或 iOS 的 App 上同时运行,让用户的体验更好又可以节省开发的资源。
##成品 APP:
超星慕课(一款包含 Java 和 C# 学习的视频软件)
列车时刻表查询(一款根据国家列车时刻表的查询火车车次信息的查询软件)
便捷天气预报查询(一款由聚合数据提供 Json 数据的中国城市天气预报查询系统)
豆豆新闻(一款由于谷歌新闻提供 API 结合新浪新闻提供 Json 数据的实时新闻软件)
豆豆电影(一款最新电影下载的软件,数据由6080、1905、电影天堂提供视频资源的 App )
嬴政视频(一款可以搜索哔哔哩哩视频的 APP ,提供在线播放功能)
###超星慕课
主要技术点
- Android 前端:APICloud 提供的 SuperWebView 、二维码插件 ZXing 。
- HTML5 前端:APICloud 提供的 H5 模块、JQuery中的 ajax 、前端框架 bootstrap 。
- Java 后端:Spring+SpringMVC+MyBatis 。
内部执行过程:
前端:原生代码加载 SuperWebView ,执行 assets 目录下的 HTML5 页面,然后通过 APICloud 提供的 H5 模块完成原生代码和 H5 页面之间的交互(主要使用JavaScript)。
后端:Java 的框架代码 Spring+SpringMVC+MyBatis 联合处理后台数据,主要为前端提供 Json 格式数据的数据,前端请求数据需要使用到 ajax 接收后端的标准 Json 格式的数据。
###列车时刻表查询
主要技术点
- Android 前端:HBuilder 提供的移动 APP 框架 。
- HTML5 前端:jQuery Mobile、HTML5 的 WebSQL 。
- Other 后端:WebService 接口(Java) 。
内部执行过程:
前端:原生代码结合 HTML5 标准代码,通过直接加载 HTML5 代码,渲染代码至 WevView 界面的显示(jQuery Mobile 中提供的 List 列表),通过 ajax 的 GET 请求 Json 数据的格式得到数据。在留言板目录采用了 HTML5 的自带数据库 WebSQL 数据库,通过 db 命令对数据库进行 add 和 query 操作。
后端:国家列车网的 WebService 接口,使用了跨域资源请求的方式请求数据 。
###嬴政视频
主要技术点
- Android 前端:OKHttp(网络请求框架)、MediaPlayer(视频框架) 。
- HTML5 前端:无 。
- 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>
##技术点分析
- 原生代码加载 HTML5:定义本地方法 效果提供给 Android 端调用 被调用后将获得参数值,定义本地点击事件 效果调用 Android 方法 传递参数给 Android 客服端。
- HTML 5页面在 WebView 中的动态数据:通过 AJAX 和 HTML5的JSON.parse() 方法获得数据,进行 append 追加。
- 混合开发下的前后端的数据交互:
①:数据获取都是在资源页面上通过 ajax 异步完成的(在资源页面完成预加载或者渲染)。
②:读取本地数据库文件,敏感操作通过 js 函数返回给 android 的后台进行处理。
③:着重注意 HTML5 页面的数据保存在 WebSQL 中的数据是没有经过加密的,任何人都可以读取,加密的话要参考 md5.js 或者使用混淆或者请求网络页面,然后加上 token 等验证操作。- 传输加密方案: DES与AES、RSA三种典型加密算法。
- 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网络请求框架所有文献
Android + HTML5 混合开发的更多相关文章
- Qt 5.4正式发布!引入WP,支持HTML5混合开发
北京时间12月11日消息,Digia全资子公司The Qt Company在其 官方博客上宣布,正式发布Qt 5.4,支持HTML5混合开发,引入对于Windows Phone的支持,以及众多跨桌面. ...
- Android H5混合开发(1):构建Cordova 项目
Cordova是什么 Apache Cordova是一个开源的移动开发框架.允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 以移动平台为例,安卓.IOS平台设备的常 ...
- Android H5混合开发(2):自定义Cordova插件
前言 Cordova虽然定义了很多基础的插件,供H5端使用原生设备的功能. 但是,如果业务相关的功能,需要提供给H5端使用,那么,就需要我们自定义插件了. 这个"自定义"不是指由A ...
- Android H5混合开发(3):原生Android项目里嵌入Cordova
前言 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平 ...
- Android H5混合开发(4):构建Cordova Jar包
前言 上一节,介绍了原生项目如何嵌入Cordova,我们对Cordova的依赖使用的是CordovaLib Module,这也是安卓项目常用的方式. 但是,也有项目希望以Jar包的方式依赖Cordov ...
- Android H5混合开发(5):封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova
近期,有同事咨询如何在Fragment中使用Cordova,看了下Cordova源码,官方并没有提供包含Cordova Webview的Fragment,以供我们继承. 上网查询了一下,也有几篇文章讲 ...
- Android混合开发,html5自己主动更新爬过的坑
如今使用混合开发的公司越来越多,尽管出现了一些新技术,比方Facebook的react native.阿里的weex,但依旧阻挡不了一些公司採用h5的决心.当然,这也是从多方面考虑的选择. 在三年前就 ...
- 《React Native 精解与实战》书籍连载「Android 平台与 React Native 混合开发」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- Android 混合开发 的一些心得。
其实所谓这个混合开发,也就是hybird,就是一些简单的,html5和native 代码之间的交互.很多电商之类的app里面都有类似的功能, 这种东西其实还是蛮重要的,主要就是你有什么功能都可以进行热 ...
随机推荐
- DataTableToList
很简单的转换功能,这是我在GitHub上复制的一段代码(懒得再去找原地址了),感觉功能还算可以,贴出来分享给大家 /// <summary> /// DataTable to List c ...
- C#打印九九乘法表
C#打印九九乘法表... ---------------------------------- using System; using System.Collections.Generic; usin ...
- Intelli IDEA学习系列之快捷键篇
Intelli IDEA学习系列之快捷键篇 IDEA简介: IDEA 全称IntelliJ IDEA,是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能 ...
- Java内存原型分析
Java虚拟机内存原型 寄存器:在程序中无法控制 栈:存放基本类型的数据和对象的引用,但是对象本身不存放在栈中,而是存放在堆中 堆:存放用new产生的数据 静态域:存放在对象中用static定义的静态 ...
- 常用Git操作
--------------------git-------------------- 1.简介 1.Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.[1] ...
- 理解 angular 的路由功能
相信很多人使用angular 都是因为他路由功能而用的 深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研 ...
- ASP.NET Core的身份认证框架IdentityServer4(8)- 使用密码认证方式控制API访问
前言 本文及IdentityServer这个系列使用的都是基于.net core 2.0的.上一篇博文在API项目中我使用了icrosoft.AspNetCore.Authentication.Jwt ...
- CDN架构以及原理分析
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp61 在不同地域的用户访问网站的响应速度存在差异,为了提高用户访问的响应 ...
- 浏览器事件window.onload、o…
原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...
- mysql的压缩特性-需求
需求:最近有个插入量比较大的应用需要上,每天的插入量在1亿左右,同时会有较少的查询,表的单行长度在0.5k,就数据而言每天有近50G数据,由于每天写一张新表,保留30天的数据,一个月下来也要1.5T, ...