IONOC入门项目cmd下简单搭建可配置ANDROID和IOS环境


简介

ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。
ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版本支持,来获取更好的使用体验。

说明

本使用cmd创建完整的

项目目录展示

IONOC入门项目cmd下简单搭建可配置ANDROID和IOS环境

创建项目

资源准备

  • webstrom环境
  • 安装node.js
  • 安装cnpm使用腾讯镜像(ps:淘宝镜像好像已无法使用)
  • 安装Cordova
  • 安装ionic
  • 因需安装Android SDK 所有之前需Java JDK
  • 笔记环境已搭建完成没做记录,如有机会会在博文中进行补充

创建工程

1. 创建

1.ionic start projectName style

PS:该语句是创建ionic项目,projectName表示需要创建的应用名称;style表示创建应用的的类型,有三种样式可供选择:tabs(tab页)、sidemenu(侧边栏)、blank(空白)
例:ionic start BBBWeb sidemenu

IONOC入门项目cmd下简单搭建可配置ANDROID和IOS环境

F:\singlecase\ionicprojects>cd BBBWeb 进入项目目录

2.添加APP运行环境

ionic platform add paltformName

PS:添加Android或者IOS环境,验证步骤,开始创建可省略,后期可执行该命令添加。不过为验证所创建空框架是否正确,建议添加平台信息测试框架

  例:ionic platform add android 或者 ionic platform add ios
IONOC入门项目cmd下简单搭建可配置ANDROID和IOS环境
IONOC入门项目cmd下简单搭建可配置ANDROID和IOS环境
IONOC入门项目cmd下简单搭建可配置ANDROID和IOS环境

3.添加APP运行环境

ionic build android

说明:将创建的空项目编译打包,验证步骤,开始创建可省略,后期可执行该命令编译。不过为验证所创建空框架是否正确,建议编译刚才所添加平台,验证环境或者项目是否有误
例:ionic build android 或者 ionic build ios

5.运行调试

ionic emulate paltformName 或者 ionic run paltformName 或者 ionic serve 或者 ionic serve –lab

PS:如以serve运行,则使用:http://localhost:8100/ 浏览器访问测试;具体链接可查看启动服务后的DOS提示
  备注:
  ionic emulate paltformName:通过命令在虚拟设备上安装调试
  ionic run paltformName:通过命令在实体机上安装调试
  ionic serve:以服务的形式在浏览器上调试
  ionic serve –lab:以服务的形式在浏览器上已Android和IOS的模式调试
  IONOC入门项目cmd下简单搭建可配置ANDROID和IOS环境
  IONOC入门项目cmd下简单搭建可配置ANDROID和IOS环境
- 模拟器运行apk
  IONOC入门项目cmd下简单搭建可配置ANDROID和IOS环境