移动端-ionic

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29412527/article/details/80796906

Ionic介绍*

= 官网地址
- Ionic官网
- Ionic中文网

• 首先要认识Ionic框架？
  

  IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从 web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

• ionic框架构成

  • CSS框架 - 提供原生 App 质感的 CSS 样式模拟。 ionic 这部分的实现使用了 ionicons 图标样式库。
  • JavaScript框架 - 提供移动 Web 应用开发框架。ionic 基于 AngularJS 基础框架开发，遵循 AngularJS 的框架约束；此外 ionic 使用 AngularJS UI Router 实现前端路由。
  • 命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic 命令行工具使用了 Cordova，依赖于平台 SDK（Android & iOS）实现将移动 Web 项目打包成原生 App。
    
    • Ionic特点
    • 基于Angular语法，简单易学。
    • 是一个轻量级框架。性能优越，运行速度快。
    • 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护。
    • 提供了漂亮的设计，通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。
    • 专注原生，让你看不出混合应用和原生的区别
    • 提供了强大的命令行工具。

• ionic开发注意点有哪些？

  由于 ionic 使用了 HTML5 和 CSS3 的一些新规范，所以要求 iOS7+ / Android4.1+。
  在低于这些版本的手机上使用 ionic 开发的应用，有时会发生莫名其妙的问题。

• 现在那些公司再用ionic开发？
  
  • 查看ionic开发的app的地址

Ionic框架主要技术介绍

• Cordova介绍
  
  • 官网地址
• Cordova是什么？
  
  • Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。
  • Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
• Cordova和phonegap的关系？
  
  • 08年一次ios开发者大会上来自Nitobi软件公司的几个家伙突发奇想，提出一个想法，想做一个工具来弥补web和ios开发之间的不足，并提出 Bridging the gap between the web and the iPhone sdk。一开始的目标并不是很大，但是做到了现在的written once,run everywhere。
    09年他们推出android adk和blackberry sdk，成了移动开发者的福音，就连ibm也加入进来。phonegap继续成长，在2011年10月，整个Nitobi团队被adobe收购，PhoneGap的项目主管Brian LeRoux指出开源PhoneGap的决定在Adobe收购Nitobi之前就做出了，由于Adobe现在拥有PhoneGap商标，他们不得不换个名字，第一个选中的名字是Callback，毫无创意，因此再改一次，产品现在叫Apache Cordova。随后adobe把 phonegap送给了apache软件基金会，接着apache把phonegap改名为cordova，cordova是Nitobi团队当时坐落的街道名称，用此名来纪念Nitobi团队的贡献。
    所以Apache Cordova是从PhoneGap中抽出的核心代码，是驱动PhoneGap的核心引擎，。
• Ng-cordova介绍
  
  • 官网地址
• Ng-cordova是什么？
  
  • ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和指令扩展，让开发者可以方便的在HybridApp开发中调用设备能力，即可以在AngularJs代码中访问设备能力Api。
  • 在cordova插件的sucess和error js回调方法中，是无法使用 angularjs的$scope对象和注入的方法的，只能访问全局的方法和变量，这样会导致很多麻烦，必须使用传统的js方法写很多难看的代码。使用 ngCordova可以解决这个问题。

ionic步骤

1、环境的配置
2、npm install -g cordova ionic (可能会有报错所以拆开来进行下载)
3、ionic start myApp tabs （下载myApp项目文件）
4、ionic platform add android (注意这一步经常会被发生改变
可能会缩减成以下步骤
1.ionic platform add android
2.可能会提示你上面这条命令废除 cordova platform add android
3.ionic run android
)

ionic介绍

• apk可以解压，将apk文件后缀改成zip就能够看到里面的内容
• 如何开启手机的开发者模式，只有开启了开发者模式并且手机驱动安装成功，下面步骤才能使用
• 如何直接运行与手机
  
  • 通过adb devices 检测手机是否正常连上电脑
  • 通过ionic run android 将apk文件通过命令安装到手机上面

项目初始文件结构介绍

• 1、hooks：文件夹是伴随Cordova的安装自动生成的文件夹，该文件夹有脚本可以定制Cordova命令。一般情况下，不对该文件夹中的文件进行更改。

• 2、plugins：用于放置Ionic扩展文件的文件夹。比如升级或者扩展Ionic的时候。为了安装这些扩展文件，你需要确保安装了Git。通常不对该文件夹进行改动。

• 3、.bowerrc：Ionic偶尔会使用Bower去安装一些组件，所以bowerrc文件产生了，通常不对该文件进行修改

• 4、.gitignore：当使用Git和GitHub追踪项目，.gitignore可以用来指定忽略文件。如果你不想特定的文件夹和文件被上传到Git仓库（repository)，你可以使用gitignore防止文件转移。

• 5、config.xml：config.xml是另外一个Cordova安装文档,通常也不需要修改。

• 6、gulpfile.js：控制着允许Ionic自动重载浏览器的自动操作。同时，它还负责其他事情，比如：处理文件。

• 7、package.json：package.json文件在许多Nodejs项目里都会出现， 它定义了这个项目所需要的各种模块，以及项目的配置信息，比如名称、版本、许可证等元数据 。 Node和Gulp工具可以依据文件中的项目需求和配置信息，去履行责任。一般不修改该文件。

• 8、scss文件夹：如果在Ionic项目，想要使用CSS的预处理语言SASS来修改应用程序的样式，那么你可以在scss文件夹下的相应文件覆盖Ionic的默认值。如果你熟悉SASS语言，你可以在相应scss文件添加SASS命令，或者更改目录结构，增加子文件夹。如果你想在项目中使用SASS去工作，你需要首先运行Ionic SASS 命令。

• 9、www文件夹：先来看看www文件夹的内容结构：

• 10 platforms 用来搭建不同平台依赖的文件

• 11 res resources 都是用来存放 软件图片 和进去软件图片

——-以下部分摘录笔记———-

配置tabs选项卡的位置

  // config.js
  config(function($ionicConfigProvider){

  })

  $ionicConfigProvider.platform.android.tabs.position("bottom");
  $ionicConfigProvider.platform.ios.tabs.position("bottom");

  //$ionicConfigProvider.platform.ios.tabs.style('standard');
  //$ionicConfigProvider.platform.ios.tabs.position('bottom');
  //$ionicConfigProvider.platform.android.tabs.style('standard');
  //$ionicConfigProvider.platform.android.tabs.position('bottom');
  //
  //$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
  //$ionicConfigProvider.platform.android.navBar.alignTitle('center');
  //
  //$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
  //$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
  //
  //$ionicConfigProvider.platform.ios.views.transition('ios');
  //$ionicConfigProvider.platform.android.views.transition('android');

纯css, //和js形式的组件

1.ionic CSS

如果你对 AngularJS 这样的东西不感兴趣，可以只使用 ionic 的 CSS 框架：直接在 HTML 中引入 ionic.css 就可以了。
ionic 的 CSS 框架主要提供预定义的 CSS 类，来帮助我们快速构建适用于手机端的 UI。

1.1.ionic CSS 组成

• 基本布局类
• 颜色和图标类
• 界面组件类
• 栅格系统类

1.2.ionic CSS 布局

1.2.1固定高度条块定义

• .bar
  
  • 将元素声明为屏幕上绝对定位的块状区域，具有固定的高度（44px）

1.2.2设置条块的位置

• .bar-header
  
  • 置顶
• .bar-subheader
  
  • 在 .bar-header之下置顶
• .bar-footer
  
  • 置底
• .bar-subfooter
  
  • 在.bar-footer之上置底

1.2.3.中间内容区别

• .content
  
  • 流式定位，内容在文档流中按顺序定位
• .scroll-content
  
  • 绝对定位，内容元素占满整个屏幕

1.2.4. 拥有.bar样式元素的子元素

• 1.可以设置标题文字

  <div class="bar">
     <h1 class="title">我是标题</h1>
  </div>

• 2.可以设置button按钮

  <div class="bar">
    <button class="button">我是按钮</button>
  </div>

• 3.可以设置工具栏
  
  • 工具栏包含一组按钮。对用作工具栏的元素，应用.button-bar样式，通常 使用div元素作为工具栏。

    <div class="button-bar">
    <button class="button">按钮1</button>
    <button class="button">按钮1</button>
    <button class="button">按钮1</button>
  </div>

• 4.给bar条块上加上input框
  
  • 首先要给bar元素应用 .item-input-inset样式
  • 再给bar条块内加上,一个input用label包裹，给label应用.item-input-wraper样式

  <div class="bar item-input-inset">
    <label for="" class="item-input-wrapper"><input type="text"></label>
  </div>

1.3.颜色和图标

1.3.1.颜色

• ionic定义了九种前景/背景/边框的色彩样式
• 前景色:
  
  • .light
  • .stable
  • .positive
  • .calm
  • .balanced
  • .energized
  • .assertive
  • .royal
  • .dark
• 边框
  
  • .light-border
  • .stable-border
  • .positive-border
  • …

• 背景

  • .light-bg
  • .stable-bg
  • …

• button按钮颜色

  • .button-light
  • .button-stable
  • …

• bar条块颜色

  • .bar-light

1.3.2.图标

• .icon
  
  • 将元素声明为图标
• .ion-{icon-name}
  
  • 声明要使用的具体图标

  <i class="icon ion-speakerphone"></i>

1.3.3.内边距

• .padding
• .padding-bottom
• .padding-left
• .padding-top
• .padding-right
• 为元素添加10px的内边距

1.4.列表样式

1.4.1列表

• .list
• .list-borderless
  
  • 加上表示无边框
• .list-inset
  
  • 边距缩近 并添加圆角
• .card
  
  • 阴影 放大看

  <div class="list">
      <div class="item">列表哦</div>
      <div class="item">列表哦
      <!-- span是徽章 -->
      <span class="badge badge-assertive">0</span>
      </div>
      <div class="item">列表哦</div>
  </div>

1.4.2列表成员

• .item-borderless
  
  • 无边框
• .item-{color}
  
  • 配色，那9种颜色
• .item-icon-left/righ
  
  • 图标位置

1.5.按钮

1.6.开关

  <div class="item item-toggle">
        iMessage
        <label class="toggle toggle-balanced">
          <input type="checkbox">
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>
</div>

1.7.复选框

-复选框通常用来在一组列表中选中部分成员

<div class="item item-chexkbox">
    <div class="checkbox">
        <input type="checkbox">
    </div>
</div>

1.8.单选框

• 最新版并没有提供单独的样式，需要配合anguar指令来做

1.9.滚动条

  <div class="item range">
    <i class="icon ion-volume-low"></i>
    <input type="range" name="volume">
    <i class="icon ion-volume-high"></i>
  </div>

1.10.选项卡

• 1.只有文字

  <div class="tabs">
  <a class="tab-item">
    首页
  </a>
  <a class="tab-item">
    购物车
  </a>
  <a class="tab-item">
    设置
  </a>
</div>

• 2.只有图标

  <div class="tabs tabs-icon-only">
  <a class="tab-item">
    <i class="icon ion-home"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-android-cart"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
  </a>
</div>

• 3.图标在上，文字在下

  <div class="tabs tabs-icon-top">
  <a class="tab-item">
    <i class="icon ion-home"></i>
    首页
  </a>
  <a class="tab-item">
    <i class="icon ion-android-cart"></i>
   购物车
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

• 图标在左，文字在右

  <div class="tabs tabs-icon-left">
  <a class="tab-item">
    <i class="icon ion-home"></i>
    首页
  </a>
  <a class="tab-item">
    <i class="icon ion-android-cart"></i>
    购物车
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

1.11.徽章

• 在.tab-item同级加上has-badge,并添加一个子元素拥有badge样式

  <div class="tabs tabs-icon-top ">
    <a class="tab-item has-badge">
      <i class="badge">3</i>
      <i class="icon ion-home"></i>
      首页
    </a>
  </div>

ionic之popup组件

• 代码

  var myPopup = $ionicPopup.show({
        template:'<input>',
        title:'请输入密码',
        subTitle:'接下来要输入密码',
        scope:$scope,
        buttons:[
        { 
         text:'取消',
          onTap:function(e){
            console.log('取消');
            e.preventDefault();
              myPopup.close()//关闭窗口
            // return false;
          }
        },
        {
          text:'<b>Save</b>',
          type:'button-positive',//样式
          onTap:function(e){// 点击事件
            console.log('保存');
          }
        }]
      })

ionic之actionsheet组件

• 代码

  var hidesheet= $ionicActionSheet.show({
        buttons:[//最终需要显示的普通按钮
        {text:'<b>打开相机</b'},
        {text:'打开相册'}
        ],
        destructiveText:'删除',// 删除按钮
        cancelText:'Cancel',// 取消按钮
        cancel:function(){
          // 这里是删除按钮事件
          console.log('删除')
        },
        buttonClicked:function(index){
          console.log(index);
          hidesheet();//隐藏弹框
          // return true
        },
        destructiveButtonClicked:function(){
          console.log('删除');
        }
    })

ionic之modal组件

• 代码

      <script id="my-modal.html" type="text/ng-template">
        <!-- 所有模态框的内容都写在这个ion-modal-view组件中 -->
            <ion-modal-view>
                <ion-header-bar>
                    <h1 class="title">我是标题</h1>
                </ion-header-bar>
                <ion-content>
              哈哈哈
            </ion-content>
            </ion-modal-view>

        </script>
  ```

  ```javascript

    $ionicModal.fromTemplateUrl('my-modal.html',{
          scope: $scope,// 表示我们可以在模板中直接使用当前的$scope
         animation:'slide-in-up'
      }).then(function(modal){
        $scope.modal=modal;
    });
  ```


### ionic之Popover
  - 在使用popover的时候记得去除掉opacity: 0，不然样式无法显示
  - 代码

```html
    <script id="my-popover.html" type="text/ng-template">
            <ion-popover-view>
                <ion-header-bar>
                    <h1 class="title">我是标题</h1>
                </ion-header-bar>
                <ion-content>
                    这里的内容
                </ion-content>
            </ion-popover-view>
        </script>




<div class="se-preview-section-delimiter"></div>

  $ionicPopover.fromTemplateUrl(
      'my-popover.html'// script标签的id,或者静态文件
      ,{
        scope:$scope
      }).then(function(popover){
        $scope.popover=popover;
      })

    $scope.openPopover=function($event){
      console.log();
      $scope.popover.show($event);
    }
    $scope.closePopover = function(){
      $scope.popover.hide();
    }




<div class="se-preview-section-delimiter"></div>

ng-cordova简介

• ngCordova是在Cordova Api封闭成Angular的服务，让开发者可以方便的在HybridApp开发中调用设备能力，即可以在AngularJs代码中访问设备能力Api。
• 官网

ng-cordova使用步骤

• 用来调用系统硬件。
• 5.11.2 使用步骤
  
  1. 下载ng-cordova的js文件
     在项目根目录下面打开命令窗口，输入 .bowerrc
     bower install ngCordova -save
  2. 在index.html文件中引入ng-cordova.js文件
  3. 在app.js(项目入口中)引入依赖
     angular.module('myApp', ['ionic','ngCordova'])
     4、在$ionicPlatform.ready事件中使用插件功能，就是开始使用我们的插件
     5、下载相应功能的插件，按照官方文档使用就可以了
     在项目根目录下面打开命令窗口
     cordova plugin add [插件名称]

调用摄像头保存头像功能

• 安装摄像头插件
  
  • 在项目根目录打开命令行执行
    
    • cordova plugin add cordova-plugin-camera
• 是先点开actionsheet,然后调用$ionicCamera

  $ionicActionSheet.show({
    buttons:[
    {text:'照相机'},
    {text:'相册'}],
    titleText:'请求选择文件',
    cancelText:'取消',
    buttonClick:function(index){
      switch(index){
        case 0:getPicFromCamera();break;
        case 1:getPicFromAlbum();break;
      }
      return true;
    }

  });
  // 参数
  var options = {
        quality: 100,// 图片质量
        destinationType: Camera.DestinationType.DATA_URL,// 读取到的图片的数据类型,读取图片为base64编码
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,// 图片的来源的，这是表示相册
        // sourceType: Camera.PictureSourceType.CAMERA,// 这个表示来源是相机 
        allowEdit: true,// 是否允许编辑
        encodingType: Camera.EncodingType.JPEG,// 图片编码类型,jpeg
        targetWidth: 100,// 图片宽度
        targetHeight: 100, // 图片高度
        popoverOptions: CameraPopoverOptions, // 弹出框类型
        saveToPhotoAlbum: false, // 是否保存到相册
        correctOrientation:true  // 是否允许调整方向
      };
  $cordovaCamera.getPicture(options).then(function(imageData){
                  // imageData是图片base64编码后的数据
                  // 获取页面的img对象
                  var image = document.getElementById('touxiang');
                  // 设置其src属性
                  // base64编码
                  image.src="data:image/jpeg;base64,"+imageData;

                  // 存储到本地存储
                  localStorage["touxiang"]=imageData;// 是只能存储字符
                },function(err){
                    // 此处是发生错误时的回调.
                });