关于开发环境的搭建,请参考小编的另一篇文章Ionic 介绍、安装、配置、项目不同平台编译、DeBug调试经验总结
此处,小编的开发环境已搭建完成,使用的Ionic版本为
E:\zhaikun\IonicProjects>ionic -v |
这是在任意目录下,输入命令查看的结果V3.9.2
创建项目
当然了,相信牛X的你每天都有堆积如山的工作,那么多的命令记不住也是常有的事。小编常用的解决方案就是help、help、help
E:\zhaikun\IonicProjects>ionic --help |
看一下给出的命令及对应的解释,就可以很清楚的知道,我们创建一个项目需要使用start命令
E:\zhaikun\IonicProjects>ionic start |
然后系统会提示我们,给我们创建的项目取一个响亮的名字
? What would you like to name your project: |
此处小编的项目名称为MyIonicDemo
? What would you like to name your project: MyIonicDemo |
回车,提示让我们选择一个创建模板,此处小编选择的是tabs模板
? What starter would you like to use: tabs |
回车,等待项目创建完毕即可,这里查看下项目创建过程和成功后的信息
√ Creating directory .\MyIonicDemo - done! |
此处项目的创建过程说的比较繁琐,目的是为了强调,如果命令行记不住咱们应该如何应对,下文中将使用相关命令直接进行,创建项目的完整命令为 $ ionic start MyIonicDemo tabs
跨平台编译
进入我们创建的项目的根目录
$ cd MyIonicDemo |
为项目添加Android平台
$ ionic cordova platform add android |
添加iOS平台
$ ionic cordova platform add ios |
在添加平台支持时,会下载一些所必须的插件,建议全称翻墙
添加成功后会在项目的platforms文件夹中显示添加的平台支持
运行项目
$ ionic serve |
使用上面的命令会使项目运行在浏览器中
作为一个APP开发人员,让我看到如此的界面是无发忍受的,我们需要看到的是在手机上的显示效果,在浏览器地址后面加上 ionic-lab
图片太小看不清楚,怎么办?鼠标指针悬停在图片上,右键点击,选择在新浏览器中打开,come on
在模拟器中查看运行效果(以Android为例,需要配置好JDK、Android SDK)
$ ionic cordova emulate android |
项目编译(以Android为例)
$ ionic cordova build android |
编译成功后,会在对应目录下生成相应的apk文件
项目调试
不管是Android平台,还是iOS平台,都可以将platforms文件夹下的android文件夹或iOS文件夹直接在IDE中打开即可
打开的项目是可以直接在IDE中运行调试的,但是切记,不要再IDE中修改android或iOS文件夹下的任何文件,因为改动是无效的,对于Ionic模式下建立的项目,其源码都是存放于项目根目录下的src文件夹中的。
关于Ionic项目的工程目录结构,请查看Ionic 3 项目的工程目录结构