cordova 编写自定义插件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_21768483/article/details/78531177

转至元数据结尾
转至元数据起始

一. 前提:cordova 安装OK

  1. 按照这里的指南安装cordova:http://cordova.apache.org/#getstarted
  2. 我自己创建了一个工程:

    cordova create VoiceTest

  3. 进入工程目录:

    cd VoiceTest

  4. 添加两个平台:

 cordova platform add  ios  android
  • 1
  • 1
  1. 安装 plugman :

    npm install -g plugman

  2. 试试安装device插件:

    cordova plugin add cordova-plugin-device

    安装github上的插件

    cordova plugin add https://github.com/matrix-yang/TransformVoiceToText.git

  3. 删除插件: 

    cordova plugin rm cordova-plugin-device

  4. 查看已安装插件
    cordova plugin ls

二. 使用 plugman 创建插件模板

#创建插件 

plugman create --name TransformVoiceToText --plugin_id VoiceToText --plugin_version 1.0.0 

 #进入插件目录 

cd TransformVoiceToText

 #plugin.xml 增加Android平台

  plugman platform add --platform_name android

生成文件结构

 

引入依赖JAR包

位置图

配置plugin.xml

 
 
<? xml  version = '1.0'  encoding = 'utf-8' ?>
< plugin  id = "VoiceToText"  version = "1.0.0"  xmlns = "<a href="http://apache.org/cordova/ns/plugins/1.0" "="" style="color: rgb(53, 114, 176); border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 20px !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">http://apache.org/cordova/ns/plugins/1.0"
  xmlns:android = "<a href="http://schemas.android.com/apk/res/android" "="" style="color: rgb(53, 114, 176); border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 20px !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">http://schemas.android.com/apk/res/android" >
  < name >TransformVoiceToText</ name >
  < js-module  name = "TransformVoiceToText"  src = "www/TransformVoiceToText.js" >
  < clobbers  target = "cordova.plugins.TransformVoiceToText" />
  </ js-module >
  < platform  name = "android" >
  < config-file  parent = "/*"  target = "res/xml/config.xml" >
  < feature  name = "TransformVoiceToText" >
  < param  name = "android-package"  value = "VoiceToText.TransformVoiceToText" />
  </ feature >
  </ config-file >
  < config-file  parent = "/*"  target = "AndroidManifest.xml" >
<!--插件权限-!>
< uses-sdk  android:minSdkVersion = "16"  android:targetSdkVersion = "25"  />
< uses-permission  android:name = "android.permission.RECORD_AUDIO"  />
< uses-permission  android:name = "android.permission.INTERNET"  />
< uses-permission  android:name = "android.permission.ACCESS_NETWORK_STATE"  />
< uses-permission  android:name = "android.permission.ACCESS_WIFI_STATE"  />
< uses-permission  android:name = "android.permission.CHANGE_NETWORK_STATE"  />
< uses-permission  android:name = "android.permission.READ_PHONE_STATE"  />
< uses-permission  android:name = "android.permission.ACCESS_FINE_LOCATION"  />
< uses-permission  android:name = "android.permission.READ_CONTACTS"  />
< uses-permission  android:name = "android.permission.WRITE_EXTERNAL_STORAGE"  />
< uses-permission  android:name = "android.permission.WRITE_SETTINGS"  />
< uses-permission  android:name = "android.permission.READ_EXTERNAL_STORAGE"  />
 
 
</ config-file >
  < source-file  src = "src/android/TransformVoiceToText.java"  target-dir = "src/VoiceToText/TransformVoiceToText" />
  <!--以下部分为配置引入的jar包-!>
< source-file  src = "src/android/Msc.jar"
  target-dir = "libs" />
  < source-file  src = "src/android/android-support-v4.jar"
  target-dir = "libs" />
  < source-file  src = "src/android/Sunflower.jar"
  target-dir = "libs" />
  < source-file  src = "src/android/armeabi/libmsc.so"
  target-dir = "libs/armeabi" />
  < source-file  src = "src/android/armeabi/libmsc.so"
  target-dir = "libs" />
  </ platform >
</ plugin >

 

这里有几个定义,最好理解一下:

  1. clobbers : 非常重要。前端工程师在使用的时候通过这个 clobbers 去调用www/MyMath.js的公开方法
  2. feature 标签定义了 (服务名)name
  3. param name=”android-package” value=”VoiceToText.TransformVoiceToText” 定义Android平台下的底层实现的 包名.类 :VoiceToText.TransformVoiceToText

 

修改TransformVoiceToText.js

var exec = require('cordova/exec');

exports.transform = function(arg0, success, error) {
 exec(success, error, "TransformVoiceToText", "transform", [arg0]);
};

 
【success】 : 成功回调 
【error 】 : 失败回调 
【TransformVoiceToText】 : 服务名(必须和 plugin.xml定义的服务名保持一致) 
【transform】 : Action 动作名。(底层实现根据Action字符串调用不同的方法) 
【arg0】: 参数,必须是数组。 可以是json的数据:[{“key”:”value”,”key”:”value”}] 
————— 也可以是[“value1”,”value2”,”value3”,…]
 
 

修改TransformVoiceToText.java

@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
 if (action.equals("transform")) {

 //args为前端传入的参数

callbackContext.success("返回信息到前端js的成功的回调");

  

callbackContext.error("返回信息到前端js失败的回调函数");


 return true;
}
 return false;
}

将插件打包

sudo plugman createpackagejson . 

文件夹下将会多一个package.json  

项目安装该插件时读取package.json自动安装插件到项目

 

前端调用方式

cordova.plugins.TransformVoiceToText.transform( "cantonese" , function  (msg) {
           alert( "success" +msg);
       }, function  (err) {
           alert( "err" +err);
       });

第一个参数为 方言类型 可选参数为

普通话:mandarin

粤 语:cantonese

四川话:lmz

必须传入其中一种,否则报错

调用过程

  1. js 调用 –>cordova.plugins.TransformVoiceToText.transform(arg0, success, error)
  2. cordova的接口exec –> exec(success, error, "TransformVoiceToText", "transform", [arg0]);;

  3. 调用底层实现各自平台(ios或者Android)下的类TransformVoiceToText

 

项目引入插件

cd VoiceTest

 安装本地插件
~$ cordova plugin add ../TransformVoiceToText


(如果本地有直接安装,这个只是本地没有插件可以使用这个git库安装)安装github上的插件

cordova plugin add https://github.com/matrix-yang/TransformVoiceToText.git


这时目录应该为

 

值得注意的一点是

 

虽然plugins中有transformVoiceToText,但是在安卓实际打包时打包的是platforms下的android目录。所以当我们安装好插件后,需要修改插件功能直接修改platforms下的android目录下的.java文件即可,plugins下的文件不用修改,因为打包APK时并不会将plugins打包。

 

修改android编译工具的版本(科大讯飞插件版本太低,使用高版本编译不通过)

buildToolsVersion "25.0.3"
 

前端调用

cordova.plugins.TransformVoiceToText.transform( "随一参数" , function  (msg) {
  alert( "success" +msg);
}, function  (err) {
  alert( "err" +err);
});

;

 

修改package.json  

cordova build android

以后点击test即可生成APK


猜你喜欢

转载自blog.csdn.net/qq_21768483/article/details/78531177