ionic oc混合开发_使用Ionic快速开发IBM MobileFirst Platform混合应用程序-优快云博客

本教程介绍如何使用Ionic框架与IBM MobileFirst Platform快速创建具有吸引力的混合移动应用程序。涵盖Ionic组件、行为功能及如何集成AngularJS，同时演示了创建侧边菜单、导航和加载视图的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

离子框架

Ionic是一个高性能的移动开发框架，其中包含大量针对移动设备进行了优化的组件，可帮助您快速构建具有吸引力且易于使用的移动应用程序。它包括用于移动设备优化的导航，滚动，侧边菜单和键盘管理的行为功能；用于表单，按钮，列表和通用布局CSS模块；以及700多个图标。 Ionic具有使用Apache Cordova框架创建混合应用程序的其他功能，但本教程未介绍它们。

Ionic支持iOS 6+和Android 4.0+，覆盖98％的iOS设备和90％的Android设备。使用此框架，您可以快速创建简单和复杂的混合应用程序。

本教程的先决条件

您应该安装了IBM MobileFirst命令行工具。您将使用它们来创建项目，应用程序和环境。
或者，您仍然可以使用IBM MobileFirst Studio。下载IBM MobileFirst Studio开发人员版。
您应该熟悉使用IBM MobileFirst Platform创建混合应用程序的基础知识。

Ionic应用程序入门

创建一个名为名称ToolsProject的新MobileFirst项目和一个名为AmazingApp的混合应用程序。将Android环境添加到应用程序：

mfp create IonicProject
cd IonicProject
mfp add hybrid AmazingApp
cd apps/AmazingApp

从现在开始，执行IonicProject/apps/AmazingApp目录中的所有命令。

将离子文件添加到您的应用程序

您还可以使用Bower和wiredep安装Ionic及其依赖项。有关更多信息，请参阅developerWorks文章“ 使用Bower和wiredep加快IBM MobileFirst Platform混合应用程序中的依赖关系包含” 。

从Ionic网站下载最新版本的Ionic框架。本教程使用1.0.0-beta14版本。您可以直接下载此版本。

创建一个名为common/ionic的新目录，并将下载的.zip文件解压缩到其中。像这样构造公共目录：

common
├── css/
├── images/
├── index.html
├── ionic/
│   ├── css/
│   ├── fonts/
│   ├── js/
│   └── version.json
└── js/

Ionic随附了AngularJS的捆绑版本，该版本提供了大多数巧妙的功能。有关AngularJS框架的一般信息，请访问AngularJS网站。有关特别好的AngularJS教程，请访问Thinkster网站。

增强index.html

编辑common/index.html以加载Ionic及其依赖项：

<html>
<head>
  <!-- pre-existing <head> content here -->
  <!-- New lines to load Ionic CSS -->
  <link rel="stylesheet" href="ionic/css/ionic.css" />
</head>
<body>
  <!-- pre-existing <body> content here -->
  <!-- New lines to load Ionic JS bundle -->
  <script src="ionic/js/ionic.bundle.js"></script>
</body>
</html>

Ionic项目提供了一个名为ionic.bundle.js的便捷程序包，可帮助您加载基本的Ionic环境。它包含了：

ionic.js
ionic-angular.js
angular/angular.js
angular/angular-animate.js
angular/angular-sanitize.js
angular-ui/angular-ui-router.js

除了加载ionic.bundle.js ，您还可以单独加载这些文件，对于复杂的应用程序可能更易于管理。如果使用Bower和wiredep，则将注入单个文件。

加载Ionic和AngularJS

现在，您已经在应用程序中包含了Ionic框架及其依赖项，您需要启动它。因为Ionic是AngularJS的一组扩展，所以加载模式与AngularJS的加载模式相同，这称为引导 AngularJS。但是，您需要让IBM MobileFirst Platform（MFP）在引导AngularJS之前完成其自身的加载序列，这可以通过指示MFP在就绪时引导AngularJS来完成。编辑js/main.js文件， wlCommonInit()如下所示调整wlCommonInit()函数：

function wlCommonInit() {
  // Pre-existing wlCommonInit() content here
  // New lines to bootstrap AngularJS
  angular.element(document).ready(function() {
    angular.bootstrap(document, ['app-main']);
  });
}

此代码告诉AngularJS使用名为App的基本模块引导您的应用程序。您尚未编写应用程序或定义模块app-main，所以现在就这样做。

编写您的Ionic应用程序

由于Ionic包含用于侧菜单和导航的强大功能，因此您将创建一个具有三个视图的基本应用程序，并创建侧菜单项以在这些视图之间进行手动切换。当然，离子具有许多附加功能！

该应用程序将详细介绍一些天文物体-行星和黑洞。数据将是静态的，但如果需要，您可以使用AngularJS MVC工具添加动态功能。

图1.应用程序主屏幕

图2.应用程序侧栏

创建应用程序模块

每个AngularJS应用程序都需要一个应用程序模块。在引导AngularJS时，您引用了一个名为app-main 。立即创建该模块。创建一个名为common/app的目录和一个名为common/app/app-main.js ，并将以下代码行放入其中：

angular.module('app-main', ['ionic']);

该行定义了一个具有以下依赖关系的app-main模块：ionic。因为您已将app-main定义为应用程序模块，所以ionic将作为其依赖项之一自动加载。通过调整index.html确保正确加载了它：

<body>
<!-- pre-existing <body> content here -->
<!-- New lines to load Ionic JS bundle -->
<script src="ionic/js/ionic.bundle.js"></script>
<!-- Load the application -->
<script src="app/app-main.js"></script>
</body>

使应用程序执行某些操作

给您的应用程序一些内容：编辑index.html并用以下代码替换Hello MobileFirst ：

<!--application UI goes here-->
<!-- Hello MobileFirst -->
<ion-side-menus>
  <ion-side-menu-content>
    <!-- Ionic places our views here-->
    <!-- Configure the global navigation/title bar -->
    <ion-nav-bar class="bar-dark">
      <!-- Default buttons -->
      <ion-nav-buttons side="primary">
        <!-- "Hamburger" menu -->
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
      </ion-nav-buttons>
      <!-- Automatic back button -->
      <ion-nav-back-button></ion-nav-back-button>
    </ion-nav-bar>
    <!-- Contains our views -->
    <ion-nav-view></ion-nav-view>
  </ion-side-menu-content>
  <ion-side-menu side="left">
    <!-- Define our left-hand-side menu -->
    <header class="bar bar-header bar-dark">
      <h1 class="title">Amazing Menu!</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close href="#/home" class="item-icon-left">
          <i class="icon ion-ios7-home"></i> Home
        </ion-item>
        <ion-item class="item-divider">
          Amazing Things
        </ion-item>
        <ion-item nav-clear menu-close href="#/planets" class="item-icon-left">
          <i class="icon ion-planet"></i> Planets
        </ion-item>
        <ion-item nav-clear menu-close href="#/blackholes" class="item-icon-left">
          <i class="icon ion-funnel"></i> Black Holes
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

您还需要调整MFP默认样式表，以使Ionic正常工作。编辑common/css/main.css并添加以下规则：

body {
  position: initial;
}

第一次运行该应用程序：

mfp build
mfp deploy
mfp preview

如果您使用的是MFP Studio，请构建，部署和预览应用程序。还没有内容，但是您可以看到，单击时，“汉堡包”按钮将打开侧面菜单。您也可以滑动菜单以打开和关闭。这些按钮无效，因此请添加一些内容。

向您的应用程序添加内容

您的全局导航已定义，但是您还没有任何内容。 Ionic在视图中组织其内容，您需要先定义这些视图，然后才能知道如何显示它们。为此，请编辑common/app/app-main.js文件，并进行如下调整：

angular.module('app-main', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
  // Define our views
  $stateProvider.state('home', {
    url: "/home",
    templateUrl: 'views/home.html'
    // If you wanted some AngularJS controller behaviour...
    // controller: "HomeCtrl as ctrl"
  });
  $stateProvider.state('planets', {
    url: "/planets",
    templateUrl: 'views/planets.html'
  });
  $stateProvider.state('blackholes', {
    url: '/blackholes',
    templateUrl: 'views/blackholes.html'
  });
  // Default view to show
  $urlRouterProvider.otherwise('/home');
});

在这里，您已经定义了三个视图。其中之一（主视图）被指定为默认值。

定义视图内容

创建一个名为common/views的文件夹，然后创建一个名为common/views/home.html的文件，然后使用以下内容填充该文件：

<ion-view hide-back-button="true" title="Space!">
  <ion-pane>
    <ion-content overflow-scroll="true">
      <div class="list card">
        <ion-item class="item-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/NGC_4414_%28NASA-med%29.jpg">
        </ion-item>
        <ion-item>Full of wonderful things.  Take a look!</ion-item>
      </div>
      <div class="list card">
        <ion-item class="item-icon-right item-icon-left" href="#/planets">
          <i class="icon ion-planet"></i>
          Planets
          <i class="icon ion-ios7-arrow-forward"></i>
        </ion-item>
        <ion-item class="item-icon-right item-icon-left" href="#/blackholes">
          <i class="icon ion-funnel"></i>
          Black Holes
          <i class="icon ion-ios7-arrow-forward"></i>
        </ion-item>
      </div>
    </ion-content>
  </ion-pane>
</ion-view>

添加第二个文件common / views / planets.html：

<ion-view title="Planets">
  <ion-pane>
    <ion-content overflow-scroll="true">
      <div class="list card">
        <ion-item class="item-text-wrap">
          <h2>Jupiter</h2>
          <p>The largest planet in the solar system.</p>
        </ion-item>
        <ion-item class="item-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Jupiter_by_Cassini-Huygens.jpg">
        </ion-item>
      </div>
      <div class="list card">
        <ion-item class="item-text-wrap">
          <h2>Saturn</h2>
          <p>The second largest planet in the solar system.</p>
        </ion-item>
        <ion-item class="item-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Saturn_PIA06077.jpg">
        </ion-item>
      </div>
    </ion-content>
  </ion-pane>
</ion-view>

添加第三个文件common / views / blackholes.html：

<ion-view title="Black Holes">
  <ion-pane>
    <ion-content overflow-scroll="true">
      <div class="list card">
        <ion-item class="item-text-wrap">
          <h2>Black Hole A</h2>
          <p>Simulated view of a black hole (center) in front of the Large
          Magellanic Cloud.</p>
        </ion-item>
        <ion-item class="item-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/BH_LMC.png">
        </ion-item>
      </div>
      <div class="list card">
        <ion-item class="item-text-wrap">
          <h2>Pictures are hard to find</h2>
          <p>"Well, the thing about a black hole - its main distinguishing
          feature - is it's black. And the thing about space - the colour of
          space, your basic space colour - is black. So how are you supposed
          to see them?" -- Holly, "Red Dwarf"</p>
        </ion-item>
      </div>
    </ion-content>
  </ion-pane>
</ion-view>