日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Cordova入门系列(三)Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html...

發布時間:2023/12/9 编程问答 30 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Cordova入门系列(三)Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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/Jeely/p/10791113.html

創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Cordova入门系列(三)Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html...的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。