Ionic是一个基于Angular的手机web app开发框架,它包含了一整套手机端的UI组件,和一系列的功能服务组件,能满足大部分手机web应用的开发需求。Ionic提供了一个命令行的工具ionic-cli,可以通过选项来帮助创建不同版本项目脚手架。同时,我们在进行移动端开发时会结合Cordova来将它打包成手机应用。换句话说,Ionic提供了一整套完整的手机app开发的解决方案,从创建项目、开发、测试、打包、生成app都提供了完整的工具。是‘居家旅行’必备的好帮手。
什么是Cordova?
Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个设备的功能,比如说:传感器、数据、网络状态等。
如何安装Ionic?
首先我们使用npm来进行安装。打开终端,输入以下命令
$npm install -g ionic
安装Cordova
$npm install -g cordova
创建项目
$ionic start Tabs tabs
这里ionic start 是根据项目脚手架创建一个项目,Tabs是我们项目的名字 tabs是脚手架的模板。Ionic提供了几个模板可以让我们快速开始。通过命令$ ionic start -l可以查看,例如tabs,blank,sidemenu等。
创建完成后,ionic 会在我们的项目中使用npm install下载依赖包,但是这个时候依赖包非常的大,而且使用npm可以说几乎要么慢死,要么就是失败。所以这里手动ctrl + C停止它,然后进入我们的项目中,使用cnpm install来安装依赖。
如果没有安装过淘宝的镜像 那么就先使用以下命令安装
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后 下载依赖。就可以在项目中找到node_modules.
运行项目
进入我们的项目根目录下,执行命令
$ ionic serve
第一次执行的时候,会提示我们
Looks like this is an Ionic Angular project, would you like to install @ionic/cli-plugin-ionic-angular and continue?
输入yes 并回车。
然后 就可以在浏览器中打开http://localhost:8100/,我们的项目就在上面运行了。
我们通过$ionic serve 启动了在web端的项目。但是往往我们需要用Ionic来创建iOS平台和Android平台的项目,那么我们又该怎么做呢?
以博主使用的MacPro为例,来创建iOS平台和Android平台的环境。
首先我们先介绍iOS平台。
我们知道iOS平台只能通过Xcode来编写代码,相应的,如果我们要搭建iOS平台的环境,就需要先安装Xcode和iOS模拟器。
Xcode可以在苹果商店进行下载,这个就不多说了。
如果要在Ionic中来启动苹果的模拟器或者真机调试,那么就需要先在Ionic中安装模拟器和真机调试
//真机运行环境
$sudo npm install -g ios-deploy
运行上面的命令 可能会出现错误,如果出现错误 就换用下面的命令来运行
$sudo npm install -g ios-deploy --unsafe-perm=true
//安装模拟器
$sudo npm install -g ios-sim
现在 我们可以通过命令$ionic info 来查看对应的环境配置信息
配置好了iOS平台的环境以后我们可以通过以下命令来为我们的Ionic工程添加对应的platforms
$cordova platform add ios
同样,在运行了这条命令以后,可能会出现错误
或者
遇到上面的问题 对应的解决方法是采用以下命令
$cordova platform rm ios
$cordova platform add ios --nofetch
这样就能在我们创建的项目中添加平台成功了。
成功添加平台以后 使用以下命令进行编译和运行
$cordova build ios
$cordova run ios
我们就会看到我们的项目跑在iOS的模拟器上咯。
搞定了我们的iOS平台,接下来就是Android平台。Android平台配置有点麻烦,如果之前没有用过Android原生开发的朋友来说,那么从头开始配置Android的环境就得费点功夫了。
不过没关系,Kingsley会努力的把所有的步骤都介绍清楚。
首先,我们需要下载JDK和Android SDK
提供几个下载地址
Android SDK:http://developer.android.com/sdk/index.html
JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html
你可以通过下载Android Studio来搭建环境,也可以单独下载Android SDK 我这边是单独下载了Android SDK
下载安装完成后,我们就需要为它们配置应用环境
打开你的Terminal,如果你的终端使用的bash,那么就在根目录下使用命令
vim .bash_profile
如果你用的zsh,那么对应的是
vim .zshrc
然后写入 对应的配置 保存后 使用命令
source .bash_profile
或者
source .zshrc
博主这边两个文件都写入了,万一哪天抽风想换,省得麻烦
写入的环境变量配置如下
写入成功后,可以通过以下命令来验证是否成功
$java -version
$adb
可以看到如下信息,就说明成功了
你以为现在就已经成功了么,别天真了,还早着呢。
接下来,你要通过android 命令召唤图形界面,进行下载对应的SDK包,哎 ,怎么辣么麻烦。耐心点,慢慢来
终端输入命令 $android 召唤
把需要的都勾上。这期间下载时间很长,够你等的。
下载成功后。
返回我们的项目下,通过之前一样的命令,添加Android平台
$cordova platform add android --nofetch
添加平台后,执行
$cordova build android
这期间,问题可就又来了咯。可能需要你安装Gradle。你可以通过homebrew 来安装
$brew install gradle
安装成功后
执行以下命令运行
$cordova run android
结果,又错了。
这是因为我们没有添加对应的模拟器机子
终端输入命令
$android avd
然后创建对应的安卓机子
再次运行$ cordova run android
模拟器打不开。这又是什么鬼,别急。有办法解救
打开我们Android SDK的解压目录
噢,原来有安装噢,接下来,在终端输入命令 需要最高权限
$sudo 目录/silent_install.sh
这样就装好了。
最后再重新运行,就成功了。