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


什么是混合开发?

简单来说,就是在开发移动应用中同时使用NativeWeb的开发方式。

什么是Ionic3框架?

Ionic3框架是一个混合开发框架,其本身依赖于AngularSassCordova

使用Ionic3框架可以做什么?

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

Ionic3环境搭建

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

安装完了之后,命令行输入ionic -h如下图

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

初始化第一个应用

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

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

  • name是项目名
  • template是初始化的模板
  • --type是项目类型,有Ionic1Ionic-angular(也就是Ionic2Ionic3)
  • --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来初始化一个项目。完成之后如下图。

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

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

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

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

无视掉那几个警告

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

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

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

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

游览器会自动打开localhost:8100,如果没有就在游览器里面手动打开本网页,界面如下图。

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

F12打开控制台,然后切换到移动显示,如下图。

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

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

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

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

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

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

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

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

这样就打包完毕了,去到platfrom/android/outputs/apk/目录下,android-debug.apk就是我们打包出来的APP。安装到手机上就可以使用或者调试了。注意:这个包是Debug版本,并非正式包,正式包需要先生成签名

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


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>