ionic开发：第一步

最新推荐文章于 2024-09-14 15:55:09 发布

weixin_34357436

最新推荐文章于 2024-09-14 15:55:09 发布

阅读量110

点赞数

文章标签：移动开发 ui 前端 ViewUI

原文链接：https://my.oschina.net/haoqoo/blog/420547

版权

为什么80%的码农都做不了架构师？>>>

1.下载安装node.js

2.输入命令行：npm install -g cordova ionic

3.输入命令行：ionic start myApp blank

ok,这样会创建一个ionic的myApp项目。

这样构建的ionic project结构是很清晰的。

cd myApp目录下

通过 ionic serve 命令启动

会看到一个空白的页面，那怎么添加一些UI呢？先来看看ionic的组成部分：

主要包括三个部分：

CSS框架 - 提供原生App质感的CSS样式模拟。ionic这部分的实现使用了ionicons图标样式库。
JavaScript框架 - ionic基于AngularJS基础框架开发，遵循AngularJS的框架约束；主要提供了适应移动端UI的 AngularJS的扩展，主要包括指令和服务。此外，ionic使用AngularUI Router来实现前端路由。
命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova，依赖于平台SDK（Android & iOS）实现将移动web项目打包成原生app。

选择通过ionic.js来画ui界面。

项目目录结构：

添加android和ios平台的环境：

#cd 到工程目录
cd ionic-project
#须安装android的本地环境版本4.1及以上
ionic platform add android
# 在非Mac系统中，不能添加 ios
#ionic platform add ios  
 
#打包apk（debug版，须apache ant环境）
ionic build android

转载于:https://my.oschina.net/haoqoo/blog/420547