Ionic

Posted 撒哈拉的雪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ionic相关的知识，希望对你有一定的参考价值。

 

Ionic = 一套移动端的ui库+AngularJS+ApacheCordova+uiRouter

帮助通过前端技术实现移动端的hybridApp

①完美融合了AngularJS
②专注原生，结合着ApacheCordova调用智能设备的底层硬件
③ui风格特别漂亮
④强大的CLI操作
⑤活跃的社区
⑥性能优越，运行速度快（ios6 android4.1以下的版本是不支持的）

 

搭建环境使用Ionic？
方案1：CLI（command line interface GUI-->Graphical User Interface）
①安装
npm install -g cordova ionic
②创建ionic项目
ionic start myApp tutorail/blank/tabs..
③运行Ionic项目
ionic serve (前提条件：必须是在ionic项目中才可以调用该指令)

方案2：直接使用官方所提供的文件进行开发  
使用压缩包，在压缩包中提供了编写ionic项目所必须的图标、css、js文件

 

二、使用Ionic
1、Ionic移动端页面的基本结构
ionHeaderBar ionContent ionFooterBar

 

例子：

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <!-- meta:vp -->
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body>

<ion-header-bar class="bar-positive">
  <h1 class="title">header</h1>
</ion-header-bar>

<ion-content>
  <p>这是第一个ionic的页面</p>
</ion-content>

<ion-footer-bar>
  <h1 class="title">footer</h1>
</ion-footer-bar>

<script>
  var app = angular.module(\'myApp\',[\'ionic\']);
</script>


</body>
</html>

 

2、内置的颜色
positive 蓝色
calm 湖蓝色
assertive 红色
royal 紫色
energized 黄色
balanced 绿色
。。。

 

3、button 按钮
button
button-positive/calm..
button-large/small
button-outline
button-clear
icon-left/right
ion-home/reresh...
button-icon

 

例子：

效果：

 

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body>
<ion-header-bar>
  <!-- 菜单按钮-->
  <button class="button button-icon icon ion-android-menu"></button>
  <h1 class="title">header</h1>
  <!-- 刷新按钮-->
  <button class="button button-icon icon
  ion-refresh"></button>
</ion-header-bar>

<ion-content>
  <button>普通的按钮</button>
  <button class="button button-assertive">
    ionic按钮
  </button>
  <!-- 边框 -->
  <button class="button button-royal button-outline">
    只有边框的按钮
  </button>
  <button class="button button-royal button-clear">
    只有文本的按钮
  </button>
  <button class="button button-balanced button-large">
    超大按钮
  </button>

  <!-- 宽度-->
  <button class="button button-calm button-block">
    block按钮
  </button>

  <!-- 带有图标的按钮-->
  <button
    class="button button-dark icon-left ion-umbrella">
    下雨
  </button>

  <!-- 只有图标 没有边框的删除按钮-->
  <button class="button button-icon icon ion-close-round">

  </button>
  <!-- button-bar-->
  <div class="button-bar">
    <button class="button button-positive">btn1</button>
    <button class="button button-balanced">btn2</button>
    <button class="button button-assertive">btn3</button>
  </div>

</ion-content>

<ion-footer-bar>
  <h1 class="title">footer</h1>
</ion-footer-bar>


<script>
  var app = angular.module(\'myApp\', [\'ionic\']);
</script>

</body>
</html>

 

 

效果：

 

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body>

<ion-header-bar>
  <h1 class="title">header</h1>
</ion-header-bar>

<ion-content>
  <button class="button button-royal button-small">mini按钮</button>
  <button class="button button-royal">普通按钮</button>
  <button class="button button-royal button-large">大按钮</button>
  <br/>
  <button class="button button-calm button-outline">只有边框的按钮</button>
  <button class="button button-clear button-dark">clear按钮</button>

  <br/>
  <!-- 带有图标的按钮-->
  <button class="button icon-left ion-gear-a">gear</button>
  <button class="button icon-left ion-ios-flower">flower</button>
  <button class="button icon-left ion-no-smoking">noSmoking</button>
  <button class="button icon-right ion-person">person</button>
  <br/>

  <!-- button-bar color icon -->
  <div class="button-bar">
    <button class="button button-assertive icon-left ion-star">btn1</button>
    <button class="button button-calm">btn2</button>
    <button class="button button-royal">btn3</button>
    <button class="button icon-right ion-star button-positive">btn4</button>
  </div>


</ion-content>

<ion-footer-bar>
  <h1 class="title">footer</h1>
</ion-footer-bar>



<script>
  var app =  angular.module(\'myApp\',[\'ionic\']);
</script>

</body>
</html>

 

4、list
list
item
item-divider
item-icon-left
item-icon-right
item-note
badge badge-assertive badge-balanced
list-inset
item-avatar
item-thumbnail-left/right

 

 

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body>

<ion-header-bar>
  <h1 class="title">header</h1>
</ion-header-bar>

<ion-content>
  <p>这是普通的列表</p>
  <ul>
    <li>test01</li>
    <li>test02</li>
    <li>test03</li>
  </ul>
  <p>这是ionic的列表</p>
  <ul class="list">
    <li class="item">test01</li>
    <li class="item">test02</li>
    <li class="item">test03</li>
  </ul>

  <br/>
  <!-- 手工添加分割线 -->
  <ul class="list">
    <li class="item item-divider">A</li>
    <li class="item">Apple</li>
    <li class="item">Adidas</li>
    <li class="item item-divider">B</li>
    <li class="item">Bike</li>
    <li class="item">Banana</li>
  </ul>
  <br/>
  <!-- 带有图标的列表项-->
  <ul class="list">
    <li class="item item-icon-left">
      <i class="icon ion-gear-a"></i>
      test01
    </li>
    <li class="item item-icon-right">
      <i class="icon ion-star"></i>
      test02
    </li>
    <li class="item item-icon-left item-icon-right">
      <i class="icon ion-gear-a"></i>
      <i class="icon ion-star"></i>
      test03
    </li>
    <li class="item item-icon-left">
      test04
      <i class="icon ion-bluetooth"></i>
      <span class="item-note">
        蓝牙操作
      </span>
    </li>
    <li class="item">
      test05
      <span class="badge badge-assertive">新消息</span>
    </li>
  </ul>


</ion-content>

<ion-footer-bar>
  <h1 class="title">footer</h1>
</ion-footer-bar>

<script>
  var app = angular.module(\'myApp\',[\'ionic\']);
</script>

</body>
</html>

 

效果：

 

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body>

<ion-header-bar>
  <h1 class="title">header</h1>
</ion-header-bar>

<ion-content>

  <ul class="list list-inset">
    <li class="item item-icon-left item-icon-right">
      <i class="icon ion-plane"></i>
      飞行模式
      <i class="icon ion-ios-arrow-right"></i>
    </li>
    <li class="item item-icon-left item-icon-right">
      <i class="icon ion-wifi"></i>
      Wi-Fi
      <span class="badge">未连接</span>
      <i class="icon ion-ios-arrow-right"></i>
    </li>
    <li class="item item-icon-left item-icon-right">
      <i class="icon ion-bluetooth"></i>
      蓝牙
      <span class="badge">打开</span>
      <i class="icon ion-ios-arrow-right"></i>
    </li>
    <li class="item item-icon-left item-icon-right">
      <i class="icon ion-gear-a"></i>
      系统更新
      ionic内联模板 ionic3还在用吗?


 Ionic App之国际化 json数组的处理


 是否可以在 ionic 中添加目标 c 代码？


 需要帮助了解此 TODO 提供程序


 使用 Facebook 错误代码登录：1349195 [IONIC]


 ionic3 打包 混淆代码