zoukankan      html  css  js  c++  java

  • 使用Ionic + Apache Cordova开发跨平台混合型的移动应用

    尊重原创，转载请注明出去：http://blog.csdn.net/zoutongyuan/article/details/41910903

    1、Ionic 是什么？

    好吧，我们看 Ionic 能给我们提供什么?  一个样式库，你可以使用它 来 装饰你的 HTML 网页 ，看起来 想 移动程序的 界面，什么 header 、content、footer、grid、list。这貌似没什么 实质性的东西， sencha touch ，jq 都能提供 。

    一个用 AngularJS 写的 工具库，姑且叫它 组件库吧。Ionic的 grid 设计的比较合理，比 bootstrap的 更强大。

    当然它 还包含 了angular-animate、angular-resource、angular-sanitize、angular-ui-router，适应移动平台的模块库。

    2、Apache Cordova 是什么？

    Apache Cordova 提供用 Javascript 访问 移动平台  的 API 。

    其内部是用每个 平台下的  web view 组件，运行 程序，然后实现了 每个平台下的 一套 CordovaLib  供你写的程序调用，然后你就可以 调用 摄像头、磁盘等 重api。

    接下来 动手玩玩。首先安装nodejs，和平台的 （ios || android）sdk，这里不在 累述 

    亲自测试！！

    1、先安装 cordova

    npm install -g cordova

    2、安装 Ionic

    npm install -g ionic

    3、创建项目

    ionic start todo（文件名） blank

    4、配置平台

    ionic platform add android或者ionic platform add ios

    然后 在IDE中打开 项目：

    www是主目录

    index.html 是 主页面

    刚才我们配置 平台的时候 ，工具帮我们做了一件事，创建 了一个 安卓 应用，

    创建一个 CordovaApp 类，继承自 CordovaActivity ， Activity 是 安卓的4大组件，表示可以看到 了一块窗口。

    它做了一个 引导，就是loadUrl，这里不做过多的 介绍，有兴趣 我们以后深入研究，这里我们只是 发散性的引导。

    现在，你就可以使用 ionic 和 Apache Cordova 提供的 api 来 开发 跨平台的应用了。

    来改我们的inde.html

    [html] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="utf-8">  
    5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  
    6.     <title></title>  
    7.   
    8.     <link href="lib/ionic/css/ionic.css" rel="stylesheet">  
    9.     <link href="css/style.css" rel="stylesheet">  
    10.   
    11.     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above  
    12.     <link href="css/ionic.app.css" rel="stylesheet">  
    13.     -->  
    14.   
    15.     <!-- ionic/angularjs js -->  
    16.     <script src="lib/ionic/js/ionic.bundle.js"></script>  
    17.   
    18.     <!-- cordova script (this will be a 404 during development) -->  
    19.     <script src="cordova.js"></script>  
    20.   
    21.     <!-- your app's js -->  
    22.     <script src="js/app.js"></script>  
    23. </head>  
    24. <body ng-app="todoApp" ng-controller="TodoController" ng-cloak>  
    25.   
    26.     <ion-side-menus>  
    27.   
    28.         <!-- Center content -->  
    29.         <ion-side-menu-content>  
    30.             <ion-header-bar class="bar-dark">  
    31.                 <button class="button button-icon" ng-click="toggleProjects()">  
    32.                     <i class="icon ion-navicon"></i>  
    33.                 </button>  
    34.                 <h1 class="title">{{activeProject.title}}</h1>  
    35.                 <!-- New Task button-->  
    36.                 <button class="button button-icon" ng-click="newTask()">  
    37.                     <i class="icon ion-compose"></i>  
    38.                 </button>  
    39.             </ion-header-bar>  
    40.             <ion-content scroll="false">  
    41.                 <ion-list>  
    42.                     <ion-item ng-repeat="task in activeProject.tasks">  
    43.                         {{task.title}}  
    44.                     </ion-item>  
    45.                 </ion-list>  
    46.             </ion-content>  
    47.         </ion-side-menu-content>  
    48.   
    49.         <!-- Left menu -->  
    50.         <ion-side-menu side="left">  
    51.             <ion-header-bar class="bar-dark">  
    52.                 <h1 class="title">Projects</h1>  
    53.                 <button class="button button-icon ion-plus" ng-click="newProject()">  
    54.                 </button>  
    55.             </ion-header-bar>  
    56.             <ion-content scroll="false">  
    57.                 <ion-list>  
    58.                     <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">  
    59.                         {{project.title}}  
    60.                     </ion-item>  
    61.                 </ion-list>  
    62.             </ion-content>  
    63.         </ion-side-menu>  
    64.   
    65.     </ion-side-menus>  
    66.   
    67.     <script id="new-task.html" type="text/ng-template">  
    68.         <div class="modal">  
    69.   
    70.             <!-- Modal header bar -->  
    71.             <ion-header-bar class="bar-secondary">  
    72.                 <h1 class="title">New Task</h1>  
    73.                 <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>  
    74.             </ion-header-bar>  
    75.   
    76.             <!-- Modal content area -->  
    77.             <ion-content>  
    78.   
    79.                 <form ng-submit="createTask(task)">  
    80.                     <div class="list">  
    81.                         <label class="item item-input">  
    82.                             <input type="text" placeholder="What do you need to do?" autofocus ng-model="task.title">  
    83.                         </label>  
    84.                     </div>  
    85.                     <div class="padding">  
    86.                         <button type="submit" class="button button-block button-positive">Create Task</button>  
    87.                     </div>  
    88.                 </form>  
    89.   
    90.             </ion-content>  
    91.         </div>  
    92.     </script>  
    93.   
    94. </body>  
    95. </html>  


    js/app.js

    [javascript] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. var todoApp = angular.module('todoApp', ['ionic']);  
    2.   
    3. todoApp.run(function ($ionicPlatform) {  
    4.     $ionicPlatform.ready(function () {  
    5.         if (window.cordova && window.cordova.plugins.Keyboard) {  
    6.             cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);  
    7.         }  
    8.         if (window.StatusBar) {  
    9.             StatusBar.styleDefault();  
    10.         }  
    11.     });  
    12. });  
    13.   
    14.   
    15. todoApp.controller('TodoController', function ($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {  
    16.   
    17.     // A utility function for creating a new project  
    18.     // with the given projectTitle  
    19.     var createProject = function (projectTitle) {  
    20.         var newProject = Projects.newProject(projectTitle);  
    21.         $scope.projects.push(newProject);  
    22.         Projects.save($scope.projects);  
    23.         $scope.selectProject(newProject, $scope.projects.length - 1);  
    24.     }  
    25.   
    26.   
    27.     // Load or initialize projects  
    28.     $scope.projects = Projects.all();  
    29.   
    30.     // Grab the last active, or the first project  
    31.     $scope.activeProject = $scope.projects[Projects.getLastActiveIndex()];  
    32.   
    33.     // Called to create a new project  
    34.     $scope.newProject = function () {  
    35.         var projectTitle = prompt('Project name');  
    36.         if (projectTitle) {  
    37.             createProject(projectTitle);  
    38.         }  
    39.     };  
    40.   
    41.     // Called to select the given project  
    42.     $scope.selectProject = function (project, index) {  
    43.         $scope.activeProject = project;  
    44.         Projects.setLastActiveIndex(index);  
    45.         $ionicSideMenuDelegate.toggleLeft(false);  
    46.     };  
    47.   
    48.     // Create our modal  
    49.     $ionicModal.fromTemplateUrl('new-task.html', function (modal) {  
    50.         $scope.taskModal = modal;  
    51.     }, {  
    52.         scope: $scope  
    53.     });  
    54.   
    55.     $scope.createTask = function (task) {  
    56.         if (!$scope.activeProject || !task) {  
    57.             return;  
    58.         }  
    59.         $scope.activeProject.tasks.push({  
    60.             title: task.title  
    61.         });  
    62.         $scope.taskModal.hide();  
    63.   
    64.         // Inefficient, but save all the projects  
    65.         Projects.save($scope.projects);  
    66.   
    67.         task.title = "";  
    68.     };  
    69.   
    70.     $scope.newTask = function () {  
    71.         $scope.taskModal.show();  
    72.     };  
    73.   
    74.     $scope.closeNewTask = function () {  
    75.         $scope.taskModal.hide();  
    76.     }  
    77.   
    78.     $scope.toggleProjects = function () {  
    79.         $ionicSideMenuDelegate.toggleLeft();  
    80.     };  
    81.   
    82.   
    83.     // Try to create the first project, make sure to defer  
    84.     // this by using $timeout so everything is initialized  
    85.     // properly  
    86.     $timeout(function () {  
    87.         if ($scope.projects.length == 0) {  
    88.             while (true) {  
    89.                 var projectTitle = prompt('Your first project title:');  
    90.                 if (projectTitle) {  
    91.                     createProject(projectTitle);  
    92.                     break;  
    93.                 }  
    94.             }  
    95.         }  
    96.     });  
    97.   
    98. });  
    99.   
    100.   
    101. todoApp.factory('Projects', function () {  
    102.     return {  
    103.         all: function () {  
    104.             var projectString = window.localStorage['projects'];  
    105.             if (projectString) {  
    106.                 return angular.fromJson(projectString);  
    107.             }  
    108.             return [];  
    109.         },  
    110.         save: function (projects) {  
    111.             window.localStorage['projects'] = angular.toJson(projects);  
    112.         },  
    113.         newProject: function (projectTitle) {  
    114.             // Add a new project  
    115.             return {  
    116.                 title: projectTitle,  
    117.                 tasks: []  
    118.             };  
    119.         },  
    120.         getLastActiveIndex: function () {  
    121.             return parseInt(window.localStorage['lastActiveProject']) || 0;  
    122.         },  
    123.         setLastActiveIndex: function (index) {  
    124.             window.localStorage['lastActiveProject'] = index;  
    125.         }  
    126.     }  
    127. })  


    这个todo 我们没有用到 Apache Cordova 的api，所以，这个项目在浏览器中 也可以运行。

    使用 

    $ ionic serve

    在我的小米3 中 看看。使用下面命令，你可能要安装好 驱动，

    $ ionic run android

    最后编译，

    ionic serve  可能会让你选择IP地址

    根据实际情况选择 也可以手动选择

    ionic serve address {ipaddress}
  • 相关阅读:
    webstorm创建和搭建vue项目
    win10企业版激活方法
    Jquery使用规范（一）
    Json序列化循环引用的问题
    后台调用存储过程
    将金额人民币转化为大写 C#
    谷歌分辨率扩展程序的添加
    MVC 删除文件
    MVC C# 调用存储过程
    XML 转换 lits<>
  • 原文地址：https://www.cnblogs.com/Eplayed/p/5488615.html
Copyright © 2011-2022 走看看