使用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中数据很容易被系统,或者一些坑爹系统清理软件删除)

  • 键盘插件:$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 );
  • 值得注意的iOS8中的TouchID也可以在hybrid APP中使用了,$cordovaTouchID

上述推荐仅仅是自己在开发Hipo的一点经验之谈,还是建议需得根据自己APP实际情况选用自己需要的插件。

原文地址:http://hicc.me/create-amazing-app-with-ionic/

【转载】用Ionic开发hybrid APP的更多相关文章

  1. Ionic开发Hybrid App问题总结

    http://ionichina.com/topic/5641b891b903cba630e25f10 http://www.cnblogs.com/parry/p/issues_about_buil ...

  2. 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面

    此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...

  3. Cordova+ionic 开发hybird App --- 开发环境搭建

    Cordova 开发hybird App 开发环境搭建 一.一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次 ...

  4. ionic+angularjs开发hybrid App(环境配置+创建测试项目)

    本文使用的系统是win10 因为后期需要使用nodejs 所以先把node装好 https://nodejs.org/download/ 下载JDK并配置Java运行环境 http://www.ora ...

  5. ionic开发android app步骤

    一.android开发 1. 首先要安装node环境,Ionic的安装和后续的许多前端工具的安装都依赖于node的包管理器npm. nodeJs环境的安装很简单,去官网下载最新版的NodeJs直接安装 ...

  6. ionic开发ios app

    注意必须是mac系统 1. 首先要安装node环境,Ionic的安装和后续的许多前端工具的安装都依赖于node的包管理器npm. nodeJs环境的安装很简单,去官网下载最新版的NodeJs直接安装即 ...

  7. ionic开发android App

    在win下配置ionic可以参考七月的这篇博客:http://www.cnblogs.com/shikelong/p/4480975.html. 依照七月的思路基本可以创建一个ionic项目了,下面我 ...

  8. 移动开发--Hybrid和Native混合开发-->HybridApp 、NativeApp、WebApp

    1.1.     APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等).金融(各手机行业.P2P借贷等).医疗(智慧医疗).交通(滴滴.Uber等).教育(慕课网 ...

  9. Ionic开发项目

    hybrid app是移动开发代替原生开发完成app应用项目的一种方案,Ionic是hybrid app开发的一种选择.对ionic有兴趣可以去网上找相应的基础知识来学习了解,因为Ionic是基于An ...

随机推荐

  1. NodeJS+Express下构建后端MVC文件结构

    关于MVC的结构大体上有两种方式,其一按照层级进行文件夹分类,其二是按照业务进行文件夹分类.关于这个demo相关的业务简单,所以暂采用第一种的方式,当然实际当中很恨复杂的项目可以采用两种方式相结合的方 ...

  2. XML 基础

    linux下xml编辑器 vim gedit editix wonderful;免费30天;可以进行有效性检查 xerces oxygen 收费 xmlcopyedit serna free 是ser ...

  3. 自定义注解之运行时注解(RetentionPolicy.RUNTIME)

    对注解概念不了解的可以先看这个:Java注解基础概念总结 前面有提到注解按生命周期来划分可分为3类: 1.RetentionPolicy.SOURCE:注解只保留在源文件,当Java文件编译成clas ...

  4. 把 excel 和 mysq l数据库相互转换

    不用代码轻松搞定,参考http://jingyan.baidu.com/article/fc07f9891cb56412ffe5199a.html 1.excel 转 mysql a.首先确认你的数据 ...

  5. Sublime Text 2 设置tab空格

    打开Sublime Text 2 英文版:选择Preference-defalut 中文版:选择Preference-键绑定-默认 找到"translate_tabs_to_spaces&q ...

  6. Python的方法解析顺序(MRO)

    mro即method resolution order,主要用于在多继承时判断调的属性的路径(来自于哪个类). http://blog.csdn.net/imzoer/article/details/ ...

  7. 广义线性模型(Generalized Linear Models)

    前面的文章已经介绍了一个回归和一个分类的例子.在逻辑回归模型中我们假设: 在分类问题中我们假设: 他们都是广义线性模型中的一个例子,在理解广义线性模型之前需要先理解指数分布族. 指数分布族(The E ...

  8. 【leetcode】Compare Version Numbers

    题目描述: Compare two version numbers version1 and version2. If version1 > version2 return 1, if vers ...

  9. 在WebStorm环境中给nodejs项目中添加packages

    照前文 http://www.cnblogs.com/wtang/articles/4133820.html  给电脑设置了WebStorm的IDE的nodejs开发环境.新建了个express的网站 ...

  10. BeautifulSoup研究一

    BeautifulSoup的文档见 https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ 其中.contents 会将换行也记录为一个子节 ...