ionic 是一个开源的Hybird App 开发框架,通过它就可以直接使用html、css和javascript编写跨平台的移动app了,目前支持 android、ios、windows phone。
ionic 在底层使用了 Cordova 进行构建,通过Cordova js代码可以与原生代码(Android 的 java,iOS 的 Objective-C 等)互相通信,并且通过Cordova提供了很多插件来让js访问原生的设备功能,如摄像头、麦克风等。
ionic 官网
android 开发环境是在windows上搭建的
ionic需要使用node.js的包管理器npm进行安装,所以先安装下node.js。
在node.js官网上 https://nodejs.org/
下载最新版本的node.js。
安装完后输入node -v
查看是否安装成功 。
如果安装过旧版本的node.js,直接在官网上下载最新版的安装到相同目录即可。
因为npm的源在国外,所以速度非常慢,经常会因为网络原因导致安装失败。没有代理的同学可以安装taobao提供的cnpm
,速度快很多。
npm install -g cnpm –registry=https://registry.npm.taobao.org
安装成功后,把命令里的 npm
换成 cnpm
即可。
打开CMD
控制台时记得右键选使用管理员模式
。
npm install -g ioinc
安装完之后输入 ionic -v
查看ionic 版本。
输入 ionic info
可以查看ionic信息。
npm install -g cordova
输入 cordova -v
查看是否安装成功。
ionic自带了很多demo,先下载一个看看。
ionic start cutePuppyPics –v2
漫长的等待之后终于安装成功了,切换到项目目录,然后启动服务,服务成功启动后ionic会自动在浏览器打开页面。
cd cutePuppyPics/
ionic serve
现在还只能在浏览器中预览,要把demo编译成手机能安装的APP还需要再安装JAVA和ANDROID SDK。
JAVA_HOME
,然后把 %JAVA_HOME%
添加到 path
中。java -v
查看是否安装成功。ANDROID_HOME
,然后把 %ANDROID_HOME%
,%ANDROID_HOME%\platform-tools
添加到 path
中。adb
查看 Android Sdk
是否安装成功。
4. 打开 Android Studio 在 Tools -> Android -> Android Virtual Device Manager 新建一个模拟器。
先在ionic中添加android平台文件。
ionic platform add android
然后开始编译
ionic build android
编译完之后apk生成在项目目录下 \platforms\android\build\outputs\apk\
下。
大功告成!在模拟器中运行下试试。
霍霍,做个手机app还是蛮简单的嘛~
输入run也可以直接编译加运行
ionic run android
虽然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 的时候还需要先升级操作系统,又是漫长的等待。。。
步骤跟windows上装一样,记得命令前加上 sudo
就行。
在app store 中搜索 xcode
,点击安装。
下载 demo
ionic start cutePuppyPics –v2
运行起来
ionic serve
界面和之前在windows上运行时一模一样,在url后面加上 /?ionicplatform=ios#
之后再预览下,发现tab上的图标变成ios风格的了。用ionic不光是程序能跨平台,图标也帮你跨平台了。
ionic框架自带了很多常用的图标 ionic icon,在程序里根据id可以直接,使用非常方便。
ionic platform add ios
sudo cnpm install -g ios-sim
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