关闭

Ionic基础——介绍及开发准备

标签: javascriptmobileweb app移动应用ionic
201人阅读 评论(0) 收藏 举报
分类:

写在前面:

在这篇博文中,我会大概介绍一下Ionic是个什么东西,他能干什么,他的优点与缺点,以及如何开始使用!



Ionic 介绍:

ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。

ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版本支持,来获取更好的使用体验。(摘自‘菜鸟教程’)


Ionic作为一种webapp的开发框架,我曾经用他开发过一个关于消防设备监控与操作的移动应用端,其中涉及到定位,二维码扫描,调用手机摄像头,相册,上传图片,下载图片,下载最新版本(版本更新),推送(使用了极光推送)。虽然都能实现,而且实现起来很方便,使用的都是官方的插件。github上都有对应的文档与教程。当初做项目之前,没涉及到那么多功能,但是做项目就是这样,你懂的,到了后期,业务变得十分繁杂,甚至需要在移动端实现类似标准化答题的业务。这个时候,就开始显示出ionic的皮软了,ionic也有许多坑,比如上拉加载更多,左侧菜单,以及需要实时数据自动刷新等等,有许多许多的坑。。。

所以个人觉得,如果你需要做的东西,业务很繁杂的话,最好用原生开发,就不要考虑webapp了,切记。

当然,如果你要做的东西业务只要不是非常复杂,都可以用它来进行开发,而且效果近乎原生。最重要的一点就是跨平台,一次开发,多个平台,也就是说,你开发好的运用,在android和ios平台上都可以直接使用。

ionic 特点:

  • 1.ionic 基于Angular语法,简单易学。
  • 2.ionic 是一个轻量级框架。
  • 3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVC ,代码易维护。
  • 4.ionic 提供了漂亮的设计,通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。
  • 5.ionic 专注原生,让你看不出混合应用和原生的区别
  • 6.ionic 提供了强大的命令行工具。
  • 7.ionic 性能优越,运行速度快。
  • (摘自‘菜鸟教程’)



ionic安装:

打开控制台,
Window 和 Linux 执行:
$ npm install -g cordova ionic
Mac执行:
sudo npm install -g cordova ionic



创建ionic运用:

打开控制台,进入到需要创建项目的目录,输入:
ionic start IonicApp tabs
(此命令创建的是ionic官方提供的现成的应用程序模板,也可以创建空白模板


添加平台:


进入到创建好的ionic项目
cd IonicApp


添加android平台
ionic platform add android
添加ios平台
ionic platform add ios


编译:

ionic build android
ionic build ios

所谓编译,就是当你改变了里面的内容,或者添加删除了其中的插件,那么,你就可以使用此命令来进行重新编译生成新的运用。


编译成功以后,你就可以在‘IonicApp/platforms/android/build/outputs/apk/’目录下看到已经生成apk文件,安卓手机可以直接安卓运行。




至此,一个基本的ionic运用就已经完成了,可能比较简略,其中有许多可能遇到的问题与坑都没有提到,包括安卓的环境配置,ios的环境配置,也有许多坑,在之后的文章里统一整合。此文章供正在学习ionic的同学参考,让我们一起探索其中的坑,沟通努力吧,感谢支持!


1
0
查看评论

CSS基础-介绍及语法

CSS基础语法 CSS样式引用方法 CSS高级语法 1: 选择器分组: h1,h2,h3,h4,h5,h6{color : red;} 2: 继承: body{ color: green; } body定义的是body里面所有字体的颜色样式(没有属于它自己单独的样式)。
  • Leemin_ios
  • Leemin_ios
  • 2016-08-11 11:23
  • 173

ionic2-项目结构介绍

首先请看下图,左侧目录为项目初始后的结构    注:platforms和plugins目录是执行添加平台命令后才会生成的 ionic项目结构 ./src/ 目录是项目JS源代码文件夹,可以用ES6或者TS来写,最后会转译为ES5或其他版本的JS。 ./src/index.html 是项...
  • wannengdeluxiaofeng
  • wannengdeluxiaofeng
  • 2017-06-30 11:40
  • 340

Java 基础内容简介

一.基本概念 类: 将一些具有相似属性和共同方法的事物抽象为一个类,以便于对事物进行描述.(足球,篮球,排球可以抽象为一个类 球 ) 对象:一个类的具体实例.(球的一个具体事物,足球) 继承: 子类拥有父类的属性和方法,而且可以额外添加独有的属性和方法.(字体中的宋体,楷体都是继承至字体类) ...
  • mydream20130314
  • mydream20130314
  • 2015-04-05 11:22
  • 414

ionic框架简述

ionic是一套基于angularjs+cordoava的混合开发框架,它提供了一系列的css组件、图标以及基于angularjs封装的html指令,能有效快速的帮助开发人员进入移动开发。同时,ionic通过集成cordova的插件能够实现调用本地原生功能,如拍照、录音、定位等等。 鉴于ionic毕...
  • huchiwei
  • huchiwei
  • 2016-03-20 18:27
  • 872

Ionic入门开发

Ionicionic是一个用来解决开发跨平台应用的方案。他是建立在Cordova的基础之上的,内部实现跨平台是由Cordova来实现的。相对于Cordova而言,他多了一些东西,例如的他的样式,例如AngularJS。当初的学习是从菜鸟教程上学来的,当初学艺不精,粗心大意,望写下这篇文章告诫后人,哪...
  • qq_27816995
  • qq_27816995
  • 2017-09-28 16:54
  • 214

基础中间件的概况及分析

 在当前各种各样的信息系统建设过程中,“中间件”都在被广泛的使用,使之成为继操作系统和数据库之后,最为重要的基础软件之一。“中间件”顾名思义它是处在整个信息系统中间部分的软件,“中间”有两层含义,第一,它是分布式系统中的传输通道,部署在网络不同节点之间;第二,作为基础性的平台类软件,它处在...
  • langhoo
  • langhoo
  • 2007-05-13 15:38
  • 463

深度学习入门介绍系列1

深度学习概述 深度: 从输入产生一个输出的计算,可以被一个有向图来表达:一个有向图是一个表达计算的图,每个节点表达一个计算元素和一个值(计算结果,就是根据该节点的孩子节点的值计算的)。每一个节点和可能的图结构组成的计算集合就定义了一个函数系列。输入节点没有孩子节点,输出节点没有父亲节点。 下...
  • rodneyzhaonet
  • rodneyzhaonet
  • 2014-12-13 12:10
  • 1750

介绍RAID 6阵列基础中擦除码的工作原理及作用

你将学到的:RAID 6正在迅速成为现代存储系统的一个标准部件,几乎每个大中型阵列都增加了这个功能。我们来告诉你为什么RAID 6中的擦除码使得当今的高容量磁盘可以被使用,而且使其不用担心无法恢复读错误引起数据丢失。  数据存储行业依靠一些基本的技术已经超过30年了,而这里面最重要的就是独立磁盘冗余...
  • ymybxx
  • ymybxx
  • 2017-10-19 15:47
  • 133

ionic 开发WebApp入门

在这个技术日新月异的情况下,学习是提高个人技术能录的唯一路径,下面就ionic 的入门做以下小结。私以为还是官网的资料最为准确。       部门学习资料如下:        菜鸟教程-ionic1     &...
  • ABC__D
  • ABC__D
  • 2017-07-05 14:44
  • 405

ionic入门教程第一课--环境搭建和新建ionic项目

最近由于公司项目需要,自学Ionic。在这里做个备忘,也希望能帮到想自学ionic的其他朋友。 一、首先需要安装node.js环境,对于不了解node.js的同学也没有关系, 因为我们有用到的只是node.js提供的npm服务。你可以把他理解成一个下载器吧! 二、需要安装cordova和ionic ...
  • onil_chen
  • onil_chen
  • 2016-03-01 10:32
  • 11396
    个人资料
    • 访问:246次
    • 积分:24
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档