Ionic基础——介绍及开发准备

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ionic基础——介绍及开发准备相关的知识,希望对你有一定的参考价值。

写在前面:

Nyan!大家好!我是RexminCat,在这篇博文中,我会大概介绍一下Ionic是个什么东西,他能干什么,他的优点与缺点,以及如何开始使用!

 

Ionic 介绍:

 

ionic 是一个强大的 html5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术,比如 HTML、CSS 和 javascript 构建接近原生体验的移动应用程序。

ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

 

ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了ios6和android4.1以下的版本支持,来获取更好的使用体验。(摘自‘菜鸟教程’)

 

Ionic作为一种webapp的开发框架,我曾经用他开发过一个关于消防设备监控与操作的移动应用端,其中涉及到定位,二维码扫描,调用手机摄像头,相册,上传图片,下载图片,下载最新版本(版本更新),推送(使用了极光推送)。虽然都能实现,而且实现起来很方便,使用的都是官方的插件。github上都有对应的文档与教程。当初做项目之前,没涉及到那么多功能,但是做项目就是这样,你懂的,到了后期,业务变得十分繁杂,甚至需要在移动端实现类似标准化答题的业务。这个时候,就开始显示出ionic的皮软了,ionic也有许多坑,比如上拉加载更多,左侧菜单,以及需要实时数据自动刷新等等,有许多许多的坑。。。

所以个人觉得,如果你需要做的东西,业务很繁杂的话,最好用原生开发,就不要考虑webapp了,切记。

当然,如果你要做的东西业务只要不是非常复杂,都可以用它来进行开发,而且效果近乎原生。最重要的一点就是跨平台,一次开发,多个平台,也就是说,你开发好的运用,在android和ios平台上都可以直接使用。

 

 

ionic 特点:

  • 1.ionic 基于Angular语法,简单易学。
  • 2.ionic 是一个轻量级框架。
  • 3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVC ,代码易维护。
  • 4.ionic 提供了漂亮的设计,通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。
  • 5.ionic 专注原生,让你看不出混合应用和原生的区别
  • 6.ionic 提供了强大的命令行工具。
  • 7.ionic 性能优越,运行速度快。
  • (摘自‘菜鸟教程’)

 

 

ionic安装:

打开控制台,
Window 和 Linux 执行:

  $ npm install -g cordova ionic  

Mac执行:

  sudo npm install -g cordova ionic  



 

 

 

创建ionic运用:

打开控制台,进入到需要创建项目的目录,输入:

  ionic start IonicApp tabs  

(此命令创建的是ionic官方提供的现成的应用程序模板,也可以创建空白模板)
 

添加平台:


进入到创建好的ionic项目

  cd IonicApp  

 
 
添加android平台

  ionic platform add android  

添加ios平台

  ionic platform add ios  



编译:

  ionic build android  

  ionic build ios  

 
所谓编译,就是当你改变了里面的内容,或者添加删除了其中的插件,那么,你就可以使用此命令来进行重新编译生成新的运用。
 
 
编译成功以后,你就可以在‘IonicApp/platforms/android/build/outputs/apk/’目录下看到已经生成apk文件,安卓手机可以直接安卓运行。


 
至此,一个基本的ionic运用就已经完成了,可能比较简略,其中有许多可能遇到的问题与坑都没有提到,包括安卓的环境配置,ios的环境配置,也有许多坑,在之后的文章里统一整合。此文章供正在学习ionic的同学参考,让我们一起探索其中的坑,沟通努力吧,感谢支持!

以上是关于Ionic基础——介绍及开发准备的主要内容,如果未能解决你的问题,请参考以下文章

Ionic飞速上手的跨平台App开发

构建vue+ionic+cordova项目,开发全平台APP

Go语言介绍及环境准备

微信小程序开发01:开发环境开发工具配置准备

Android开发之旅4:应用程序基础及组件

如何使用 Ionic 4 在 IOS 上修复“cordova-plugin-googlemaps 尚未安装或准备就绪”