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

JavaScript 写多了，要想真正提高js水平，研究其他js框架源码是不错的选择。Github上大部分都是js、css相关的项目，可以有目的性的 check out 下来，研读研读，还是非常收益的，跟随nb的人，也会慢慢变的nb。

场景：有一个朋友，他公司是做移动应用开发的，3个安卓开发人员，3个 ios，然后是 java 开发，美工，10多个人的公司，主要是以接项目为主，一个项目（电商、微信、聊天类型的）大概在20万左右，差不多1个半月做完（代码质量能不能保证，不知道，不过我觉得开发是一件很严谨的事，要开发出高性能、高健壮性的程序，还是很难的），公司销售很给力，能谈下好几个项目。问题来了，要能同时进行好几个项目，就要招移动开发的人，如果有时没接到项目，那，又会闲着。如果有些客户要做 wp ，黑莓的，那就做不来了。于是迫切想找一些跨平台的开发技术来解决问题？

这个场景是真实的，不是 yy，那么我们来玩玩 Ionic ，Apache Cordova 这些技术，这样我们就有更深入的理解了。

我做过一些安卓的小东西，ios 没玩过；我是一个 web技术狂热者，很看好web技术；我认为那些 android 、ios 等等将会慢慢被 web 技术取代，浏览器作为跨平台的中间件，将会成为主流。do not mind

尊重原创，转载请注明出去：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

然后在IDE中打开项目：

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

www是主目录

index.html 是主页面

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

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

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

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

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

来改我们的inde.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" target="_blank" rel="external nofollow"  rel="stylesheet">
    <link href="css/style.css" target="_blank" rel="external nofollow"  rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" target="_blank" rel="external nofollow"  rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>
<body ng-app="todoApp" ng-controller="TodoController" ng-cloak>

    <ion-side-menus>

        <!-- Center content -->
        <ion-side-menu-content>
            <ion-header-bar class="bar-dark">
                <button class="button button-icon" ng-click="toggleProjects()">
                    <i class="icon ion-navicon"></i>
                </button>
                <h1 class="title">{{activeProject.title}}</h1>
                <!-- New Task button-->
                <button class="button button-icon" ng-click="newTask()">
                    <i class="icon ion-compose"></i>
                </button>
            </ion-header-bar>
            <ion-content scroll="false">
                <ion-list>
                    <ion-item ng-repeat="task in activeProject.tasks">
                        {{task.title}}
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu-content>

        <!-- Left menu -->
        <ion-side-menu side="left">
            <ion-header-bar class="bar-dark">
                <h1 class="title">Projects</h1>
                <button class="button button-icon ion-plus" ng-click="newProject()">
                </button>
            </ion-header-bar>
            <ion-content scroll="false">
                <ion-list>
                    <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
                        {{project.title}}
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>

    </ion-side-menus>

    <script id="new-task.html" type="text/ng-template">
        <div class="modal">

            <!-- Modal header bar -->
            <ion-header-bar class="bar-secondary">
                <h1 class="title">New Task</h1>
                <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
            </ion-header-bar>

            <!-- Modal content area -->
            <ion-content>

                <form ng-submit="createTask(task)">
                    <div class="list">
                        <label class="item item-input">
                            <input type="text" placeholder="What do you need to do?" autofocus ng-model="task.title">
                        </label>
                    </div>
                    <div class="padding">
                        <button type="submit" class="button button-block button-positive">Create Task</button>
                    </div>
                </form>

            </ion-content>
        </div>
    </script>

</body>
</html>

js/app.js

var todoApp = angular.module('todoApp', ['ionic']);

todoApp.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
});


todoApp.controller('TodoController', function ($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {

    // A utility function for creating a new project
    // with the given projectTitle
    var createProject = function (projectTitle) {
        var newProject = Projects.newProject(projectTitle);
        $scope.projects.push(newProject);
        Projects.save($scope.projects);
        $scope.selectProject(newProject, $scope.projects.length - 1);
    }


    // Load or initialize projects
    $scope.projects = Projects.all();

    // Grab the last active, or the first project
    $scope.activeProject = $scope.projects[Projects.getLastActiveIndex()];

    // Called to create a new project
    $scope.newProject = function () {
        var projectTitle = prompt('Project name');
        if (projectTitle) {
            createProject(projectTitle);
        }
    };

    // Called to select the given project
    $scope.selectProject = function (project, index) {
        $scope.activeProject = project;
        Projects.setLastActiveIndex(index);
        $ionicSideMenuDelegate.toggleLeft(false);
    };

    // Create our modal
    $ionicModal.fromTemplateUrl('new-task.html', function (modal) {
        $scope.taskModal = modal;
    }, {
        scope: $scope
    });

    $scope.createTask = function (task) {
        if (!$scope.activeProject || !task) {
            return;
        }
        $scope.activeProject.tasks.push({
            title: task.title
        });
        $scope.taskModal.hide();

        // Inefficient, but save all the projects
        Projects.save($scope.projects);

        task.title = "";
    };

    $scope.newTask = function () {
        $scope.taskModal.show();
    };

    $scope.closeNewTask = function () {
        $scope.taskModal.hide();
    }

    $scope.toggleProjects = function () {
        $ionicSideMenuDelegate.toggleLeft();
    };


    // Try to create the first project, make sure to defer
    // this by using $timeout so everything is initialized
    // properly
    $timeout(function () {
        if ($scope.projects.length == 0) {
            while (true) {
                var projectTitle = prompt('Your first project title:');
                if (projectTitle) {
                    createProject(projectTitle);
                    break;
                }
            }
        }
    });

});


todoApp.factory('Projects', function () {
    return {
        all: function () {
            var projectString = window.localStorage['projects'];
            if (projectString) {
                return angular.fromJson(projectString);
            }
            return [];
        },
        save: function (projects) {
            window.localStorage['projects'] = angular.toJson(projects);
        },
        newProject: function (projectTitle) {
            // Add a new project
            return {
                title: projectTitle,
                tasks: []
            };
        },
        getLastActiveIndex: function () {
            return parseInt(window.localStorage['lastActiveProject']) || 0;
        },
        setLastActiveIndex: function (index) {
            window.localStorage['lastActiveProject'] = index;
        }
    }
})

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

使用

$ ionic serve

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

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

$ ionic run android

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

最后编译，

$ cordova build --release android

来评价这一些技术吧。

天下大势，合久必分，分久必合。

HTML5 + CSS3 + Javascript 最适合作为跨平台的技术栈，其开放，自由，每个人都可以为这些技术的制定，发表意见，像使用 svg 、canvas 、css 3动画开发的游戏，已经在撼动桌游，手游等原生语言开发的应用了，所以不仅仅是应用。

而 Apache Cordova 只是一个过渡阶段的产物。对于新技术的出现，是值得鼓励的。

让我们拭目以待，web 技术明天的发展吧。

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

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条