Cordova 自定義插件(Android版本)

Cordova 自定義插件(android)

  特別注意 android 專案的包名 必須為 com.example.hello，否則編譯不會通過，

1.安裝命令工具

$ npm i plugman -g
mac 電腦：$ sudo npmi plugman -g)

2.創建第一個插件

 $plugman create --name FirstPlugin --plugin_id cordova-plugin-first-plugin --plugin_version 1.0.0

3.添加Android插件

 $plugman platform add --platform_name android  
 注：平臺有 android、ios、windows
 
 將 FirstPlugin 檔案 改為 cordova-plugin-first-plugin

 改后的檔案結構

 cordova-plugin-first-plugin
     |-- src // 平臺原始碼
         |-- android // Android 平臺原始碼
     |-- www // 呼叫原生的js代碼 
     |-- package.json // 
     |-- plugin.xml // 插件組態檔   
  

5.將 FirstPlugin.js 修改為

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

var FirstPlugin = {
    testFirstPlugin: (arg0, success, error) => {
        exec(success, error, 'FirstPlugin', 'testFirstPlugin', [arg0]);
    }
}
module.exports = FirstPlugin;

6.將 plugin.xml 修改為

<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-first-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0"
        xmlns:android="http://schemas.android.com/apk/res/android">
    <name>FirstPlugin</name>
    <js-module name="FirstPlugin" src="www/FirstPlugin.js">
        <clobbers target="FirstPlugin"/>
    </js-module>
    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="FirstPlugin">
                <param name="android-package" value="cordova.plugin.first.plugin.FirstPlugin"/>
            </feature>
        </config-file>
        <config-file parent="/*" target="AndroidManifest.xml"></config-file>
        <source-file src="src/android/FirstPlugin.java" target-dir="src/cordova/plugin/first/plugin"/>
    </platform>
</plugin>

7.添加package.json 檔案

 plugman createpackagejson [插件路徑]

8.添加插件

 到基于cordova的專案中，輸入以下命令
 cordova plugin add [插件路徑]

9.除錯插件

用Android sudio 打開cordova 專案，

android Studio打開專案

debug 啟動就能除錯插件

10. 將 FirstPlugin.java 改為

 package cordova.plugin.first.plugin;
 
 import android.app.AlertDialog;
 
 import com.example.hello.R;
 
 import org.apache.cordova.CordovaPlugin;
 import org.apache.cordova.CallbackContext;
 
 import org.json.JSONArray;
 import org.json.JSONException;
 import org.json.JSONObject;
 
 /**
  * This class echoes a string called from JavaScript.
  */
 public class FirstPlugin extends CordovaPlugin {
 
     @Override
     public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
         if (action.equals("testFirstPlugin")) {
             String message = args.getString(0);
             this.testFirstPlugin(message, callbackContext);
             return true;
         }
         return false;
     }
 
     private void testFirstPlugin(String message, CallbackContext callbackContext) {
         if (message != null && message.length() > 0) {
             AlertDialog alertDialog = new AlertDialog.Builder(cordova.getContext())
                     .setTitle("這是標題")//標題
                     .setMessage("這是內容")//內容
                     .setIcon(R.mipmap.ic_launcher)//圖示
                     .create();
             alertDialog.show();
             callbackContext.success(message);
         } else {
             callbackContext.error("Expected one non-empty string argument.");
         }
     }
 }

11.js 呼叫示例

        try {
            // console.log(window.FirstPlugin);
            window.FirstPlugin.testFirstPlugin((res)=>{
                console.log(res);
            },(error)=>{

            },null);
        } catch (e) {
            console.log(e);
            console.log("請在真機或者模擬器運行");
        }

12.插件最終效果

13.資源下載

js呼叫原始碼

插件原始碼

測驗apk下載

14.如何呼叫一個原生的提示彈窗

android 原生彈窗博客

聯系我:QQ群 390736068