cordova 編寫自定義插件

轉至元數據結尾
轉至元數據起始

一. 前提: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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章