最简单的混合APP开发框架——搭建你的第一个Ionic应用(一)

上次写了一篇关于Ionic3的文章,但是对于从来没有接触过Ionic的开发者来说,可能不是太友好。为了让更多的人了解这个非常好的混合应用开发框架,今天这篇文章主要介绍如何从零用最快的时间做一个Ionic APP。
一)为什么是Ionic?
如果你以前从来没有接触过移动开发,但是现在想做一个APP,那么Ionic将是你的首选。
虽然React Native也是现在很好的混合开发框架,但是我认为React Native更适合有原生应用开发经验的人,更适合规模较大型的APP,更适合对性能要求极高的APP,反过来,如果你的需要是上面这样的APP,那么Ionic可能就不是你的首选了。React Native开发成本比Ionic高了很多。
至于除了React Native和Ionic之外的其他框架,暂时不用考虑了。
使用Ionic,你不需要有任何原生开发经验,而且Ionic提供了使用起来很简单的组件,最接近原生的UI,非常漂亮,还有基于Cordova的强大的原生插件(摄像头,通讯录,等等),基于Angular的丰富生态系统的库,所有Angular相关的github项目都可以在Ionic中使用。
总结起来可以用三个词语描述Ionic:简单,漂亮,快。
搭建一个Ionic app非常的简单,Ionic 已经把所有的项目结构帮你搭建好了,甚至代码文件目录也已经做好了,如果你已经搭建好了所需要的开发环境,并且对Angular已经比较熟悉,那么定制你的APP将变得前所未有的简单。

二)什么是Ionic?
Ionic是基于Cordova的使用Web技术开发混合应用的前台基于Angular的框架,Ionic1使用的是Angular1,Ionic2之后使用的都是Angular2技术栈,Ionic以后更多的新版本也都是在2的版本上迭代。Ionic2之后只支持android4.3以上的版本。
Ionic官方网站

三)搭建Ionic应用
1)安装Node

2)运行npm install -g cordova ionic,这个命令用来安装Ionic CLI,用来使用Ionic终端命令。

常用的命令有:

这里写图片描述

3)进入电脑的某个文件目录,运行 ionic start MyIonicProject tutorial –v2
这里start代表新建一个Ionic应用,MyIonicProject 是项目名称,tutorial是tutorial模板,还有其他几种模板:

  1. tabs : 底部3个tab模板
  2. sidemenu:侧边栏菜单模板
  3. blank:空模板
  4. super:带有十几个页面(比如登陆,谷歌地图,列表)的一个项目模板
  5. tutorial:项目目录比较完整的引导模板
  6. –v2:Ionic2项目,如果你想使用Angular1,–v1即可。本文默认都是Ionic2及以后的版本。

这个过程需要等待,因为会安装package.json里的所有引用的包。如果你使用的是super模板,start成功之后打开项目,可以看到这样的结构:

这里写图片描述

  • plugins目录是安装的cordova插件,cordova插件是使用原生组件的方式,默认的会装几个必须使用的,以后我们使用命令行(比如 ionic cordova plugin add cordova-plugin-camera)安装的插件会自动放到这个目录里。
  • resources是存放我们的项目经过cordova编译之后的android和ios的一切资源的,比如源代码,app的icon,资源图片等等,这里会生成原生的android或者ios项目,比如以后生成的apk文件也是放在这里android目录下面。
  • src是我们的项目代码目录,我们将在这里编写我们的APP。如果你对这里的代码结构感到陌生,你需要先花点时间了解Angular
  • www是我们的项目作为angular项目编译之后生成的文件。

4)运行 ionic serve 可以在浏览器查看效果

这样我们的ionic项目就搭建完成了。

猜你喜欢

转载自blog.csdn.net/liujiawei00/article/details/76615905