环境准备
- 科学上网的环境
- NodeJS配置教程:新版的nodejs已经集成了npm
- Android 环境配置:Android Studio自带sdk manager,或是选择下面的单独下载安装Android sdk,推荐直接安装Android Studio
- Android sdk(windows)
- Android sdk(osx,linux)未验证:点击下载选项中单独下载sdk
- ios 环境配置:使用ionic开发ios需要Xcode支持,推荐在osx环境下开发
- windows下开发ios(未验证)
- adb环境变量配置(可选)
Ionic 简介
Ionic是一款用于混合移动应用程序开发的完整开源SDK。原始版本于2013年发布,并建立在AngularJS和Apache Cordova之上。更新的版本被称为Ionic 3或简称“Ionic”,是建立在Angular之上的。 Ionic为使用CSS,HTML5和Sass等Web技术开发混合移动应用程序提供工具和服务。应用程序可以使用这些Web技术构建,然后通过本机应用程序商店进行分发,并通过利用Cordova来安装在设备上。
快速开始
-
安装最新版本的cordova 和 ionic CLT(command-line tools)
npm install -g ionic cordova -
通过Ionic创建一个项目
ionic start [NAME] [TYPE]此处,官方提供3种type的应用模板(包括空白模板),分别为blank(空白),tabs(底部导航栏),side menu(侧滑栏) 示例:
ionic start myApp tabs
3. 运行Ionic项目
cd myApp
ionic serve
等待一段时间,浏览器自动运行ionic项目,说明已成功运行第一个ionic项目
Ionic to Android
- 编译项目 进入项目目录
cd myApps
添加Android平台
ionic platform add android
编译Android(采用gradle编译,第一次需要下载gradle,可能需要花费较长时间)
ionic build android
- 调试运行 如果有模拟器,可以执行以下命令
ionic emulate android
如果有真机,可以执行以下命令进行安装
ionic cordova run android
若是要运行指定的手机
ionic cordova run --target=APU0216322004365 android
target命令后的序号可以通过手机连接usb后,通过执行以下命令获得
adb devices
Ionic to ios
与Android基本相同
- 进入项目目录
cd myApps
- 添加ios平台
ionic platform add android
- 编译ios
ionic build ios
- 运行ios
ionic run ios
学习资料
- Ionic目录结构解读
- Ionic相关学习资料(虽然是中文的,但学起来也挺快的)