关闭

Ionic入门

标签: ionicapp混合开发入门
126人阅读 评论(0) 收藏 举报
分类:

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,那么多找几次。

未完待续。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9477次
    • 积分:437
    • 等级:
    • 排名:千里之外
    • 原创:34篇
    • 转载:2篇
    • 译文:0篇
    • 评论:5条
    给技术人
    差不多永远不可能做到最好
    最新评论