欢迎光临
我们一直在努力

Android项目里集成Cordova详解

一 安装node.js

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

安装完成后,cmd执行 npm install -g cordova ,全局安装Cordova。
Android项目里集成Cordova详解
Android项目里集成Cordova详解

注意:可能会有点慢,请耐心等待!


二 cmd创建Android项目

  • 1.新建一个项目:
    路径名>cordova create 文件名 包名 工程名
  • 2.添加Android平台:cordova platform add android
    Android项目里集成Cordova详解

三 导入工程 运行一下

  • 1.导入工程
    Android项目里集成Cordova详解
    Android项目里集成Cordova详解

  • 2.运行一下,如果出现以下界面,恭喜你,Cordova环境集成成功,你可以开始下一步操作了。
    Android项目里集成Cordova详解


四 调用插件

  • 1.cmd添加摄像机插件:android路径名>cordova plugin add cordova-plugin-camera
    Android项目里集成Cordova详解
  • 2.查看已安装的插件列表
    Android项目里集成Cordova详解
    备注:懒得进行以上步骤的朋友,可以点击以下链接直接下载,对于开发使用没有影响。

    1. 基于node.js4.47无插件下载
    2. 基于node.jd4.4.7全插件下载
  • 3.编写index.html文件

在head里加入:

<code><span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"Content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=utf-8"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"cordova.js"</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>&gt;</span><span class="javascript">

            <span class="hljs-keyword">var</span> destinationType;

            document.addEventListener(<span class="hljs-string">"deviceready"</span>,onDeviceReady,<span class="hljs-literal">false</span>);

            <span class="hljs-comment">//Cordova加载完成会触发</span>
            <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onDeviceReady</span><span class="hljs-params">()</span> {</span>
                destinationType=navigator.camera.DestinationType;
            }

            <span class="hljs-comment">//拍照</span>
            <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">capturePhoto</span><span class="hljs-params">()</span> {</span>
                <span class="hljs-keyword">if</span>(!navigator.camera){
                    alert(<span class="hljs-string">'camera:'</span>)
                }
                <span class="hljs-comment">//拍照并获取Base64编码的图像(quality : 存储图像的质量,范围是[0,100])</span>
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: <span class="hljs-number">50</span>,
                                            destinationType: destinationType.DATA_URL }
                                            );
            }

            <span class="hljs-comment">//拍照成功</span>
            <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onPhotoDataSuccess</span><span class="hljs-params">(imageData)</span> {</span>
                console.log(imageData);
                <span class="hljs-keyword">var</span> smallImage = document.getElementById(<span class="hljs-string">'smallImage'</span>);
                smallImage.style.display = <span class="hljs-string">'block'</span>;
                smallImage.src = <span class="hljs-string">"data:image/jpeg;base64,"</span> + imageData;
            }

            <span class="hljs-comment">//拍照失败</span>
            <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onFail</span><span class="hljs-params">(message)</span> {</span>
                alert(<span class="hljs-string">'拍照失败: '</span> + message);
            }
        </span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span></code>

在body里加入:

<code> <span class="hljs-tag">&lt;<span class="hljs-title">body</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"padding-top:50px"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"font-size:23px;"</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">"capturePhoto();"</span>&gt;</span>拍摄照片<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">br</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">img</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"display:none;width:240px;height:320px;"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"smallImage"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">""</span> /&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span></code>
  • 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).运行到手机上,应该据可以调用摄像头功能了。

Android项目里集成Cordova详解

添加插件一览:

1.Device(设备)获取一些设备信息。

cordova plugin add cordova-plugin-device

2.Connection(网络连接)用来判断网络连接类型(2G、3G、4G、Wifi、无连接等)。

cordova plugin add cordova-plugin-network-information

3.Battery(电池)可以获取电池状态信息。

cordova plugin add cordova-plugin-battery-status

4.Accelerometer(加速计)让应用在三维空间(使用笛卡尔三维坐标系统)中决定设备方向。

cordova plugin add cordova-plugin-device-motion

5.Compass(指南针)可以让开发者读取移动设备的朝向。

cordova plugin add cordova-plugin-device-orientation

6.Geolocation(地理定位)让应用判断设备的物理位置。

cordova plugin add cordova-plugin-geolocation

7.Camera(相机)用相机获取图像。

cordova plugin add cordova-plugin-camera

8.MediaCapture(媒体捕获)与Camera API相比,不仅能获取图像,还可以录视频或者录音。

cordova plugin add cordova-plugin-media-capture

9.Media(播放/记录媒体文件)让应用能记录或播放媒体文件。用它可以在手机后台播放音频文件或玩桌面视频游戏。

cordova plugin add cordova-plugin-media

10.file(文件访问操作类)提供对设备上的文件进行读取和写入的功能支持。

cordova plugin add cordova-plugin-file

11.fileTransfer(文件传输)实现文件上传、下载及共享等功能。

cordova plugin add cordova-plugin-file-transfer

12.VisualNotification(可视化消息提醒)不同于js的alert()、confirm()和prompt()方法是同步的。Cordova的alert()、confirm()和prompt()方法是异步的,并且对显示内容有更大的控制权限。

cordova plugin add cordova-plugin-dialogs

13.HardwareNofifications(硬件消息提醒)让设备蜂鸣或振动。

cordova plugin add cordova-plugin-vibration

14.Contacts(联系人)读取联系人列表并在应用中使用联系人数据,或使用应用数据向联系人列表中写新的联系人。

cordova plugin add cordova-plugin-contacts

15.Globalization(全球化)允许应用查询操作系统的当前设置,判断用户使用的语言。

cordova plugin add cordova-plugin-globalization

16.Splashscreen(闪屏)用来在Cordova应用启动时显示自定义的闪屏。

cordova plugin add cordova-plugin-splashscreen

17.InAppBrowser(内置浏览器)允许在在单独的窗口中加载网页。例如要向应用用户展示其他网页。当然可以很容易地在应用中加载网页内容并管理,但有时候需要不同的用户体验,InAppBrowser加载网页内容,应用用户可以更方便的直接返回到主应用。

cordova plugin add cordova-plugin-inappbrowser

18.Console(调试控制台)让程序可以在控制台中打印输出日志。

cordova plugin add cordova-plugin-console

19.exitApp(退出应用)让 Android 或者 Windows Phone 8 上的APP关闭退出(iOS系统不支持)

cordova plugin add cordova-plugin-exitapp

20.barcodeScanner(条形码/二维码扫描)不仅可以通过摄像头识别二维码/条形码,还能生成二维码。

cordova plugin add cordova-plugin-barcodescanner

命令一览:

1.查看所有已经安装的插件

cordova plugin ls

2.安装插件(以camera插件为例)

cordova plugin add cordova-plugin-camera

3.删除插件(以camera插件为例)

cordova plugin rm cordova-plugin-camera

4.更新插件

cordova plugin update


五 自定义插件

  • 1.自定义你的java类

1.1.包名,等下会用到。
1.2.集成的父类。
1.3.重写的方法。
1.4.传递的参数。
1.5.action匹配。

Android项目里集成Cordova详解

  • 2.在config.xml文件中添加配置

2.1.js文件名
2.2.java类路径名(详见1.1)

Android项目里集成Cordova详解

  • 3.在assets/www/plugins文件夹下新建文件夹cordova-plugin-xxxx文件夹,并在此文件夹下新建xxxx.js文件。

3.1.js的文件夹名.文件名
3.2.方法名
3.3.与config.xml文件下一致
3.4.方法名==2(与java文件下action一致)
3.5.成功回调函数
3.6.失败回调函数 [content,type]是传递的参数

Android项目里集成Cordova详解

Android项目里集成Cordova详解

Android项目里集成Cordova详解

  • 4.在cordova_plugins.js中添加必要配置

4.1.file:js路径名
4.2.id:js的文件夹名.文件名
4.3.html文件中方法名的前缀 在module.exports.metadata中添加
4.5. js的文件夹名
4.6.版本号

Android项目里集成Cordova详解

Android项目里集成Cordova详解

  • 5.在index.html中调用
<code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Toast</span><span class="hljs-params">()</span>{</span>
    navigator.Toast.getTost(<span class="hljs-string">"Toast测试"</span>,<span class="hljs-number">0</span>,onSuccess,onError);
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onSuccess</span><span class="hljs-params">(Data)</span>{</span>
        alert(<span class="hljs-built_in">JSON</span>.stringify(Data));
    }
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onError</span><span class="hljs-params">(Data)</span>{</span>
        alert(<span class="hljs-built_in">JSON</span>.stringify(Data));
    }
 }</code>

六 java类中的一些问题

  • 1.startActivityForResult
    Android项目里集成Cordova详解

  • 2.回调

<code>mCallbackContext<span class="hljs-preprocessor">.success</span>(JSONObject)<span class="hljs-comment">;</span>
mCallbackContext<span class="hljs-preprocessor">.error</span>(JSONObject);</code>

Android项目里集成Cordova详解

该文章由WP-AutoPost插件自动采集发布

原文地址:http://blog.csdn.net/u013491677/article/details/51985390

未经允许不得转载:SRE空间 » Android项目里集成Cordova详解

分享到:更多 ()

评论 抢沙发

评论前必须登录!

 

oracle

联系我们联系我们