Cordova / PhoneGap开发入门，基于HTML、CSS和JavaScript的Android移动开发框架

来源：互联网发布：阿里云可以做ip代理吗编辑：程序博客网时间：2024/06/05 16:57

一、Cordova 简介：

1. 基于HTML，CSS和JavaScript的移动开发框架
2. 跨平台快速开发：能够支持iPhone，Android，Palm，Symbian, WP7, WP8, Bada和Blackberry
3. 核心功能：包括地理定位，加速器，联系人，声音和振动等
4. 拥有丰富的插件，可以以此扩展无限的功能

二、历史由来

1. PhoneGap：http://phonegap.com 由一个叫Nitobi 的小公司发家，后被Adobe公司收购。

2. Cordova：http://cordova.apache.org Adobe后来将PhoneGap核心代码贡献给Apache并进行开源，重新取名Cordova。因为 Nitobi 的办公地点曾设在在一条叫Cordova 的街道上。

三、PhoneGap／Cordova 系统架构图

四、Cordova 类图

核心Java 类：

1. CordovaPlugin.java
所有插件的父类，主要实现execute()
2. PluginManager.java
负责插件的加载、初始化、和事件的分发调用
3. CordovaInterface.java
Activity 与插件之间的接口
4. CordovaWebView.java
对WebView 进行封装，接口类，提供Java Native 与JS之间的通信
5. SystemExposedJsApi.java / CordovaBridge.java
Java 与 JS 之间的调用API

五、系统逻辑流程图

核心JavaScript 文件：

1. cordova.js
框架核心JS文件，实现JS框架消息的通信机制
2. exec.js
各种函数定义、声明
3. cordova_plugins.js
插件注册表
4. customerPlugin.js
用户自己定义的JS文件

六、搭建开发环境（Mac电脑）：

1. 首先安装 node.js

自2.9.0以后，不提供直接下载，需要用来Cordova命令行工具，Cordova命令行工具运行于Node环境. 安装Node 我们需要用到 homebrew

2. 安装homebrew 工具

$ ruby -e "$(curl -fsSkL https://raw.github.com/Homebrew/homebrew/go/install)”
$ brew install node 该命令执行后，自动装好node和npm

3. 安装Cordova

$ npm install -g cordova 该命令执行后，cordova 就你的电脑上安装好了。可以通过“$ cordova -v” 查看是否安装成功：

七、创建Cordova 工程

1. 创建工程目录

$ cordova create <project-path> 执行完之后，就自动创建出如下目录

2. 进入到工程目录，创建移动平台工程文件

$ cd <project-path>

$ cordova platform 查看所有支持的平台

$ cordova platform add android 创建android 平台对应的工程文件，执行该命令后，会自动生成一个/platform/android 工程目录

3. 将platform下面的android 工程导入到eclipse，在eclipse中工程目录结构如下：

4. Eclipse 编译工程，安装到手机执行，发现一个 helloworld 的 HTML页面(index.html)，啥东东也没有：

八、快速开发

Cordova 提供了CordovaActivity 、 CordovaInterface 和CordovaPlugin 让Android 开发者快速开发：

1. 首选 MyActivity直接继承类 CordovaActivity

2. 或者MyActivity自己实现CordovaInterface 接口

3. 用户继承CordovaPlugin, 实现自定义插件

4. 每个实现了CordovaInterface接口的Activity都对应一套独立的WebView，CordovaPlugin，PluginManager，没有共享的

九、插件扩展举例：Camera

Cordova 已经实现了丰富的插件，开发着可以直接安装已有的插件，扩展自己App功能。当然也可以自定义插件，只需要仿照已有的插件进行开发。

1. 安装Camera 插件

2. 安装完后，会在原有的android 工程下自动生成Camera插件文件，如下图所示：

3. 首先在helloworld的页面(index.html)里添加一个Camera测试页面的跳转链接：<a href="file:///android_asset/www/camera.html">Test Camera</a>

<!DOCTYPE html><!--    Licensed to the Apache Software Foundation (ASF) under one    or more contributor license agreements.  See the NOTICE file    distributed with this work for additional information    regarding copyright ownership.  The ASF licenses this file    to you under the Apache License, Version 2.0 (the    "License"); you may not use this file except in compliance    with the License.  You may obtain a copy of the License at    http://www.apache.org/licenses/LICENSE-2.0    Unless required by applicable law or agreed to in writing,    software distributed under the License is distributed on an    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY     KIND, either express or implied.  See the License for the    specific language governing permissions and limitations    under the License.--><html>    <head>        <!--        Customize this policy to fit your own app's needs. For more guidance, see:            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy        Some notes:            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:                * Enable inline JS: add 'unsafe-inline' to default-src        --><!--         <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> -->        <meta name="format-detection" content="telephone=no">        <meta name="msapplication-tap-highlight" content="no">        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">        <link rel="stylesheet" type="text/css" href="css/index.css">        <title>Hello World</title>    </head>    <body>        <div class="app">            <h1>Apache Cordova</h1>            <div id="deviceready" class="blink">                <p class="event listening">Connecting to Device</p>                <p class="event received">Device is Ready</p>            </div>                        <div style="margin-top:50px">                <a href="file:///android_asset/www/camera.html">Test Camera</a>            </div>        </div>                <script type="text/javascript" src="cordova.js"></script>        <script type="text/javascript" src="js/index.js"></script>        <script type="text/javascript">            document.getElementById("myBtn").onclick=function(){ testCamera() };                       function testCamera() {               navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });            }            function onSuccess(imageURI) {                var image = document.getElementById("myTestImage");                image.src = imageURI;            }            function onFail(message) {                alert('Failed because: ' + message);            }        </script>    </body></html>

4. 然后编写Camera 的测试的页面 camera.html

<!DOCTYPE html><html>  <head>    <title>Capture Photo</title>    <script type="text/javascript" src="cordova.js"></script>    <script type="text/javascript">        var pictureSource;  //设定图片来源        var destinationType; //选择返回数据的格式            document.addEventListener("deviceready",onDeviceReady,false);            // Cordova准备好了可以使用了        function onDeviceReady() {            pictureSource=navigator.camera.PictureSourceType;            destinationType=navigator.camera.DestinationType;        }            function onPhotoDataSuccess(imageData) {          // base64 encoded image data          var smallImage = document.getElementById('smallImage');          smallImage.style.display = 'block';          //在使用base64编码的时候需要使用这样的前缀          smallImage.src = "data:image/jpeg;base64," + imageData;        }            // Called when a photo is successfully retrieved        //        function onPhotoURISuccess(imageURI) {          // image file URI           var largeImage = document.getElementById('largeImage');          largeImage.style.display = 'block';          //使用image file URI 直接赋值就可以了          largeImage.src = imageURI;        }            // 第一个按钮调用函数        function capturePhoto() {            navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,            destinationType: destinationType.DATA_URL, sourceType: pictureSource.CAMERA  });        }            //第二个按钮调用的函数        function capturePhotoEdit() {            navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,            destinationType: destinationType.DATA_URL, sourceType: pictureSource.CAMERA  });        }            //第三/四个按钮调用的函数        function getPhoto(source) {            // Retrieve image file location from specified source            navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,             destinationType: destinationType.FILE_URI, sourceType: source });        }            function onFail(message) {          alert('Failed because: ' + message);        }    </script>  </head>    <body>    <h1 style="margin-top:10px;text-align:center">Camera HTML Page</h1>     <button style="margin-top:10px" onclick="capturePhoto();">Capture Photo</button> <br>    <button style="margin-top:10px" onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>    <button style="margin-top:10px" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>    <button style="margin-top:10px" onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>    <img style="display:none;width:200px;height:200px;margin-top:10px" id="smallImage" src="" />    <img style="display:none;width:200px;height:200px;margin-top:10px" id="largeImage" src="" />  </body></html>

测试页面的四个button，分别调用不同的camera 接口，具体的接口定义可以参考 API Reference：https://www.npmjs.com/package/cordova-plugin-camera

getPicture(onSuccess, onFail, { quality: 50, destinationType: DATA_URL});
getPicture(onSuccess, onFail, { quality: 50, destinationType: DATA_URL, allowEdit : true});
getPicture(onSuccess, onFail, { quality: 50, destinationType: FILE_URL, source:PHOTOLIBRARY });
getPicture(onSuccess, onFail, { quality: 50, destinationType: FILE_URL, source:SAVEDPHOTOALBUM });

5. Demo 演示