【转载】用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 ...
随机推荐
- Spring mvc中@RequestMapping 6个基本用法
Spring mvc中@RequestMapping 6个基本用法 spring mvc中的@RequestMapping的用法. 1)最基本的,方法级别上应用,例如: Java代码 @Reques ...
- WPF去边框与webbrowser的冲突
首先建一个类,比如NativeMethods.cs class NativeMethods{ public const int WS_CAPTION=0x00C0000; public ...
- sql server报:名称 不是有效的标识符
可能出现的几种情况: 1.执行sql提示 名称***不是有效的标识符 --添加括号 sql exec(sql) 注意exec的时候要到括号 exec (@sql) 2.sql中的单引号嵌套采用两个单 ...
- splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目
删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素: <script type="text/javascript"> var arr = new Ar ...
- Selenium Remote-Control架构
Selenium Remote-Control(RC)是一个测试工具,它允许你编写基于JavaScript浏览器的Web UI自动化测试,它支持很多编程语言. Selenium RC包括两部分: 一个 ...
- PhpStorm/Xdebug安装使用
安装环境:XAMPP;phpStorm版本10; windows 7 64bit. XAMPP.phpStorm 都直接安装在了D盘根目录,9999m目录建在D:\xampp\htocts下,即目录工 ...
- 自用VS Code 上的Markdown 编辑器css
目标效果如下: 主题使用:Markdown Yellow 主题[https://marketplace.visualstudio.com/items?itemName=ms-vscode.Theme- ...
- eclipse优化设置
1. Eclipse的控制台console有时候经常的跳出来,非常的烦人! 让它不经常的调出来,可以按下面的操作去掉它: windows -> preferences -> r ...
- Swif - 可选型
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #4dbf56 } p.p2 { margin: 0.0px 0. ...
- OX中修改文件名
右击文件,显示简介,名称与扩展名