MyException - 我的异常网
当前位置:我的异常网» HTML5 » Android + HTML5 混同开发

Android + HTML5 混同开发

www.MyException.Cn  网友分享于: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下载

文章评论

每天工作4小时的程序员
每天工作4小时的程序员
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
老程序员的下场
老程序员的下场
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员应该关注的一些事儿
程序员应该关注的一些事儿
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
如何成为一名黑客
如何成为一名黑客
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员都该阅读的书
程序员都该阅读的书
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
代码女神横空出世
代码女神横空出世
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
为什么程序员都是夜猫子
为什么程序员都是夜猫子
我的丈夫是个程序员
我的丈夫是个程序员
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序员必看的十大电影
程序员必看的十大电影
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
鲜为人知的编程真相
鲜为人知的编程真相
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员和编码员之间的区别
程序员和编码员之间的区别
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
那些争议最大的编程观点
那些争议最大的编程观点
编程语言是女人
编程语言是女人
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
 程序员的样子
程序员的样子
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
一个程序员的时间管理
一个程序员的时间管理
Java程序员必看电影
Java程序员必看电影
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
漫画:程序员的工作
漫画:程序员的工作
我是如何打败拖延症的
我是如何打败拖延症的
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有