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

Posted 2020-08-06

写在前面：

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的同学参考，让我们一起探索其中的坑，沟通努力吧，感谢支持！