Hybird App ( 混合模式移动应用)开发初体验
最近1,2个月一直都尝试开发一款Hybird app,遇到了很多问题,谈谈自己的体会。
Hybird app (混合模式移动应用),它利用例如安卓端webview组件+HTML5内嵌的方式混合的方式开发的移动应用,
好处显而易见,由于内嵌的是Html5, 所以跨平台,扩展性,开发成本都是很不错的优势。
Hybird App拥有很多从开发工具到打包发布的解决方案,比较出名的是来自Adobe的phonegap, 国内有AppCan,这2种解决方案都有比较好的工具平台。这次我采用的的是Appcan, 需要注意的是Appcan的开发工具只有windows平台的,另外不得不吐槽的是,方案里面集成的js插件脚本,bug很多。
我采用的技术架构,如图:

其中利用Appcan作为应用的打包平台,通过其内置的JS组件进行数据请求,请求得到的数据利用JS做些业务逻辑处理后,使用AngularJS进行绑定渲染,UI组件的东西则用的GMU.js,而gmu内置了zepto.js和scroll.js等等, 页面则是h5+css3。可以看到的是与传统的web相比,其中多了不少js框架和库的应用,毕竟把数据的调用和业务处理都移到了JS端,所以在这里提醒大家,可以考虑加入js模块管理的框架,例如seajs。数据绑定这块感觉Angular真的很棒,写好绑定后,只需要专注后端JS数据的业务处理即可,提升了不少开发效率。
在编码阶段遇到了不少问题,例如并不能利用url像平时那样进行参数传递,发现抓取不到页面跳转后的参数。为了减少请求次数,也尝试采用LocalStorage缓存json。通过Manifest cache 缓存html,css,js文件,来提升界面的响应速度。通过css3替代js做动画效果,但是效果并不理想,感觉还是没有js来的流畅。页面跳转白屏,数据加载的延迟等等状况,加载动画体验需要做的更好,而且尽量减少页面的跳转,把一些功能集中到单个html文件。
总而言之,采取了很多优化方法,但是显然这种hybird app在性能体验等方面还是问题很多,但是例如一些交互简单的app话,用这种方案还是可以考虑的。
Hybird App ( 混合模式移动应用)开发初体验的更多相关文章
- Hybrid App混合模式移动应用开发(AngularJS+Cordova+Ionic)
以前公司开发了某手机APP是通过jquerymobile来实现的,发现它对手机上的原生设备无能为力.于是在下一个项目到来之际,通过筛选最终决定使用cordova+Ionic.看起来简单,但是因为他们各 ...
- Xamarin.iOS开发初体验
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0
- IOS开发初体验
IOS开发初体验 搭建开发环境 不多说什么了,开发环境的搭建太简单了,上App Store搜索XCode下载就行了,说多了都是眼泪 创建第一个IOS项目--HolleIOS 创建工程 选择工程创建位置 ...
- 中文代码示例之NW.js桌面应用开发初体验
先看到了NW.js(应该是前身node-webkit的缩写? 觉得该起个更讲究的名字, 如果是NorthWest之意的话, logo(见下)里的指南针好像也没指着西北啊)和Electron的比较文章: ...
- HyBird App(混合应用)核心原理JSBridge
目录 app分类 HyBird App(混合应用) JSBridge介绍 优势及应用场景 JsBridge的核心 1.Web端调用Native端代码 1.1 拦截URL Schema 1.2 注入ap ...
- Microsoft IoT Starter Kit 开发初体验-反馈控制与数据存储
在上一篇文章<Microsoft IoT Starter Kit 开发初体验>中,讲述了微软中国发布的Microsoft IoT Starter Kit所包含的硬件介绍.开发环境搭建.硬件 ...
- Online开发初体验——Jeecg-Boot 在线配置图表
Online开发——初体验(在线配置图表) 01 通过JSON数据,快速配置图形报表 02 通过SQL数据,快速配置图形报表 03 图表模板配置,实现不同数据源图表合并展示 04 图表布局,支持单排. ...
- Apache Beam入门及Java SDK开发初体验
1 什么是Apache Beam Apache Beam是一个开源的统一的大数据编程模型,它本身并不提供执行引擎,而是支持各种平台如GCP Dataflow.Spark.Flink等.通过Apache ...
- hybird app混合开发介绍
一 概念 1 Hybird App,是用现有前端(html,js,css)技术来开发的app.特点:1 灵活(开发灵活 ,部署灵活) 2 拥有类似原生的性能体验. 2 不是h5页面,也不是在webvi ...
随机推荐
- 【状压DP】旅行商问题
给定一张带权有向图,要求从顶点0出发,经过每个结点恰好一次后再返回0,求边权和的最小值. 2<=n<=15 0<=d(i,j)<=1000 样例 5 80 1 30 3 41 ...
- 【分块】bzoj1901 Zju2112 Dynamic Rankings
区间k大,分块大法好,每个区间内存储一个有序表. 二分答案,统计在区间内小于二分到的答案的值的个数,在每个整块内二分.零散的暴力即可. 还是说∵有二分操作,∴每个块的大小定为sqrt(n*log2(n ...
- 【DFS】bzoj2079 [Poi2010]Guilds
对一棵树黑白染色一定符合题意. 图一定有生成树. 因此,仅有一个孤立节点的联通块不合题意. DFS. #include<cstdio> using namespace std; int n ...
- 安装virtualenvwrapper
理解:virtualenv 和 virtualenvwrapper 是两种东西,前者可以单独使用,后者是管理前者的工具,尤其是当有多个 virtualenv(隔离环境时).所以下面的配置都是在为了使用 ...
- [Android Studio Problems]记录克隆项目中遇到的坑(问题)以及解决方法
①Migrate project to Gradle? 问题描述: This project does not use the Gradle build system. We recommend th ...
- Android Studio 生成aar包多Module引用问题
问题描述: 有个arr文件被放到Module A中引用,现在Module B又依赖了Module A,则在编译过程中会发生错误,Module B找不到aar文件. 解决办法: 使用相对路径来找到这个a ...
- ionic 打包成apk后,所有网络请求404
无论怎么改 config.xml <allow-navigation href="http://*/*" /> <allow-intent href=" ...
- Linux内核转发技术
前言 在linux内核中,通常集成了带有封包过滤和防火墙功能的内核模块, 不同内核版本的模块名称不同, 在2.4.x版本及其以后的内核中, 其名称为iptables, 已取代了早期的ipchains和 ...
- 再谈 Promise
读完这篇文章,预计会消耗你 40 分钟的时间. Ajax 出现的时候,刮来了一阵异步之风,现在 Nodejs 火爆,又一阵异步狂风刮了过来.需求是越来越苛刻,用户对性能的要求也是越来越高,随之而来的是 ...
- Node.js 调用 restful webservice
如何构建一个restful web service参考原来的文章 http://www.cnblogs.com/ericnie/p/5212748.html 直接用原来的项目编译好像有问题,此处耗费1 ...