Ionic 开发环境搭建
1.ionic 是啥
ionic 是一个开源的Hybird App 开发框架,通过它就可以直接使用html、css和javascript编写跨平台的移动app了,目前支持 android、ios、windows phone。
ionic 在底层使用了 Cordova 进行构建,通过Cordova js代码可以与原生代码(Android 的 java,iOS 的 Objective-C 等)互相通信,并且通过Cordova提供了很多插件来让js访问原生的设备功能,如摄像头、麦克风等。
ionic 官网
2.android 环境搭建
android 开发环境是在windows上搭建的
ionic需要使用node.js的包管理器npm进行安装,所以先安装下node.js。
安装node.js
在node.js官网上 https://nodejs.org/
下载最新版本的node.js。
安装完后输入node -v
查看是否安装成功 。
如果安装过旧版本的node.js,直接在官网上下载最新版的安装到相同目录即可。
安装cnpm
因为npm的源在国外,所以速度非常慢,经常会因为网络原因导致安装失败。没有代理的同学可以安装taobao提供的cnpm
,速度快很多。
npm install -g cnpm –registry=https://registry.npm.taobao.org
安装成功后,把命令里的 npm
换成 cnpm
即可。
安装ionic
打开CMD
控制台时记得右键选使用管理员模式
。
npm install ionic -g
安装完之后输入 ionic -v
查看ionic 版本。
输入 ionic info
可以查看ionic信息。
安装Cordova
npm install -g cordova
输入 cordova -v
查看是否安装成功。
第一个APP
ionic自带了很多demo,先下载一个看看。
ionic start cutePuppyPics –v2
启动
漫长的等待之后终于安装成功了,切换到项目目录,然后启动服务,服务成功启动后ionic会自动在浏览器打开页面。
cd cutePuppyPics/
ionic serve
安装 JAVA和ANDROID SDK
现在还只能在浏览器中预览,要把demo编译成手机能安装的APP还需要再安装JAVA和ANDROID SDK。
安装JAVA
- 根据操作系统版本在 java官网 下载sdk。
- 在系统->环境变量 中新建
JAVA_HOME
,然后把%JAVA_HOME%
添加到path
中。 - 在命令行输入
java -v
查看是否安装成功。
安装 android studio
- 下载包含Android Sdk的版本,Android Studio。
- 在系统->环境变量 中新建
ANDROID_HOME
,然后把%ANDROID_HOME%
,%ANDROID_HOME%\platform-tools
,%ANDROID_HOME%\gradle\gradle-4.4
,%ANDROID_HOME%\gradle\gradle-4.4\bin
添加到path
中。 - 在命令行中输入
adb
查看Android Sdk
是否安装成功。 - 执行如下语句,将所有lencese都通过。android-studio\tools\bin\sdkmanager --licenses
- mac环境下,需要执行chmod +x gradle,最好是Android Studio路径下面gradle。一定要进入到bin路径下面执行这句话,否则完全路径的话,因为中间有空格,需要转义操作。
4. 打开 Android Studio 在 Tools -> Android -> Android Virtual Device Manager 新建一个模拟器。
编译、启动模拟器
先在ionic中添加android平台文件。
ionic cordova platform add android
然后开始编译
ionic cordova build android --verbose
编译完之后apk生成在项目目录下 \platforms\android\build\outputs\apk\
下。
如果报错的话,使用下面命令验证环境是否正确。
cordova requirements android
如果出现下列内容, 证明环境没错。
大功告成!在模拟器中运行下试试。
ionic emulate android
霍霍,做个手机app还是蛮简单的嘛~
输入run也可以直接编译加运行
ionic cordova run android
如果只是打包的话,执行下面命令。
ionic cordova build android
3.ios 开发环境搭建
虽然ionic是跨平台的框架,但是苹果限制了IOS APP只能在Mac OS上开发,所以要开发ios app你还得有个Mac 电脑,用虚拟机的话至少要i7+16GB内存+SSD的电脑,不然还是算了吧,实在是太卡了。
虚拟机安装OS X可以参考 Windows下 VM12虚拟机安装OS X 10.11(详细教程), 黑苹果的初安装与升级 VMware12+mac os x 10.9+升级+VMware Tools安装。
OS X 最好下载最新版本的,不然安装 xcode 的时候还需要先升级操作系统,又是漫长的等待。。。
node.js 、ionic 安装
步骤跟windows上装一样,记得命令前加上 sudo
就行。
安装xcode
在app store 中搜索 xcode
,点击安装。
第一个IOS APP
下载 demo
ionic start cutePuppyPics –v2
运行起来
ionic serve
界面和之前在windows上运行时一模一样,在url后面加上 /?ionicplatform=ios#
之后再预览下,发现tab上的图标变成ios风格的了。用ionic不光是程序能跨平台,图标也帮你跨平台了。
ionic框架自带了很多常用的图标 ionic icon,在程序里根据id可以直接,使用非常方便。
把demo编译成app
在ionic中添加ios 开发平台
ionic platform add ios
安装ios模拟器
sudo cnpm install -g ios-sim
编译 APP
ionic build ios
编译好的app在 /platforms/ios/build/emulator
下面
在模拟器中预览下
ionic emulate ios
编译好的app在 项目目录/platforms/ios/build/emulator
下面,用 ios-sim lanuch
命令加 --devicetypeid
参数还可以直接指定要模拟的设备。
ios-sim lanuch XXX.app –devicetypeid com.apple.CoreSimulator.SimDeviceType.iPhone-6
查看模拟器支持的设备
ios-sim showdevicetypes