[Cordova学习]2.Cordova既存的插件使用方式

最新推荐文章于 2022-07-02 16:12:46 发布

曦曦冉冉

最新推荐文章于 2022-07-02 16:12:46 发布

阅读量3.4k

点赞数

分类专栏： HYBRID学习

本文链接：https://blog.csdn.net/lq83623/article/details/42350331

版权

HYBRID学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

插件参考下载地址

http://plugins.cordova.io/
http://plugreg.com/plugins

Cordova提供的插件

Cordova的官方网页上面已经有603个插件可供使用，（http://plugins.cordova.io/#/viewAll）
插件除了以前从PhoneGap时代提供的插件以外，还有很多来自混合动力开发者
自主开发的插件

插件主要分为2中：
1）JavaScript-only Plugin：　没有Native代码、仅JS代码不依存平台
2）Native Plugin：必须有Native代码、依存平台

添加插件流程

以iOS版作为例子说明添加插件的流程

１．Cordova插件添加的CLI命令实行后下面内容将自动追加或修改
１）插件包里面的plugin.xml被解析，里面的内容将被存储到内存以及相应的平台内容拷贝到
config.xml里面。
２）插件包里面的www文件夹下的js文件将拷贝到相应的平台下，JS里面的文件将被define定义。定义的名字为plugin.xml里面设置的包名。
３）插件包里面的src文件夹的内容将拷贝到platform/plugins文件下、同時、外部plugins文件夹也拷贝了一份。
２．开发者自己需要手动修改平台（iOS）的www/index.html文件，呼出插件的API处理。
＃Cordova插件API的使用必须在deviceready事件执行后实行。

Cordova　CLI提供的插件

下面是默认的插件下载地址（registry.cordova.io）经常使用的插件的下载方式

１）CLI的命令下载
cordov aplugin add org.apache.cordova.device                   //ディバイスAPI
cordov aplugin add org.apache.cordova.network-information //ネットワーク情報イベント
cordov aplugin add org.apache.cordova.battery-status      //電池ステータスイベント
cordov aplugin add org.apache.cordova.device-motion     　//アクセル
cordov aplugin add org.apache.cordova.device-orientation     //定向
cordov aplugin add org.apache.cordova.geolocation         //Geo情報
cordov aplugin add org.apache.cordova.camera                 //カメラ
cordov aplugin add org.apache.cordova.media-capture     //メディアファイル写真
cordov aplugin add org.apache.cordova.media                   //メディアファイル処理
cordov aplugin add org.apache.cordova.file                        //ファイルアクセス
cordov aplugin add org.apache.cordova.file-transfer          //ファイル移動
cordov aplugin add org.apache.cordova.dialogs                 //ダイアログ
cordov aplugin add org.apache.cordova.vibration              //バイブレーション
cordov aplugin add org.apache.cordova.contacts               //連絡先
cordov aplugin add org.apache.cordova.globalization       //グローバル化
cordov aplugin add org.apache.cordova.splashscreen       //splash画面
cordov aplugin add org.apache.cordova.inappbrowser             //内部ブラウザ
cordov aplugin add org.apache.cordova.console                //Console


２）插件删除命令
cordova plugin rm org.apache.cordova.console

３）插件一览命令
cordova plugin ls

４）CLI命令搜索相关插件
cordova plugin search bar code

５）指定版本号取得相关插件。
cordova plugin add org.apache.cordova.console@latest
cordova plugin add org.apache.cordova.console@0.2.1

从其他方式安装插件

１）Git下载
cordov aplugin add https://github.com/apache/cordova-plugin-console.git

２）本地安装
cordova plugin add d:\plugin.tar.gz

插件文件夹构造

插件库下载的照相机插件为例进行说明

org.apache.cordova.camera
|- plugin.xml
|- www
|   |- Camera.js
|- src
    |- android
    |     |- CameraLauncher.java
    |- ios
        |- CDVCamera.h
        |- CDVCamera.m

plugin.xml   指定每个平台拷贝文件路径
www   平台使用的js,每个插件最少需要一个js
        其中Cordova.js会自动读入
src   各OS的Native代码

plugin.xml

<?xml version="1.0" encoding="UTF-8"?> 
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:rim="http://www.blackberry.com/ns/widgets"
    id="org.apache.cordova.camera"
    version="0.3.3">
    <name>Camera</name>
    <description>Cordova Camera Plugin</description>
    <license>Apache 2.0</license>
    <keywords>cordova,camera</keywords>
    <repo>https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git</repo>
    <issue>https://issues.apache.org/jira/browse/CB/component/12320645</issue>

    <js-module src="www/CameraConstants.js" name="Camera">
        <clobbers target="Camera" />
    </js-module>

    <js-module src="www/CameraPopoverOptions.js" name="CameraPopoverOptions">
        <clobbers target="CameraPopoverOptions" />
    </js-module>

    <js-module src="www/Camera.js" name="camera">
        <clobbers target="navigator.camera" />
    </js-module>

    <!-- android -->
    <platform name="android">
        <config-file target="res/xml/config.xml" parent="/*">
            <feature name="Camera">
                <param name="android-package" value="org.apache.cordova.camera.CameraLauncher"/>
            </feature>
        </config-file>
        <config-file target="AndroidManifest.xml" parent="/*">
            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
        </config-file>

        <source-file src="src/android/CameraLauncher.java" target-dir="src/org/apache/cordova/camera" />
        <source-file src="src/android/FileHelper.java" target-dir="src/org/apache/cordova/camera" />
        <source-file src="src/android/ExifHelper.java" target-dir="src/org/apache/cordova/camera" />

        <js-module src="www/CameraPopoverHandle.js" name="CameraPopoverHandle">
            <clobbers target="CameraPopoverHandle" />
        </js-module>

     </platform>

     <!-- ios -->
     <platform name="ios">
         <config-file target="config.xml" parent="/*">
             <feature name="Camera">
                 <param name="ios-package" value="CDVCamera" />
             </feature>
             <preference name="CameraUsesGeolocation" value="false" />
         </config-file>

         <js-module src="www/ios/CameraPopoverHandle.js" name="CameraPopoverHandle">
            <clobbers target="CameraPopoverHandle" />
         </js-module>

         <header-file src="src/ios/CDVCamera.h" />
         <source-file src="src/ios/CDVCamera.m" />
         <header-file src="src/ios/CDVJpegHeaderWriter.h" />
         <source-file src="src/ios/CDVJpegHeaderWriter.m" />
         <header-file src="src/ios/CDVExif.h" />
         <framework src="ImageIO.framework" weak="true" />
         <framework src="CoreLocation.framework" />
         <framework src="CoreGraphics.framework" />
         <framework src="AssetsLibrary.framework" />
         <framework src="MobileCoreServices.framework" />
         <framework src="CoreGraphics.framework" />
         
         <config-file target="*-Info.plist" parent="NSLocationWhenInUseUsageDescription">
             <string></string>
         </config-file>
     </platform>

plugin -- namesapce, id ,版本
name -- 插件名
description -- 插件说明
keywords -- 关键字
engines -- Cordova版本
js-module -- js模块，index.html为默认启动画面。
platform -- 各个平台文件设置

Android：

   <feature name="Camera">
            <param name="android-package" value="org.apache.cordova.camera.CameraLauncher"/>
     </feature>
　　...
　 <source-file 　src="src/android/CameraLauncher.java" target-dir="src/org/apache/cordova/camera" />

feature 属性name是插件名
feature/param 属性 name 是固定「android-package」、value是Android包名+类名
source-fileの属性src是插件Native代码相对于plugin.xml的路径、 target-dir是拷贝到相应的目的地址

iOS:

    <feature name="Camera">
                 <param name="ios-package" value="CDVCamera" />
      </feature>
　　 <header-file src="src/ios/CDVCamera.h" />
　　<source-file src="src/ios/CDVCamera.m" />

feature 属性name是插件名
feature/param 属性name 是固定「ios-package」、value是iOS类名
header-file 属性src是插件Native代码的头文件
source-fileの属性src是插件Native代码的ｍ文件

插件使用

ｗｗｗ文件夹下的index.html

navigator.camera.getPicture(onPhotoDataSuccess, onFail, {quality : 50});

function onPhotoDataSuccess(imageData) {                
                var smallImage = document.getElementById('smallImage');
                smallImage.style.display = 'block';
                smallImage.src = "data:image/jpeg;base64," + imageData;
 }
            
 function onFail(message) {
                alert('Failed because: ' + message);
  }

navigator.camera.getPicture必须放在「deviceready」事件响应之后执行