Android项目里集成Cordova详解

最新推荐文章于 2024-07-29 17:18:39 发布

SuzyYoo

最新推荐文章于 2024-07-29 17:18:39 发布

阅读量2.4w

点赞数 9

分类专栏： Android Android--三方集成文章标签： android cordova node.js 混合开发

本文链接：https://blog.csdn.net/u013491677/article/details/51985390

版权

本文详细介绍了如何在Android项目中集成Cordova，包括安装node.js，通过cmd创建项目，导入并运行项目，调用插件，以及自定义插件的步骤。还涉及到在Android Studio环境下将CordovaLib作为依赖导入，以及在CordovaActivity中添加原生View组件和在Fragment中使用CordovaWebView的相关技巧。

摘要由CSDN通过智能技术生成

一安装node.js

下载地址：https://nodejs.org/en/

安装完成后，cmd执行 npm install -g cordova ，全局安装Cordova。

注意：可能会有点慢，请耐心等待！

二 cmd创建Android项目

1.新建一个项目：
路径名>cordova create 文件名包名工程名
2.添加Android平台：cordova platform add android

三导入工程运行一下

1.导入工程
2.运行一下，如果出现以下界面，恭喜你，Cordova环境集成成功，你可以开始下一步操作了。

四调用插件

1.cmd添加摄像机插件：android路径名>cordova plugin add cordova-plugin-camera
2.查看已安装的插件列表

备注：懒得进行以上步骤的朋友，可以点击以下链接直接下载，对于开发使用没有影响。
1. 基于node.js4.47无插件下载
2. 基于node.jd4.4.7全插件下载
3.编写index.html文件

在head里加入：

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
 <script type="text/javascript" charset="utf-8">

            var destinationType;

            document.addEventListener("deviceready",onDeviceReady,false);

            //Cordova加载完成会触发
            function onDeviceReady() {
    
                destinationType=navigator.camera.DestinationType;
            }

            //拍照
            function capturePhoto() {
    
                if(!navigator.camera){
                    alert('camera:')
                }
                //拍照并获取Base64编码的图像（quality : 存储图像的质量，范围是[0,100]）
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                                            destinationType: destinationType.DATA_URL }
                                            );
            }

            //拍照成功
            function onPhotoDataSuccess(imageData) {
    
                console.log(imageData);
                var smallImage = document.getElementById('smallImage');
                smallImage.style.display = 'block';
                smallImage.src = "data:image/jpeg;base64," + imageData;
            }

            //拍照失败
            function onFail(message) {
    
                alert('拍照失败: ' + message);
            }
        </script>
</head>

在body里加入：

 <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="capturePhoto();">拍摄照片</button> <br>
        <img style="display:none;width:240px;height:320px;" id="smallImage" src="" />
 </body>

4.调用相机插件：

1.将CordovaLib作为Library引入到项目中；
2.把示例demo中的src目录下的org文件夹、assets文件夹下内容、res文件夹下xml文件夹下的config.xml、AndroidManifest.xml中权限服务考到自己项目中。
3.写代码：
（1）.创建一个activity extends CordovaActivity；
（2）.loadUrl(“file:///android_asset/www/index.html”);
（3）.将步骤3写好的index.html考到assets/www/目录下；
（4）.运行到手机上，应该据可以调用摄像头功能了。