Cordova 开发基础

最新推荐文章于 2024-03-18 23:36:24 发布

plx_csdn

最新推荐文章于 2024-03-18 23:36:24 发布

阅读量511

点赞数

分类专栏： Cordova 开发

Cordova 开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

转载地址:点击打开链接

Cordova是什么？
　　初学Cordova的人，虽然了解一点点，知道Cordova是用来将html, css, js变成app的，但并不知道到底是怎么用的，原理是什么。经常会有这样的困惑：
　　它是一个可以把H5代码变成iOS、安卓等原生代码的东西？
　　它是一个封装了H5浏览器的壳？可以装在iOS、安卓等平台的app，一打开这个APP就会访问我web app的内容？
　　还是一个web前端框架，用户使用手机自带浏览器访问我的web app就可以调用他手机的摄像头和麦克风？

　　1.它不会把你的前端页面变成 ios 原生的 objective-c 或者 android 的 java 代码，你的界面还是以网页形式呈现的，渲染在 Android 的 WebView 或 iOS 的UIWebView 中。
　　2.不太像壳，只是在运行在 WebView 中的 javascript 代码和原生代码之间建了一座沟通的桥梁，通过它可以用js去访问原生应用。
　　3.不是前端框架， bootstrap、angularjs、jqueryUI 这些是前端框架。cordova更像一个工具。

　　简单点理解，Cordova是一个工具，通过它可以将你做的html网页显示在WebView里面，而你网页中用到的JS可以通过他的API去调用原生的东西，比如照相机等。　　

　　但它做出来的app比原生做出来的app好在哪里呢，直白点说，简便，省钱。因为cordova app显示的页面全是你做的html页面，所以说你写一套code，就可以用在Android上，IOS上，以及Web上。不用去分别找Android工程师，IOS工程师。

　　接下来我们一步一步的介绍如何使用Cordova。学习Cordova做app，首先你要会html,js,还要会安卓的原生的东西。不然你还是别往下看了。

Cordova安装：

　　先安装Nodejs，再通过npm去安装cordova，npm install -g cordova。不会的自行百度。安装完成后执行cordova -v，如果显示cordova的版本，则安装成功。当然，做cordova app，也需要首先在电脑上将安卓的那些环境搭建起来，如sdk等。

创建第一个Cordova项目helloworld：

　　首先cd到一个指定目录下，执行cordova create hello com.example.hello HelloWorld，会为我们创建一个cordova项目hello。

　　接下来我们cd到hello下，执行cordova platform add android --save，会在platform下为我们添加一个android项目。（我写的所有的关于cordova的，都是针对Android的，iOS的几乎不会涉及）。

　　然后将android项目导入到我们的开发工具中，如eclipse。导入之后会有两个项目CordovaLib和MainActivity。我们只需要去关注这个MainActivity就行。运行这个项目，然后在我们的模拟器里显示cordova的欢迎页。至此，cordova android项目创建成功。下一章解释代码，介绍这个项目是如何运行的。

MainActivity.java

　　我们已经将MainActivity导入到了eclipse中。打开scr下com.example.hello下的MainActivity.java。　　

//MainActivity继承了CordovaActivity
public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);
    }
}

　　学过安卓的都知道，Activity在启动的时候会首先调用onCreate方法。

　　loadUrl(launchUrl);会在当前的WebView中去加载首页，当然这个首页是我们自己配置的，在res/xml/config.xml中。<content src="index.html" />。这个路径都是指的assets/www下的路径。

　　这样这个app启动的时候会首先调用这个MainActivity(当然这是在AndroidManifest.xml中配置的)，然后Activity启动的时候会将index.html加载在其WebView中，然后我们就看到了Cordova的页面。

index.html

　　我们再来看看index.html中都有什么内容。

<html>
    <head>
        <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>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

　　在显示这个index页面的时候，会加载两个js文件。cordova.js就是cordova的api，调用原生内容用的，相当于jar包。

index.js

　　再看这个index.js。

var app = {
    // 初始化方法，会调用绑定事件的方法
    initialize: function() {
        this.bindEvents();
    },

    // 绑定事件的方法,事件可以是这些:
    // 'load', 'deviceready', 'offline', and 'online'.
    //该事件是在 cordova 载入完成后发生的事件，它表示cordova 加载完成并准备访问，yourCallbackFunction，相当于程序的入口功能
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },

    // deviceready 后事件处理
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },

    // 事件处理，更新DOM，改变两个元素的css
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

//调用初始化方法
app.initialize();

　　加载index.js之后，程序会首先调用初始化方法，初始化的时候会去绑定事件监听：document.addEventListener('deviceready', this.onDeviceReady, false);

deviceready事件，该事件是在 cordova 载入完成后发生的事件，它表示cordova 加载完成并准备访问，你传进去的回调函数，相当于程序的入口函数。

　　当cordova准备好的时候，会去首先执行你传进去的回调函数，这里是onDeviceReady()。这个方法会改变DOM元素的css样式。

　　最终效果就是，当cordova没有加载完的时候，页面上Apache Cordova下面那里显示的是：Connecting to Device（背景是灰色）。加载完之后，cordova准备好之后，原来显示的消失，现在显示的是：Device is Ready（背景是绿色）

一、插件的安装以及基本信息：

　　我们先在项目中安装调用摄像头的插件cordova-plugin-camera，cd到hello下，执行：

cordova plugin add cordova-plugin-camera

　　然后它会为我们的hello/plugins文件夹下添加cordova-plugin-camera插件（这个是整个这个插件模块，可用于安卓和ios。卸载插件用cordova plugin remove cordova-plugin-camera）；

　　同时也会在我们的platforms/android/platform_www/plugins下面添加对应的安卓的插件cordova-plugin-camera（这个是根据对应的平台生成的对应的插件内容，只可用于本安卓平台）；

　　也会在我们的资源文件夹assets/www/plugins下添加cordova-plugin-camera插件（这个资源文件夹下的所有的文件，才是真正的app运行的时候调用的，加载的文件）；

　　还会为我们的src下添加org.apache.cordova.camera包以及对应的java文件。

　　为什么要在项目中加这么多，这只是cordova的机制，我们不作重点研究。这三个目录是有不同的作用的，但我们只重点关注assets/www目录下。

　　除了上面这些，加完这个插件也会改变一些其他文件的内容，首先看res/xml/config.xml，最后多了一项配置信息：

<feature name="Camera">
        <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>

　　feature · name："js中间件通过它调用java方法"。
　（中间件就是我们的插件对应的一些js文件。我们写的js程序通过这些插件（中间件）去调用Jjava原生内容）
　　param · name："android-package" value：原生插件类的包类路径。

　　打开assets/www下cordova_plugins.js，发现其中也增加了很多内容：

cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
    {
        "id": "cordova-plugin-camera.Camera",
        "file": "plugins/cordova-plugin-camera/www/CameraConstants.js",
        "pluginId": "cordova-plugin-camera",
        "clobbers": [
            "Camera"
        ]
    },
    {
        "id": "cordova-plugin-camera.CameraPopoverOptions",
        "file": "plugins/cordova-plugin-camera/www/CameraPopoverOptions.js",
        "pluginId": "cordova-plugin-camera",
        "clobbers": [
            "CameraPopoverOptions"
        ]
    },
    {
        "id": "cordova-plugin-camera.camera",
        "file": "plugins/cordova-plugin-camera/www/Camera.js",
        "pluginId": "cordova-plugin-camera",
        "clobbers": [
            "navigator.camera"
        ]
    },
    {
        "id": "cordova-plugin-camera.CameraPopoverHandle",
        "file": "plugins/cordova-plugin-camera/www/CameraPopoverHandle.js",
        "pluginId": "cordova-plugin-camera",
        "clobbers": [
            "CameraPopoverHandle"
        ]
    }
];
module.exports.metadata = 
// TOP OF METADATA
{
    "cordova-plugin-whitelist": "1.3.0",
    "cordova-plugin-compat": "1.0.0",
    "cordova-plugin-camera": "2.3.0"
};
// BOTTOM OF METADATA
});

　　id:插件中某个模块或具体功能的id

　　file:这个id对应的js文件（实现这个模块或功能的文件）

　　pluginId:插件的ID，通过这个ID可以进行插件的安装和卸载

　　clobbers:H5或js通过它去调用js中间件（插件）中定义的方法

二、在代码中如何调用摄像头插件

　　上面我们说的都是在执行了cordova plugin add cordova-plugin-camera，安装好插件之后所产生的内容以及插件的一些基本信息，配置信息。接下来我们说一下如何简单使用这个插件。

　　首先我们修改index.html（指的assets/www下的）

<!DOCTYPE html>
<html>
    <head>
        <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">
            <!-- 这里添加一个button去调用自己写的拍照函数 -->
            <button onClick="takePhoto()">拍照</button>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

　　接下来再修改index.js

//自己定义的拍照函数
function takePhoto() {
    //拍照
    //navigator.camera就是上面我们所说的clobbers定义的东西，用来调用插件中的方法的
    //getPicture就是插件中调用摄像头拍照的方法
    navigator.camera.getPicture(takeSuccess, takeFail, {
        destinationType : Camera.DestinationType.FILE_URI
    });

    //拍照成功后回调
    function takeSuccess(imageURI) {
        console.log('success' + imageURI);
    }

    //失败后回调
    function takeFail(message) {
        navigator.notification.alert("拍照失败，原因：" + message);
    }
}

　　至此，我们的Cordova摄像头插件已经在代码中调用好了，运行我们的项目，就可以拍照了。（当然，模拟器上是不行的，得用真机）

三、getPicture()方法详解：

　　camera.getPicture(cameraSuccess, cameraError, cameraOptions)
　　选择使用摄像头拍照，或从设备相册中获取一张照片。图片以base64编码的字符串或图片URI形式返回。返回值会按照用户通过cameraOptions参数所设定的下列格式之一发送给cameraSuccess回调函数：

　　1.一个字符串，包含Base64编码的照片图像（默认情况）。
　　2.一个字符串，表示在本地存储的图像文件位置。

　　cameraSuccess：

　　提供图像数据的onSuccess回调函数。

function(imageData) {
    // 对图像进行处理
}

　　参数imageData：根据cameraOptions的设定值，为Base64编码的图像数据或图像文件的URI。（字符串类型）

　　errorCallback:

　　提供错误信息的onError回调函数。

function(message) {
    // 显示有用信息
}

　　参数：message：设备本地代码提供的错误信息。（字符串类型）

　　cameraOptions：
　　定制摄像头设置的可选参数。

{    
    quality : 75,
    destinationType : Camera.DestinationType.DATA_URL,
    sourceType : Camera.PictureSourceType.CAMERA,
    allowEdit : true,
    encodingType : Camera.EncodingType.JPEG,
    targetWidth : 100,
    targetHeight : 100
};

　　quality：存储图像的质量，范围是[0,100]。（数字类型）
　　destinationType：选择返回数据的格式。通过navigator.camera.DestinationType进行定义。（数字类型）
　　备注：强烈建议将“Camera.destinationType”设为FILE_URI。
　　sourceType：设定图片来源。通过nagivator.camera.PictureSourceType进行定义。（数字类型）
　　allowEdit：在选择图片进行操作之前允许对其进行简单编辑。（布尔类型）
　　EncodingType：选择返回图像文件的编码方式，通过navigator.camera.EncodingType进行定义。（数字类型）
　　targetWidth：以像素为单位的图像缩放宽度，必须和targetHeight同时使用。相应的宽高比保持不变。（数字类型）
　　targetHeight：以像素为单位的图像缩放高度，必须和targetWidth同时使用。相应的宽高比保持不变。（数字类型）
　　MediaType：设置选择图片的类型，只有当PictureSourceType is PHOTOLIBRARY or SAVEDPHOTOALBUM时才会生效，该参数由nagivator.camera.MediaType (数字类型)定义。

plx_csdn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Cordova 开发基础

转载地址:点击打开链接Cordova是什么？　　初学Cordova的人，虽然了解一点点，知道Cordova是用来将html, css, js变成app的，但并不知道到底是怎么用的，原理是什么。经常会有这样的困惑：　　它是一个可以把H5代码变成iOS、安卓等原生代码的东西？　　它是一个封装了H5浏览器的壳？可以装在iOS、安卓等平台的app，一打开这个APP就会访问我web ap
复制链接

扫一扫

专栏目录