Ionic 移动应用开发框架完整教程

Question

Ionic 框架入门教程

Ionic 是一个强大的 HTML5 混合移动应用开发框架。它可以帮助开发者使用标准的 Web 技术（HTML、CSS 和 JavaScript）来构建体验接近原生应用的移动应用程序。

Ionic 框架主要关注应用的外观、交互体验和用户界面，特别适合基于 Hybrid 模式的 HTML5 移动应用开发。它是一个轻量级的移动端 UI 库，具有速度快、界面现代化美观等特点。为了在其他 UI 库于手机上运行缓慢的问题上获得更好的体验，Ionic 选择放弃对 iOS 6 和 Android 4.1 以下版本的支持。

Ionic 框架的特点

Ionic 拥有以下主要特性：

基于 Angular 语法：简单易学。
轻量级框架：核心库体积小。
融合现代前端框架：支持 AngularJS 的特性（如 MVC 模式），使得代码易于维护。
丰富的 UI 组件：通过 SASS 构建，提供了大量美观的 UI 组件来帮助开发强大的应用。
原生般的体验：致力于让混合应用与原生应用在观感上难以区分。
强大的命令行工具：提供了便捷的项目创建、构建和测试工具。
优异的性能：运行速度快。

前置知识

在学习本教程前，建议你了解以下基础知识：HTML、CSS、JavaScript 以及 Angular（或 AngularJS）。

安装与使用

你可以通过多种方式获取和使用 Ionic。

直接引入：
你可以从 Ionic 官网下载库文件，解压后会在目录中找到 css/、fonts/ 和 js/ 文件夹。在项目中引入 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可开始创建 Ionic 应用。ionic.bundle.js 文件已经包含了 Ionic 核心 JS、AngularJS 以及 Ionic 的 AngularJS 扩展。

命令行安装（推荐）：
首先，你需要安装 Node.js，以便使用其 NPM 工具。
然后，通过命令行工具全局安装最新版的 Cordova 和 Ionic：

Windows/Linux: npm install -g cordova ionic
Mac: sudo npm install -g cordova ionic

如果你已经安装过，可以使用 npm update -g cordova ionic 命令来更新。

创建并运行应用：

创建项目：使用 ionic start myApp tabs 命令，可以利用官方模板（如 tabs）创建一个新项目。
添加平台：进入项目目录 (cd myApp)，添加目标平台，例如 ionic platform add android 或 ionic platform add ios。
构建与运行：执行 ionic build android 和 ionic emulate android（或对应的 iOS 命令）来构建并在模拟器中运行应用。

创建第一个 Ionic 应用

一个基本的 Ionic 应用是一个标准的 HTML5 页面。你需要创建一个 index.html 文件，并引入必要的 Ionic 资源文件。

一个最简单的 Ionic 页面结构示例如下：




    
    My App

构建一个带有侧边栏和列表的应用

接下来，我们逐步构建一个包含标题栏、侧边栏和任务列表的待办事项（Todo）应用。

1. 创建侧边栏容器：
使用 ion-side-menus、ion-side-menu-content 和 ion-side-menu 指令来搭建侧边栏结构。

2. 初始化 Angular 应用并添加内容：
创建一个 Angular 模块（例如在 js/app.js 中）：

angular.module('todo', ['ionic']);

在 index.html 的 body 标签上通过 ng-app="todo" 声明应用，并为主内容区和侧边栏添加标题栏 (ion-header-bar)。

3. 创建并显示列表：
在控制器 (TodoCtrl) 中定义任务数据，并在页面中使用 ng-repeat 迭代显示。
app.js 控制器部分:

angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope) {
    $scope.tasks = [
        { title: '学习 Ionic' },
        { title: '构建一个应用' },
        { title: '测试应用功能' }
    ];
});

index.html 列表部分:


    
        
            {{task.title}}

同时，记得在 body 标签上添加 ng-controller="TodoCtrl"。

4. 实现新增任务功能：
我们需要一个模态窗口（Modal）来添加新任务。
首先，在 index.html 中定义一个用于新增任务的模板：

然后，在主内容区的标题栏添加一个按钮来触发这个模态窗口：


    Todo

最后，在控制器中注入 $ionicModal 服务，并实现创建、显示、关闭模态窗口以及创建任务的逻辑：

.controller('TodoCtrl', function($scope, $ionicModal) {
    // ... 之前的 tasks 数据 ...

    // 创建并加载模态模板
    $ionicModal.fromTemplateUrl('new-task.html', function(modal) {
        $scope.taskModal = modal;
    }, { scope: $scope, animation: 'slide-in-up' });

    $scope.createTask = function(task) {
        if(task && task.title) {
            $scope.tasks.push({ title: task.title });
            $scope.taskModal.hide();
            task.title = ""; // 清空输入框
        }
    };
    $scope.newTask = function() { $scope.taskModal.show(); };
    $scope.closeNewTask = function() { $scope.taskModal.hide(); };
});

5. 完善侧边栏项目功能：
为了让应用更实用，我们可以将任务按项目分类。这需要更复杂的控制器逻辑来管理项目列表、当前活动项目以及本地存储。这里概述其增强步骤：

修改主内容区标题，显示当前活动项目名称，并将左侧按钮功能改为切换项目侧边栏。
在左侧边栏 (ion-side-menu) 中显示项目列表，并可以点击切换或新增项目。
重构控制器，使用一个 Factory 服务 (Projects) 来通过 localStorage 保存和加载项目数据。
任务列表将绑定到当前活动项目的 tasks 数组。
新增任务功能将任务添加到当前活动项目中。

由于这部分代码较长，涉及服务、本地存储和更复杂的交互，其实现思路是创建管理项目的工厂服务，并在控制器中处理项目选择、创建以及任务与项目的关联。

HTML 代码示例


  当选按钮


  
    
      选取的值为: {{ data.clientSide }}
    
    
      {{ item.text }}
    
    
      Serverside, Selected Value: {{ data.serverSide }}
    
    
      {{ item.text }}

JavaScript 代码示例

angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
  $scope.clientSideList = [
    { text: "Backbone", value: "bb" },
    { text: "Angular", value: "ng" },
    { text: "Ember", value: "em" },
    { text: "Knockout", value: "ko" }
  ];
  $scope.serverSideList = [
    { text: "Go", value: "go" },
    { text: "Python", value: "py" },
    { text: "Ruby", value: "rb" },
    { text: "Java", value: "jv" }
  ];
  $scope.data = {
    clientSide: 'ng'
  };
  $scope.serverSideChange = function(item) {
    console.log("Selected Serverside, text:", item.text, "value:", item.value);
  };
});

Ionic 切换开关操作

以下示例展示了如何通过切换开关来显示不同的状态值，true 表示打开，false 表示关闭。

HTML 代码


  开关切换


  
    
      Settings
    
    
      {{ item.text }}
    
    
      
      
    
    
      Notifications
    
    
      Push Notifications
    
    
      
    
    
      Newsletter

JavaScript 代码

angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
  $scope.settingsList = [
    { text: "Wireless", checked: true },
    { text: "GPS", checked: false },
    { text: "Bluetooth", checked: false }
  ];
  $scope.pushNotificationChange = function() {
    console.log('Push Notification Change', $scope.pushNotification.checked);
  };
  $scope.pushNotification = { checked: true };
  $scope.emailNotification = 'Subscribed';
});

Ionic 手势事件

Ionic 提供了一系列手势事件，方便在移动端处理用户交互。以下是常用手势事件的简要说明及示例代码：

on-hold：长按事件，默认触发时间为500毫秒。
on-tap：轻击事件。如果按压时间超过250毫秒，则不会触发此事件。
on-double-tap：双击屏幕事件。
on-touch：与 on-tap 不同，此事件在用户点击屏幕时立即执行，无需等待 touchend 或 mouseup。
on-release：当用户结束触摸时触发。
on-drag：类似于PC端的拖拽，在按住元素并移动时触发。
on-drag-up/down/left/right：分别对应向上、向下、向左、向右的拖拽事件。
on-swipe：手指滑动事件，可以是任意方向。同时也有四个方向的独立事件：on-swipe-up, on-swipe-right, on-swipe-down, on-swipe-left。

这些事件的用法基本相同，以下是一个通用按钮示例：

$ionicGesture 服务

$ionicGesture 是一个 Angular 服务，用于管理手势事件监听器。

方法

on(eventType, callback, $element)：为元素添加手势事件监听器。
- eventType：要监听的手势事件类型（字符串）。
- callback：事件触发时的回调函数。
- $element：要监听的 Angular 元素。
- options：配置对象（可选）。
off(eventType, callback, $element)：从元素上移除指定的手势事件监听器。

Ionic 头部和底部

ion-header-bar

ion-header-bar 指令用于创建一个固定在屏幕顶部的标题栏。如果为其添加 bar-subheader 样式类，则可作为副标题栏使用。

用法示例：


  
    
  
  Title!
  
    
  


  Some content!

API：

align-title (可选)：对齐标题，可选值 ‘left’、‘center’、‘right’。默认跟随平台（iOS居中，Android居左）。
no-tap-scroll (可选)：布尔值，设置标题栏是否随内容滚动而滚动（即是否固定）。

ion-footer-bar 指令与 ion-header-bar 类似，但固定在屏幕底部。

用法示例：


  Some content!


  
    
  
  Title!

API：

align-title (可选)：与 ion-header-bar 的该属性功能相同。

Ionic 列表操作

列表是移动应用中最常用的界面元素之一。ion-list 和 ion-item 指令支持丰富的交互，如删除项、拖动排序、滑动编辑等。

基础用法：


  
    Hello, {{item}}!

高级用法示例（包含缩略图、删除、排序、滑动选项）：


  
    
    {{item.title}}
    {{item.description}}
    分享
    编辑

API：

delegate-handle (可选)：字符串，用于通过 $ionicListDelegate 标识列表。
show-delete (可选)：布尔值，控制删除按钮的显示与隐藏。
show-reorder (可选)：布尔值，控制排序按钮的显示与隐藏。
can-swipe (可选)：布尔值，是否允许通过滑动显示选项按钮。默认 true。

列表操作实例代码

angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
  $scope.data = { showDelete: false };
  $scope.edit = function(item) { alert('Edit Item: ' + item.id); };
  $scope.share = function(item) { alert('Share Item: ' + item.id); };
  $scope.moveItem = function(item, fromIndex, toIndex) {
    $scope.items.splice(fromIndex, 1);
    $scope.items.splice(toIndex, 0, item);
  };
  $scope.onItemDelete = function(item) {
    $scope.items.splice($scope.items.indexOf(item), 1);
  };
  // 初始化 items 数组，此处省略了详细列表
  $scope.items = [ /* ... */ ];
});

Ionic 加载动作

$ionicLoading 服务用于显示一个加载指示器。

基本用法：

angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({ template: 'Loading...' });
  };
  $scope.hide = function(){ $ionicLoading.hide(); };
});

方法：

show(opts)：显示加载指示器。
- opts：配置对象。
  - template / templateUrl：指示器的HTML内容或模板URL。
  - noBackdrop：是否隐藏背景遮罩。
  - delay：延迟显示的毫秒数。
  - duration：自动隐藏前的等待毫秒数。
hide()：隐藏加载指示器。

配置默认选项 ($ionicLoadingConfig)：

var app = angular.module('myApp', ['ionic']);
app.constant('$ionicLoadingConfig', { template: '默认加载模板……' });

Ionic 模态框

$ionicModal 服务用于创建覆盖在用户主界面之上的模态框。

使用方法：
首先，在HTML中定义模板（例如在 index.html 中）：

然后，在控制器中注入并使用：

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('my-modal.html', { scope: $scope, animation: 'slide-in-up' })
    .then(function(modal) { $scope.modal = modal; });
  $scope.openModal = function() { $scope.modal.show(); };
  $scope.closeModal = function() { $scope.modal.hide(); };
  // 清理模态框以避免内存泄漏
  $scope.$on('$destroy', function() { $scope.modal.remove(); });
});

$ionicModal 服务的方法：

fromTemplate(templateString, options)：从模板字符串创建模态框实例。
fromTemplateUrl(templateUrl, options)：从模板URL创建模态框实例（返回Promise）。

ionicModal 实例的方法：

initialize(options)：初始化模态框控制器。
show()：显示模态框。
hide()：隐藏模态框。
remove()：从DOM中移除并清理模态框。
isShown()：返回布尔值，指示模态框是否正在显示。

Ionic 导航

ion-nav-view 指令与 AngularUI Router 配合使用，用于管理应用中的视图状态和导航。它能够检测浏览历史，实现正确的视图切换动画。应用的状态（$state）通过 $stateProvider 进行配置，每个状态可以绑定到一个URL和模板。

基本配置示例：

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
    .state('index', { url: '/', templateUrl: 'home.html' })
    .state('music', { url: '/music', templateUrl: 'music.html' });
});

ion-nav-bar 指令可以与导航视图协同工作，自动更新标题栏。

Ionic 平台工具

$ionicPlatform 服务用于检测当前运行平台（如Cordova/PhoneGap环境），并处理平台相关功能，例如覆盖Android硬件后退按钮。

主要方法：

onHardwareBackButton(callback)：绑定硬件后退按钮事件。
offHardwareBackButton(callback)：移除硬件后退按钮事件监听。
registerBackButtonAction(callback, priority, [actionId])：注册后退按钮动作，只有最高优先级的动作会执行。
ready([callback])：设备准备就绪后触发回调。

Ionic 浮动框与对话框

$ionicPopover

$ionicPopover 服务用于创建浮动在应用内容之上的弹出框。

使用方法：
在HTML中定义模板：

在控制器中创建并管理：

angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicPopover) {
  $ionicPopover.fromTemplateUrl('my-popover.html', { scope: $scope })
    .then(function(popover) { $scope.popover = popover; });
  $scope.openPopover = function($event) { $scope.popover.show($event); };
  $scope.closePopover = function() { $scope.popover.hide(); };
  // 清理
  $scope.$on('$destroy', function() { $scope.popover.remove(); });
});

$ionicPopup

$ionicPopup 服务提供了三种快速创建弹出窗口的方法：alert()（警告框）、prompt()（输入框）和 confirm()（确认对话框）。

示例：

angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {
  // 警告框
  $scope.showAlert = function() {
    $ionicPopup.alert({ title: '注意', template: '这是一个警告信息。' });
  };
  // 确认对话框
  $scope.showConfirm = function() {
    var confirmPopup = $ionicPopup.confirm({ title: '确认', template: '你确定要执行此操作吗？' });
    confirmPopup.then(function(res) { if(res) { console.log('用户确认'); } });
  };
  // 带输入框的自定义弹窗
  $scope.showPopup = function() {
    var myPopup = $ionicPopup.show({
      template: '',
      title: '输入',
      scope: $scope,
      buttons: [ { text: '取消' }, { text: '确定', onTap: function(e) { return $scope.data.input; } } ]
    });
    myPopup.then(function(res) { console.log('输入结果为:', res); });
  };
});

Ionic 滚动控制

ion-scroll

ion-scroll 指令用于创建一个可滚动的容器，支持水平和垂直滚动，以及缩放功能。

用法示例：

主要API属性：

direction：滚动方向，‘x’ 或 ‘y’，默认 ‘y’。
zooming：是否支持双指缩放。
scrollbar-x / scrollbar-y：是否显示水平/垂直滚动条。
on-scroll：滚动时触发的表达式。

ion-infinite-scroll

ion-infinite-scroll 指令在用户滚动接近底部时触发加载更多数据的函数。

用法示例：

在控制器中，加载完成后需要广播 scroll.infiniteScrollComplete 事件来重置无限滚动监听器。可以使用 ng-if 在无更多数据时禁用该指令。

$ionicScrollDelegate

$ionicScrollDelegate 服务用于控制由 ion-content 或 ion-scroll 创建的滚动视图。

常用方法：

scrollTop([shouldAnimate])：滚动到顶部。
scrollBottom([shouldAnimate])：滚动到底部。
resize()：重新计算滚动视图的容器尺寸。
$getByHandle(handle)：通过委托句柄获取特定的滚动视图实例。

Ionic 侧栏菜单

侧栏菜单容器允许用户通过拖动主要内容区域来显示左侧或右侧的菜单。基本结构如下：

相关指令与API：

ion-side-menu-content：主要内容容器。
- drag-content (可选)：内容是否可拖动以打开菜单。默认为 true。
ion-side-menu：侧栏菜单容器。
- side：菜单位置，‘left’ 或 ‘right’。
- is-enabled (可选)：菜单是否可用。
- width (可选)：菜单宽度（像素）。默认 275。
menu-toggle：切换指定侧栏菜单的按钮，通常用在导航栏内。例如：
menu-close：关闭当前打开的侧栏菜单的链接。例如：首页

$ionicSideMenuDelegate 服务 用于控制侧栏菜单，常用方法包括：

toggleLeft([isOpen]) / toggleRight([isOpen])：切换左/右侧菜单。
isOpen() / isOpenLeft() / isOpenRight()：判断菜单是否打开。
getOpenRatio()：获取菜单打开比例。
canDragContent([canDrag])：设置或获取内容是否可拖动。

Ionic 滑动框

ion-slide-box 指令用于创建包含多页内容的滑动容器，可以通过滑动或拖动来切换页面。

基本用法：


   BLUE
 
   YELLOW
 
   PINK

主要API属性：

does-continue：是否自动轮播滑动。
slide-interval：自动滑动的间隔毫秒数（当 does-continue 为 true 时有效）。
show-pager：是否显示页面指示器。
active-slide：将模型绑定到当前激活的幻灯片索引。

Ionic 加载动画

ion-spinner 指令提供了一系列SVG旋转加载动画图标，可以在内容加载时显示。可以通过 icon 属性指定样式，如 "spiral"、"ios"、"bubbles"、"circles"、"crescent"、"dots" 等。同时，也可以使用 Ionic 的颜色类（如 spinner-energized）来设置图标颜色。

示例：

Ionic 选项卡栏

ion-tabs 指令创建一组选项卡栏，点击选项卡可以切换不同页面视图。在 iOS 上通常位于底部，在 Android 上位于顶部导航栏下方。

基本结构：

ion-tab 指令的属性：

title：选项卡标题。
icon / icon-on / icon-off：选项卡图标。
href：点击选项卡时跳转的链接。
on-select / on-deselect：选项卡选中/取消选中时触发的表达式。
badge：选项卡上显示的徽章（如数字）。

$ionicTabsDelegate 服务 用于控制选项卡，主要方法有：

select(index, [shouldChangeHistory])：根据索引选择选项卡。
selectedIndex()：返回当前选中选项卡的索引。

Ionic 移动应用开发框架完整教程

Ionic 框架入门教程

Ionic 框架的特点

前置知识

安装与使用

创建第一个 Ionic 应用

构建一个带有侧边栏和列表的应用

HTML 代码示例

JavaScript 代码示例

Ionic 切换开关操作

HTML 代码

JavaScript 代码

Ionic 手势事件

$ionicGesture 服务

方法

Ionic 头部和底部

ion-header-bar

ion-footer-bar

Ionic 列表操作

列表操作实例代码

Ionic 加载动作

Ionic 模态框

Ionic 导航

Ionic 平台工具

Ionic 浮动框与对话框

$ionicPopover

$ionicPopup

Ionic 滚动控制

ion-scroll

ion-infinite-scroll

$ionicScrollDelegate

Ionic 侧栏菜单

Ionic 滑动框

Ionic 加载动画

Ionic 选项卡栏

0 Answers