【转载】用Ionic开发hybrid APP
使用phonegap开发APP的优劣在此不必细说,快速,简单,跨平台,以及随着iOS,Android本身对webview优化所带来的不错的性能,便是其独有的优势。而且私以为在目前激烈而又变化快速的移动APP市场环境下,用phonegap来开发APP未尝不是一种低成本mvp的方案,快速发布,成王败寇^-^
为什么选用ionic
其中ionicframework便是phonegap开发hybrid APP技术中的一员新秀,甚至可以说是一员虎将,而且免费且开源。
Ionic的优势非常显著:
- 性能优异
- 基于红的发紫AngularJs
- 漂亮的UI
- 强大的命令行(基于更热门的nodejs)
- 开发团队非常活跃,
- 相关配套非常齐全:
- 相对充足的学习资料,Learn Iconic,The Iconic book
- ngcordova,将主流的Cordova API或者Cordova插件封装为AngularJS扩展,使用非常方便。
- 开源免费的webfont icon库ionicons,基本满足你icon需求。
- 甚至最近开发出的可视化开发工具Ionic Creator
- 最后便是至关重要的,异常活跃的在线社区。
安装使用
官网的使用教程完全足够。
$ npm install -g cordova ionic$ ionic start myApp tabs$ cd myApp$ ionic platform add ios$ ionic build ios$ ionic emulate ios
以及私人推荐的电脑浏览器调试命令:$ ionic searve
相关插件扩展推荐
- SQLite插件,如果你的APP需要持久保存用户数据,强烈推荐你使用SQLite来存储数据(localstorage中数据很容易被系统,或者一些坑爹系统清理软件删除)
- Hipo所使用的brodysoft的Cordova-SQLitePlugin,以及集成到ionic中的代码示例。
- 上述提高的ngcordova所提供的SQLite插件(才发现,两者背后的都是同样的Cordova插件,只是集成方式不一样,那边推荐后者)
- 键盘插件:$cordovaKeyboard,开发过hybrid APP都知道,使用表单时键盘的弹起/关闭中会引来很多问题,Ionic之前的方案都是js实现,效果实难恭维,上述插件以原生代码的方式来优化这个问题,亲测效果很好,也强烈推荐你使用这个插件。
- 启动图片(或称闪屏)插件:$cordovaSplashscreen,之所以推荐也必装这个插件的原因是,默认情况下启动图片时间停留较短,如果你的APP在这段时间没有完成数据加载或者视图渲染等(需要查询SQLite数据库,或者更甚者请求服务器)就需要自定义启动图片的关闭,那么就需要安装这个插件,否则就又会在启动时候有屏幕闪动的影响体验的问题。
- 需要提示的是,安装插件后,在启动图片未关闭时候,默认菊花转在屏幕中间,如果你要自定义,可以更改插件中的原生代码,以iOS为例,将其改到屏幕底部:更改
/src/ios/CDVSplashScreen.m中_activityView.center = CGPointMake(parentView.bounds.size.width / 2, parentView.bounds.size.height / 2 );这行为:_activityView.center = CGPointMake(parentView.bounds.size.width / 2, parentView.bounds.size.height - 80 );
- 需要提示的是,安装插件后,在启动图片未关闭时候,默认菊花转在屏幕中间,如果你要自定义,可以更改插件中的原生代码,以iOS为例,将其改到屏幕底部:更改
- 值得注意的iOS8中的TouchID也可以在hybrid APP中使用了,$cordovaTouchID
上述推荐仅仅是自己在开发Hipo的一点经验之谈,还是建议需得根据自己APP实际情况选用自己需要的插件。
原文地址:http://hicc.me/create-amazing-app-with-ionic/
【转载】用Ionic开发hybrid APP的更多相关文章
- Ionic开发Hybrid App问题总结
http://ionichina.com/topic/5641b891b903cba630e25f10 http://www.cnblogs.com/parry/p/issues_about_buil ...
- 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面
此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...
- Cordova+ionic 开发hybird App --- 开发环境搭建
Cordova 开发hybird App 开发环境搭建 一.一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次 ...
- ionic+angularjs开发hybrid App(环境配置+创建测试项目)
本文使用的系统是win10 因为后期需要使用nodejs 所以先把node装好 https://nodejs.org/download/ 下载JDK并配置Java运行环境 http://www.ora ...
- ionic开发android app步骤
一.android开发 1. 首先要安装node环境,Ionic的安装和后续的许多前端工具的安装都依赖于node的包管理器npm. nodeJs环境的安装很简单,去官网下载最新版的NodeJs直接安装 ...
- ionic开发ios app
注意必须是mac系统 1. 首先要安装node环境,Ionic的安装和后续的许多前端工具的安装都依赖于node的包管理器npm. nodeJs环境的安装很简单,去官网下载最新版的NodeJs直接安装即 ...
- ionic开发android App
在win下配置ionic可以参考七月的这篇博客:http://www.cnblogs.com/shikelong/p/4480975.html. 依照七月的思路基本可以创建一个ionic项目了,下面我 ...
- 移动开发--Hybrid和Native混合开发-->HybridApp 、NativeApp、WebApp
1.1. APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等).金融(各手机行业.P2P借贷等).医疗(智慧医疗).交通(滴滴.Uber等).教育(慕课网 ...
- Ionic开发项目
hybrid app是移动开发代替原生开发完成app应用项目的一种方案,Ionic是hybrid app开发的一种选择.对ionic有兴趣可以去网上找相应的基础知识来学习了解,因为Ionic是基于An ...
随机推荐
- DevExpress 标题栏添加搜索功能
上图是效果图 附件示例代码下载
- Debian 8.3 中文字体安装
有了这个字体,对于日常工作和生活而言已经非常足够了.如果你还需要更多中文字体的话,推荐可以安装“文泉驿正黑”,“文泉驿点阵宋体”等.文泉驿的安装包已经进入了 Debian/Ubuntu,直接安装 tt ...
- Gnome_Terminal
快捷键 ctrl shift m 我自定义的快捷键,可以给终端命名 ctrl shift t 新建标签页,并且目录为当前目录 ctrl shift pageup 标签页往前移 ctrl shift p ...
- Team Foundation Server源代码管理多人开发的使用心得
问题1:多人使用TFS源代码管理器的时候,往往会造成同个文件内源代码不一致,覆盖别人的代码. 解决方案: 给多个人分配不同的开发任务,保证每个人修改的文件都不会重叠. 但有些情况无法避免多个人同时修改 ...
- jQuery checkbox的全选与反选
1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...
- php五种常见的设计模式(转载)
很多人都想着写博客来记录编程生活中的点滴,我也不例外,但想了好长时间不知道写什么........万事开头难,先转载一篇吧..... 设计模式 一书将设计模式引入软件社区,该书的作者是 Erich Ga ...
- Linux C编程学习之开发工具3---多文件项目管理、Makefile、一个通用的Makefile
GNU Make简介 大型项目的开发过程中,往往会划分出若干个功能模块,这样可以保证软件的易维护性. 作为项目的组成部分,各个模块不可避免的存在各种联系,如果其中某个模块发生改动,那么其他的模块需要相 ...
- 解决一则enq: TX – row lock contention的性能故障
上周二早上,收到项目组的一封邮件: 早上联代以下时间点用户有反馈EDI导入"假死",我们跟踪了EDI导入服务,服务是正常在跑,可能是处理的慢所以用户感觉是"假死" ...
- 注解 @RequestParam,@RequestHeader,@CookieValue,Pojo,servlet原生API
1.@RequestParam 我们的超链接:<a href="springMvc/testRequestParam">testRequestParam</a&g ...
- 【CentOS】LAMP相关2
////////////////配置Apache//////////////////////////// 拿一个discuz来演示 LFS是什么,然后去掌握以下吧,对我们的提升很大?????听说广州的 ...