当前位置: 首页 > 编程日记 > 正文

Cordova入门系列(三)Cordova插件调用

上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心内容,插件的调用。演示一个例子,通过cordova插件,去调用摄像头。

 

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

  我们先在项目中安装调用摄像头的插件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 (数字类型)定义

转载于:https://www.cnblogs.com/Free-Thinker/p/10769079.html

相关文章:

LVS 介绍 原理

一、 LVS简介 LVS是Linux Virtual Server的简称&#xff0c;也就是Linux虚拟服务器, 是一个由章文嵩博士发起的自由软件项目&#xff0c;它的官方站点是www.linuxvirtualserver.org&#xff08;版本很久不更新了&#xff09;。 现在LVS已经是 Linux标准内核的一部分…

腾讯云 短信服务 【学习记录 】

github 链接 https://github.com/qcloudsms/qcloudsms_java/tree/master maven 要使用 qcloudsms_java 功能&#xff0c;需要在 pom.xml 中添加如下依赖&#xff0c; <dependency><groupId>com.github.qcloudsms</groupId><artifactId>qcloudsms<…

Coolite Toolkit学习笔记六:常用控件Accordion、ToolBar、ToolTip

一、Accordion控件 Accordion的功能非常适用&#xff0c;使用很简单&#xff0c;轻轻松松的就可以构建一个可折叠的界面展示应用效果。相信大多数做ASP.NET开发的朋友都使用过ASP.NET AJAX Control Toolkit&#xff0c;它里面也提供有Accordion控件&#xff0c;详细可以查…

与ObjectDataSource共舞

4&#xff0c;ORM组件XCode&#xff08;与ObjectDataSource共舞&#xff09; XCode为了能更方便的解决大部分问题&#xff0c;不得不“屈身”于ObjectDataSource。 先上一个经典例子&#xff08;ObjectDataSourceGridView&#xff09;&#xff08;ObjectDataSource&#xff09;…

2.4 Go语言基础之切片

本文主要介绍Go语言中切片&#xff08;slice&#xff09;及它的基本使用。 一、引子 因为数组的长度是固定的并且数组长度属于类型的一部分&#xff0c;所以数组有很多的局限性。 例如&#xff1a; func arraySum(x [3]int) int{sum : 0for _, v : range x{sum sum v}return …

java 文件下载 【学习记录】

工具类 public static Boolean downloadExcelFile(HttpServletResponse response, String fileName) {OutputStream output;File file new File(fileName);if (file.exists()) {try {FileInputStream fileInputStream new FileInputStream(file);BufferedInputStream buffe…

[UI自动化]:控制浏览器操作

控制浏览器窗口大小 . PC端执行自动化测试脚本大多的情况下是希望浏览器在全屏幕模式下执行&#xff0c;那么可以使用maximize_window()方法使打开的浏览器全屏显示 控制浏览器后退、前进 在使用浏览器浏览网页时&#xff0c;浏览器提供了后退和前进按钮&#xff0c;可以方便地…

在项目中使用Google Closure Compiler

现在的Web项目总是离不开大量JavaScript&#xff0c;而JS文件的体积也越来越大&#xff0c;也越来越影响页面的感知性能&#xff08;Perceived Performance&#xff09;。因此&#xff0c;我们会对JS文件进行压缩&#xff0c;一方面是使用Gzip&#xff0c;而另一方面则是去除JS…

文件服务器共享目录设置(二)

三、 设置磁盘配额及文件屏蔽 为了防止用户无限制的上传文件&#xff0c;或上传病毒木马等文件&#xff0c;还需要进一步加强安全设置。用磁盘配额来管理用户的文件夹空间&#xff0c;用文件屏蔽来阻止用户上传有风险的文件。 在win2003中&#xff0c;磁盘配额只能…

Codeforces 894.D Ralph And His Tour in Binary Country

D. Ralph And His Tour in Binary Countrytime limit per test2.5 secondsmemory limit per test512 megabytesinputstandard inputoutputstandard outputRalph is in the Binary Country. The Binary Country consists of n cities and (n - 1) bidirectional roads connect…

linux下获取系统时间 和 时间偏移

获取linux时间 并计算时间偏移 void getSystemTimer(void){#if 0 char *wdate[]{"Sun","Mon","Tue","Wed","Thu","Fri","Sat"} ; time_t timep; struct tm *p; time(&timep); pgmtime(&timep)…

使用git命令上传本地文件到GitHub上

1、官网下载git并且anz安装 2、在Github上申请账号 3、在本地使用git命令生成私钥和公钥 连续按三次 回车键 $ ssh-keygen -t rsa -C "账号"生成如图 将生成的公钥设置到github上 &#xff0c; 生成公钥的地址是 ./ssh &#xff08;C盘的用户目录&#xff09; 4…

POI解析Excel文件工具类

/*** 读取excel数据*/public static List<Map<String, Object>> exportListFromExcel(File file, int sheetNum) throws IOException { return exportListFromExcel(new FileInputStream(file), FilenameUtils.getExtension(file.getName()), sheetNum); } publ…

关于Bulk加载模式

Bulk加载模式是Informatica提供的一种高性能数据加载模式&#xff0c;它利用数据库底层机制&#xff0c;依靠调用数据库本身提供的Utility来进行数据的加载  该方式将绕过数据库的log记录&#xff0c;以此提高数据库加载性能&#xff0c;因此Bulk模式不能进行数据的Rollback操…

C#:CsvReader读取.CSV文件(转换成DataTable)

原文引用&#xff1a;https://www.codeproject.com/Articles/9258/A-Fast-CSV-Reader using LumenWorks.Framework.IO.Csv;using System;using System.Collections.Generic;using System.Data;using System.IO;using System.Linq;using System.Text;using System.Threading.Tas…

Standup Timer的MVC模式及项目结构分析

前言 学习android一段时间了&#xff0c;为了进一步了解android的应用是如何设计开发的&#xff0c;决定详细研究几个开源的android应用。从一些开源应用中吸收点东西&#xff0c;一边进行量的积累&#xff0c;一边探索android的学习研究方向。这里我首先选择了jwood的Standup …

ISDN的配置

ISDN的配置 1、 实验目的&#xff1a; 通过配置ISDN使两个路由器之间能够通信 2、 实验拓扑图&#xff1a; 3、 实验步骤&#xff1a; &#xff08;1&#xff09; R1的配置 Router> R1的ISDN配置 Router>en R…

5,ORM组件XCode(动手)

本篇才真正是XCode教程第一篇。《速览》是为了以最简洁的语言最短小的篇幅去吸引开发者&#xff1b;《简介》则是对XCode组件和XCode开发模式的一个整体介绍&#xff0c;让开发者从宏观的角度去理解XCode&#xff1b;《共舞》把XCode提到了一个新的高度&#xff0c;让开发者感受…

前端知识分享.md

目录 一些支持固定列和表头的组件库element UIiViewAmaze UIlayui一些比较好的IDEMVVM 框架VueNode生态其它SassTypeScript一些支持固定列和表头的组件库 element UI https://element.eleme.cn/#/zh-CN/component/table iView https://www.iviewui.com/components/table Amaze …

C 输入 输出

C 输入 & 输出 当我们提到输入时&#xff0c;这意味着要向程序填充一些数据。输入可以是以文件的形式或从命令行中进行。C 语言提供了一系列内置的函数来读取给定的输入&#xff0c;并根据需要填充到程序中。 当我们提到输出时&#xff0c;这意味着要在屏幕上、打印机上或任…

搭建服务器环境 安装jdk、mysql、Tomcat 以及配置https 记录

1.在cenos上安装 jdk #在usr/local下创建 java 文件夹 mkdir java#将jdk拷贝到该文件夹中 [rootVM_0_15_centos jdk1.8.0_181]# cp jdk-8u181-linux-x64.tar.gz /usr/local/java/#解压该文件 [rootVM_0_15_centos jdk1.8.0_181]# tar -zxvf jdk-8u181-linux-x64.tar.gz #配置环…

一个Java程序员应该掌握的10项技能

1、语法&#xff1a;必须比较熟悉&#xff0c;在写代码的时候IDE的编辑器对某一行报错应该能够根据报错信息知道是什么样的语法错误并且知道任何修正。 2、命令&#xff1a;必须熟悉JDK带的一些常用命令及其常用选项&#xff0c;命令至少需要熟悉&#xff1a;appletviewer、 Ht…

逆向-攻防世界-maze

题目提示是走迷宫。 IDA载入程序分析。 输入字符长度必须是24&#xff0c;开头必须是nctf{&#xff0c;结尾必须是}。在125处按R就可以变成字符。 sub_400650和sub_400660是关键函数&#xff0c;分析sub_400650。 v10的下一字节减1. sub_400660v10的下一字节加1. 分析这两个函数…

linxu passwd 给linux用户设置密码 命令

[rootlocalhost ~]# passwd # 修改 root 用户的密码passwd 给linux用户设置密码 命令 passwd www 直接passwd是当前用户设置密码 非交互式修改密码&#xff1a; echo "123456" |passwd --stdin www [rootMongoDB ~]# echo "123456" | passwd…

MultipartFile 使用 记录

MultipartFile file 获取文件流 file.getInputStream()&#xff1b; 获取文件名称 String fileName file.getOriginalFilename(); 待补充

多语言加载图片问题

系统要求多语言&#xff1a;中文和英文&#xff0c;分别在两个xml文件中书写相关内容&#xff0c;类似&#xff1a; <root><resource name"VersionName">Version</resource><resource name"Logout">Logout</resource></r…

5.html基础标签:块级+行级元素+特殊字符+嵌套规则

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title> </head> <body><!-- 块元素&#xff1a;独立成一行(相当于标签前后都设置了br),可以设置宽高,默认宽高100%文字…

[摘]终于找到一个有助理解left/right/full outer join的例子

近日在学习《Understading DB2》的时候找到了一个例子&#xff0c;对于理解 left/right/full 三种 outer join 的大有裨益。 先看样本数据&#xff0c;来自DB2的示例数据库 sample&#xff1a; db2 > insert into employee values(99999,killkill,N,Huang,null,null,null,no…

vue——props的两种常用方法

vue——props的两种常用方法 1、实现父——>子的通信 举例如下&#xff1a; 父组件 parent.vue<children :channel"object1"></children> 子组件 children.vue export default{name:"children",props:["channel"],data(){return{…

idea导入模板

1.我的配置文件下载 请点下面的连接 https://download.csdn.net/download/huyande123/10728802 先导入第二个文件&#xff0c;在导入第一个文件 在此基础上添加了类注释和方法注释&#xff08;方法注释快捷键 qtab&#xff09; 参考链接 https://blog.csdn.net/qq_34581118…