通过 Ionic 构建一个简单的混合式（Hybrid）跨平台移动应用

发布于 2024-11-04 14:38:37 字数 7311 浏览 3 评论 0

介绍

自从混合式移动开发火起来之后，一部分 Web 工程师开始转战移动开发。混合式移动开发技术让 Web 工程师可以开发出各个平台的移动应用，而且不需要学习各个平台的原生编程语言。现在已经有很多诸如 PhoneGap 和 Titanium 这些混合式开发平台来帮助我们进行混合式编程，今天我们要介绍的是一个相比之下更新的混合式移动开发平台 Ionic 。

Ionic 是一个高级 HTML5 混合式移动应用开发框架，同时也是一个开源的前端框架。Ionic 应用是基于 Cordova 的, 所以 Cordova 相关的工具也都可以构建到应用中去，Lonic 注重的是视觉效果和用户体验，所以使用了 AngularJS 来构建很各种酷的效果。

安装

想要开始 Ionic 开发，你需要先安装 Node.js 。

然后根据你的开发环境来安装相应的 Android 或 IOS 平台，在这篇文章中，我们会创建一个 Android 应用。

接下来你要安装一个 Cordova 和 Ionic 的命令行工具，操作如下：

    npm install -g cordova ionic

安装完成之后，你可以尝试开始创建一个工程：

    npm install -g cordova ionic

进入项目目录，添加 ionic 平台，创建应用，在虚拟机中运行，成为高富帅……

    cd myIonicApp
    ionic platform add android
    ionic build android
    ionic emulate android

下面就是样例应用的效果：

开始

我们已经有一个不错的开始了，现在我们来创建一个 ToDo 列表的应用，我们从空白模板开始：

ionic start myToDoList blank

如果你进入到项目目录，你会看到 AngularJS 文件，这是我们添加相关代码的地方。

创建和展示列表

首先，你需要在应用中添加一个 list，我们直接用 ion-list ，添加 ion-list 到 www/index.html：

    <ion-list>
    <ion-item>Scuba Diving</ion-item>
    <ion-item>Climb Mount Everest</ion-item>
    </ion-list>

之后我们看一看添加 ion-list 之后我们的 html 文件是什么样的：

    <!DOCTYPE html>
    <html>
     
    <head>
    <metacharset="utf-8">
    <metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
     
    <linkhref="lib/ionic/css/ionic.css"rel="stylesheet">
    <linkhref="css/style.css"rel="stylesheet">
     
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
     
    <!-- ionic/angularjs js -->
    <scriptsrc="lib/ionic/js/ionic.bundle.js"></script>
     
    <!-- cordova script (this will be a 404 during development) -->
    <scriptsrc="cordova.js"></script>
     
    <!-- your app's js -->
    <scriptsrc="js/app.js"></script>
    </head>
     
    <bodyng-app="starter">
     
    <ion-pane>
    <ion-header-barclass="bar-stable">
    <h1class="title">My ToDo List</h1>
    </ion-header-bar>
    <ion-content>
    <ion-list>
    <ion-item>Scuba Diving</ion-item>
    <ion-item>Climb Mount Everest</ion-item>
    </ion-list>
    </ion-content>
    </ion-pane>
    </body>
     
    </html>

然后我们可以在 www/js/中创建一个 controllers.js 文件，来定义一个新的 cntroller，我们暂且叫它 ToDoListCtrl。这是 controllers.js 文件的内容：

    angular.module('starter.controllers',[])
    .controller('ToDoListCtrl',function($scope){
    });

在上面的代码中，我们定义了一个叫 starter 的 module 和一个叫作 calledToDoListCtrl 的 Controler。

然后我们就要把这个 module 加到我们的应用中了。打开 www/js/app.js ，然后把 module 添加进去：

    angular.module('starter',['ionic','starter.controllers'])
    .run(function($ionicPlatform){
    $ionicPlatform.ready(function(){
    if(window.StatusBar){
    StatusBar.styleDefault();
    }
    });
    })

我们继续，定义一个$scope 来携带 ToDo list 的条目，ToDoListCtrl 中声明一个新的$scope 变量，如下：

    .controller('ToDoListCtrl',function($scope){
     
    $scope.toDoListItems =[{
    task:'Scuba Diving',
    status:'not done'
    },{
    task:'Climb Everest',
    status:'not done'
    }]
    });

把 controllers.js 添加到 index.html 中：

    <ion-listng-controller="ToDoListCtrl">
    <ion-itemng-repeat="item in toDoListItems">
    {{item.task}}
    </ion-item>
    </ion-list>

在上面的代码中，我们添加了 bar-positive 来给应用加颜色。你可以有同样添加很多不同的 header。这里有详细的文档： here 。

我们现在需要在 index.html 中添加一个 button 来触发事件：

    <scriptid="modal.html"type="text/ng-template">
    <div class="modal">
     
    <div class="bar bar-header bar-calm">
    <button class="button" ng-click="closeModal()">back</button>
    <h1 class="title">Add Item</h1>
    </div>
    <br></br>
    <br></br>
    <form ng-submit="AddItem(data)">
    <div class="list">
    <div class="list list-inset">
    <label class="item item-input">
    <input type="text" placeholder="ToDo Item" ng-model="data.newItem">
    </label>
    </div>
    <button class="button button-block button-positive" type="submit">
    AddItem
    </button>
    </div>
    </form>
     
    </div>
    </script>

现在确认一下，在上面的操作中，我们在 modal 中添加了一个 header，一个 input box 和一个 button。

我们同样有需要一个回退的 Button 在 header 中，它用来触发 closeModal() 功能。

现在我们开始绑定 ionic modal 到我们的 controller 中，我们通过如下的方法把 $ionicModal 注入到 controller 中：

    angular.module('starter.controllers',[])
    .controller('ToDoListCtrl',function($scope, $ionicModal){
    // array list which will contain the items added
    $scope.toDoListItems =[];
    //init the modal
    $ionicModal.fromTemplateUrl('modal.html',{
    scope: $scope,
    animation:'slide-in-up'
    }).then(function(modal){
    $scope.modal = modal;
    });
    // function to open the modal
    $scope.openModal =function(){
    $scope.modal.show();
    };
    // function to close the modal
    $scope.closeModal =function(){
    $scope.modal.hide();
    };
    //Cleanup the modal when we're done with it!
    $scope.$on('$destroy',function(){
    $scope.modal.remove();
    });
    //function to add items to the existing list
    $scope.AddItem=function(data){
    $scope.toDoListItems.push({
    task: data.newItem,
    status:'not done'
    });
    data.newItem ='';
    $scope.closeModal();
    };
     
    });

我们在上面的代码中使用了 .fromTemlateUrl 来加载 html 的内容，然后在初始化的时候通过两个选项定义了$scope 和 animation 的类型。

当然我们也定义了打开、关闭 moda 和添加条目到数组的方法。