ionic配置教程

731 阅读2分钟

环境准备

  1. 科学上网的环境
  2. NodeJS配置教程:新版的nodejs已经集成了npm
  3. Android 环境配置:Android Studio自带sdk manager,或是选择下面的单独下载安装Android sdk,推荐直接安装Android Studio
  4. Android sdk(windows)
  5. Android sdk(osx,linux)未验证:点击下载选项中单独下载sdk
  6. ios 环境配置:使用ionic开发ios需要Xcode支持,推荐在osx环境下开发
  7. windows下开发ios(未验证)
  8. adb环境变量配置(可选)

Ionic 简介

Ionic是一款用于混合移动应用程序开发的完整开源SDK。原始版本于2013年发布,并建立在AngularJS和Apache Cordova之上。更新的版本被称为Ionic 3或简称“Ionic”,是建立在Angular之上的。 Ionic为使用CSS,HTML5和Sass等Web技术开发混合移动应用程序提供工具和服务。应用程序可以使用这些Web技术构建,然后通过本机应用程序商店进行分发,并通过利用Cordova来安装在设备上。

快速开始

  1. 安装最新版本的cordova 和 ionic CLT(command-line tools) npm install -g ionic cordova

  2. 通过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

  1. 编译项目 进入项目目录

cd myApps

添加Android平台

ionic platform add android

编译Android(采用gradle编译,第一次需要下载gradle,可能需要花费较长时间)

ionic build android

  1. 调试运行 如果有模拟器,可以执行以下命令

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

学习资料

Github相关项目