自定義 Cordova插件（基礎篇）

cordova自定義插件

---

注意：存放自定義cordova插件目錄不能有空格可能會報錯

cordova的安裝

1. 下載node.js，安裝完成后你可以在命令行中使用node和npm.
2. 安裝cordova使用node.js的npm工具。打開控制台輸入

npm install -g cordova

-g是全局安裝cordova。安裝完成后就可以在命令行使用cordova命令。

安裝plugman

cordova需要用plugman來創建自定義插件

命令：npm install -g plugman

用cordova創建android工程

1.創建cordova工程

首先在電腦中創建一個cordova工程的目錄，然后進入到創建的目錄里。之后就可以開始創建cordova工程，下面是創建工程的代碼和實例圖。

cordova create demo com.lmr.android

demo --> 工程名 —— com.lmr.android --> 包名

創建插件

創建成功后的目錄：

插件目錄

2.生成android工程

先進入到剛剛創建的cordova目錄中，然后開始創建android工程。

cordova platform add android

android --> 創建的平台名也可以是iOS等

下圖是創建成功的情況，失敗的原因有可能是android的環境沒有配好。

生成Android工程

生成android工程的目錄

工程目錄

生成之后我們開始導入到android studio中：

第一步：選擇打開本地已有的android工程。

導入工程1

第二步：找到剛剛創建好的android工程導入。

導入工程2

導入之后目錄如下：

目錄結構

至此就已經把cordova插件開頭的部分創建好了。

使用cordova官方提供的插件

首先進入到創建好的android工程目錄下，然后再進行添加插件操作：

cordova plugin add cordova-plugin-camera

添加官方相機插件

添加成功后的Android目錄的變化

添加之后的目錄

使用增加的插件

可以在官網查到 cordova官網camera插件

使用插件的位置，在Android工程下找到index.html和index.js這兩個文件。

使用位置

在index.html文件中添加一個測試按鈕。

<button id="test">test</button> 

示例

在index.js文件中添加：

//前面的test是之前那個button的按鈕，后面的test是方法名，給按鈕注冊點擊事件 document.getElementById("test").addEventListener("click",test); //點擊事件綁定的方法 function test(){ //調用添加的camera插件 // onSuccess:是調用成功的返回事件；onFail：是調用失敗的返回事件 navigator.camera.getPicture(onSuccess,onFail); } //成功的返回事件 function onSuccess() { console.log("Camera cleanup success.") } //失敗的返回事件 function onFail(message) { alert('Failed because: ' + message); } 

然后運行起來項目，下面是我運行起來的效果。點擊test按鈕，會打開手機上的相機，效果圖就不放了。

效果圖

創建自定義插件

注意：創建插件是先cd到你要創建的目錄下，存放自定義cordova插件目錄不能有中午和空格可能會報錯

先在電腦上創建一個cordova插件的目錄，然后跳轉到該目錄，開始創建cordova插件。

創建自定義插件

plugman create --name toast-plugin --plugin_id toast-plugin --plugin_version 1.0.0

--name toast-plugin --> 插件名

--plugin_id toast-plugin --> 插件ID

--plugin_version 1.0.0 --> 插件版本號

生成插件的目錄如下

• toast-plugin
  • src
    • android
      • android的目錄
  • www

編寫ToastDemo.java用於被調用

可以在剛剛創建的Android工程下面編寫這個代碼，具體代碼如下：

execute方法是插件被調用時，會把操作和參數以及回調傳遞過來。

package com.lmr.android; import android.widget.Toast; import org.apache.cordova.CallbackContext; import org.apache.cordova.CordovaArgs; import org.apache.cordova.CordovaPlugin; import org.json.JSONException; /** * ToastDemo * * @author lmr * @date 2018-08-19 */ public class ToastDemo extends CordovaPlugin { @Override public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException { if ("show".equals(action)){ // 獲取activity和context --> cordova.getActivity()和cordova.getContext() Toast.makeText(cordova.getContext(),args.getString(0),Toast.LENGTH_SHORT).show(); return true; } return false; } } 

把這個文件復制到剛剛生成的插件目錄下

文件復制路徑

編輯plugin.xml文件

修改plugin.xml,代碼都有注釋，如下：

<?xml version='1.0' encoding='utf-8'?> <plugin id="toast-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android"> <name>toast-plugin</name> <js-module name="ToastShow" src="www/toast-plugin.js"> <clobbers target="ToastShow" /> </js-module> <!--添加Android平台 --> <platform name="android"> <config-file target="res/xml/config.xml" parent="/*"> <!-- JS調用時的名字 --> <feature name="ToastShow"> <!-- value：的值是對應的插件中ToastDemo.java存放的路徑 --> <param name="android-package" value="com.lmr.android.ToastDemo"/> </feature> </config-file> <!-- src:是插件里存放對應.java的路徑， target-dir:安裝插件時把.java文件存放的位置，要和上面的value路徑對應 --> <source-file src="src/android/ToastDemo.java" target-dir="src/com/lmr/android" /> </platform> </plugin> 

編輯www目錄下的toast-plugin.js文件

打開后是這樣的：

var exec = require('cordova/exec'); exports.coolMethod = function (arg0, success, error) { exec(success, error, 'toast-plugin', 'coolMethod', [arg0]); }; 

修改為

var exec = require('cordova/exec'); // ToastShow： 是plugin.xml文件中的feature標簽 name屬性 // show：是js中調用的方法名 // [arg0]: 表示一個參數，[arg0,arg1]:表示兩個參數 exports.show = function (arg0, success, error) { exec(success, error, 'ToastShow', 'show', [arg0]); }; 

初始化插件

進入到插件目錄，初始化插件

npm init

效果圖如下，輸入信息時有括號的按照括號里面的輸入，沒有的可以跳過。

初始化插件

向項目中添加自定義插件

上面基本上就完成了一個簡單的自定義插件的制作，接下來把插件添加到之前創建的Android工程中測試，制作是否成功。

添加的方法和上面一樣，先進入到platforms目錄下

然后輸入

// 插件的本地目錄 cordova plugin add D:\CordovaPlugin\plugins\toast-plugin 

添加成功

添加插件

然后在Android studio中調用測試。調用方式通俗的講就是toast-plugin.js文件中的那兩個參數。

  ToastShow.show("123456"); 

示例

成功！！

成功效果

基礎內容大概就這些，后面還會在寫一個復雜一點的插件教程，大家有疑問可以在評論中問，看到了會回復，有錯誤也歡迎指出，共同學習。