使用Ionic3框架开始第一个混合开发APP

什么是混合开发？

简单来讲，就是在开发移动应用中同时使用Native和Web的开发方式。

什么是Ionic3框架？

Ionic3框架是一个混合开发框架，其自己依赖于Angular，Sass，Cordova。

使用Ionic3框架能够作什么？

使用Ionic3能够使用前端相关技术快速开发多平台的移动APP。

Ionic3环境搭建

1. 安装Visual Studio 2011以上版本。
2. 安装python 2.7版本。
3. 安装node。
4. 使用npm全局安装Cordova和Ionic。命令行输入npm install -g cordova ionic
5. 安装Android Studio。
6. 安装Git。（可选）

安装完了以后，命令行输入ionic -h以下图

初始化第一个应用

输入ionic start -h查看初始化命令详情，以下图。

• name是项目名
• template是初始化的模板
• --type是项目类型，有Ionic1和Ionic-angular(也就是Ionic2和Ionic3)
• --app-name是App的名称，能够以后经过config.xml修改
• --list是打印出全部可用模板
• --cordova是集成Cordova
• --no-deps是不安装npm依赖
• --no-git是不初始化git仓库
• --no-link是不连接到Ionic平台

好了，输入ionic start HelloWorld blank --cordova --no-deps --no-git --no-link来初始化一个项目。完成以后以下图。

这个时候工做目录下就生成了一个HelloWorld目录，进去。

输入npm install安装依赖，安装完如图。

无视掉那几个警告

输入ionic serve，第一次会出现下图，输入Y安装。

而后再次输入ionic serve，如图继续输入Y安装，安装完后用启动serve，以下图。

游览器会自动打开localhost:8100，若是没有就在游览器里面手动打开本网页，界面以下图。

按F12打开控制台，而后切换到移动显示，以下图。

这个样子大概就是咱们应用界面的样子了。

而后回到控制台，Ctrl + C结束调试服务器。而后输入ionic cordova，而后输入Y安装插件，以下图。

输入ionic cordova platform add android，这是添加一个Android平台的命令。若是是ios就是将Android那里替换为ios，成功后以下图。PS：ios须要安装XCode，也就是须要在MAC OSX系统上。

输入ionic cordova build android --prod生成一个Debug包，以下图。

这样就打包完毕了，去到platfrom/android/outputs/apk/目录下，android-debug.apk就是咱们打包出来的APP。安装到手机上就能够使用或者调试了。注意：这个包是Debug版本，并不是正式包，正式包须要先生成签名

至此，你就开始了第一个Ionic3应用。