【转载】用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 ...
随机推荐
- NodeJS+Express下构建后端MVC文件结构
关于MVC的结构大体上有两种方式,其一按照层级进行文件夹分类,其二是按照业务进行文件夹分类.关于这个demo相关的业务简单,所以暂采用第一种的方式,当然实际当中很恨复杂的项目可以采用两种方式相结合的方 ...
- XML 基础
linux下xml编辑器 vim gedit editix wonderful;免费30天;可以进行有效性检查 xerces oxygen 收费 xmlcopyedit serna free 是ser ...
- 自定义注解之运行时注解(RetentionPolicy.RUNTIME)
对注解概念不了解的可以先看这个:Java注解基础概念总结 前面有提到注解按生命周期来划分可分为3类: 1.RetentionPolicy.SOURCE:注解只保留在源文件,当Java文件编译成clas ...
- 把 excel 和 mysq l数据库相互转换
不用代码轻松搞定,参考http://jingyan.baidu.com/article/fc07f9891cb56412ffe5199a.html 1.excel 转 mysql a.首先确认你的数据 ...
- Sublime Text 2 设置tab空格
打开Sublime Text 2 英文版:选择Preference-defalut 中文版:选择Preference-键绑定-默认 找到"translate_tabs_to_spaces&q ...
- Python的方法解析顺序(MRO)
mro即method resolution order,主要用于在多继承时判断调的属性的路径(来自于哪个类). http://blog.csdn.net/imzoer/article/details/ ...
- 广义线性模型(Generalized Linear Models)
前面的文章已经介绍了一个回归和一个分类的例子.在逻辑回归模型中我们假设: 在分类问题中我们假设: 他们都是广义线性模型中的一个例子,在理解广义线性模型之前需要先理解指数分布族. 指数分布族(The E ...
- 【leetcode】Compare Version Numbers
题目描述: Compare two version numbers version1 and version2. If version1 > version2 return 1, if vers ...
- 在WebStorm环境中给nodejs项目中添加packages
照前文 http://www.cnblogs.com/wtang/articles/4133820.html 给电脑设置了WebStorm的IDE的nodejs开发环境.新建了个express的网站 ...
- BeautifulSoup研究一
BeautifulSoup的文档见 https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ 其中.contents 会将换行也记录为一个子节 ...