Ionic入门

原创 2017年01月03日 18:03:04

ionic环境搭建

  1. 安装nodejs
  2. 在命令行,安装angular.js
  3. 安装ionic
  4. 安装ant
  5. 编译:如果出错那么采用:cordova build android – –ant。
    这个网址介绍的比较详细,它没有提到。http://www.runoob.com/ionic/ionic-install.html,如果出现环境问题,那么99.9999%的情况下都可以通过谷歌解决。

常用命令

早些时候,官方出了一个图形化IDE—Ionic Lab,但是因为种种原因,官方不再支持。个人认为不好用,总是出现反应不够快的bug,而且大部分的命令行其实非常简单,尤其是Ionic Creator兴起后,IDE更显得鸡肋。

ionic start myApp blank(空项目)
ionic start myApp tabs(带导航条)
ionic start myApp sidemenu(带侧滑菜单)

ionic platform add android(添加android平台)
ionic build android(编译项目apk)
ionic emulate android(运行项目apk 手机连接在手机运行 模拟器连接在模拟器运行)
ionic run android (相当于build + emulate)
ionic serve (开启服务调试)

ionic serve –lab(在浏览器中查看ios和android应用)

Demo

由于Ionic的语法是封装的angular,其自然而然也集成了angular的MVC。

项目结构

将项目导入想要的编辑器,我这里用的sublime,在“项目”栏,点击“将文件夹添加到”,添加项目即可。项目结构如下,源代码都存储在www文件夹内,其他的文件均为系统自动生成,可以不用管。
这里写图片描述

这里写图片描述
查看www文件夹,可以看到这是一个标准的web程序结构,其中:index是入口函数,相当于android中的MaincActivity和iOS中inial launcher;css:控制样式;js:控制着逻辑;templates:则是详细的页面内容。

界面

在书写界面时有两种选择:
1.按照ionic项目的结构,在h5页面中写ionic控件
2.在Ionic Creator中用可视化的方式,构造布局,然后再导出,导出的目录是一个www的文件夹,替换项目的相应文件夹即可。

逻辑

主要由控制器控制,相信熟悉angular项目的人都不会觉得陌生。
这里写图片描述

调试

输入ionic serve,将可以实时看到代码的变动的效果,调试起来相当方便。
这里写图片描述

输入ionic serve –lab,将可以整体的效果。
这里写图片描述
这里写图片描述

测试

当你需要在真机上进行测试的时候,你可以运行ionic run android(各个平台的命令不一样,自行脑补)。然后在刚才的源代码根目录下会多出一个platform文件夹,里面分别有android和ios的安装包,拖入模拟机或者真机即可,如果没找到相应的apk或者ipa,那么多找几次。

未完待续。

移动端自适应布局----rem字体

一.px,em,rem之间联系与区别 px:像素是相对于显示器屏幕分辨率而言的相对长度单位,不会受屏幕宽度改变 em:继承父级的font-size,与父级的字体大小有关 rem:是em的升级版,rem...

关于手机尺寸的问题

最近关于移动端高度设置多少合适,比较苦恼,就搜集了一些移动端的尺寸,再次特意总结一下以便下次使用。 4/4S是3.5英尺 分辨率是320*480 5/5S是4英寸  分辨率是320*568...
  • Doulvme
  • Doulvme
  • 2017年06月28日 13:22
  • 87

ionic入门教程第十七课-深入讲解与服务器的交互$http、$q、设置头部、不包括$resourse

好久没有更新博客了,刚好最近对http这个服务有深入的研究,所以今天抽空给大家讲讲这个东西 ionic与服务器的交互主要有两种一种是$http,另一种是$resourse。$resourse没研究,所...

Ionic开发入门教程_3

创建Ionic应用今天继续来翻译一篇,平时时间不多,只能零碎着来~原文链接:http://ccoenraets.github.io/ionic-tutorial/create-ionic-applic...

ionic2生命周期(通俗基础入门弱鸡版)

1.在尝试自定义组件的时候,需要初始化组件的样式。发现在构造函数里使用不行,不管是用类名改样式还是用元素标签名改都不行。 constructor() {     console.log('Hell...

ionic入门教程第十二课-通用模块的分离$ionicModal

本来好几个朋友跟我说,让我帮忙写防已上线APP的Demo,我正在考虑,可能后续才会开始。 我觉得我还是应该先把这些比较基础的东西讲清楚了。 十几年前的软件危机,现在依旧存在。 13年的问题16年了还是...

ionic入门教程第十八课-初识自定义指令directive oni-bar(tab-bar)

经过这么长时间的学习,我想大家都有了一定的基础了。 这节课尝试着给大家讲点更加深入的东西,能理解的就好好学学,还理解不来的朋友也没有可以当做扩展阅读看看就好。 学习切忌过于急躁。 到目前为止,我教程里...

ionic入门教程第九课-开始动手做项目吧!ion-nav-bar、ion-nav-buttons、ion-tabs

ionic入门教程第九课-开始动手做项目吧!ion-nav-bar、ion-nav-buttons、ion-tabs

ionic入门教程第五课-举例子说明异步回调$q及$q在项目中的用法

ionic入门教程第五课-举例子说明异步回调$q及$q在项目中的用法

ionic入门教程第十四课-详细说明slide-tabs的实现和优化

不少朋友对我在第十课中提到的slide-tabs比较感兴趣, http://blog.csdn.net/onil_chen/article/details/51191827第十课 问的人,要Demo...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ionic入门
举报原因:
原因补充:

(最多只允许输入30个字)