Cordova插件開發(iOS/Android)--看這篇就夠了

其他Cordova相關文章鏈接

- Cordova-現有iOS工程中集成Cordova

- Cordova-在現有iOS工程自動化接入Cordova插件(cordova機制原理)

- Cordova-源碼分析

1.創建一個測試工程

//創建cordova工程
cordova create cordovaTest com.szcomtop.cordovaTest cordovaTest

//進入工程根目錄
cd platforms

//添加iOS 和 Android 平台代碼
cordova platform add ios 
cordova platform add android

2.創建插件

//安裝插件工具 
npm install -g plugman

/**創建一個 彈出alert的插件
	name:插件名稱
	plugin_id:插件id
	plugin_version:插件版本
**/

plugman create --name mytoast --plugin_id com.example.mytoast --plugin_version 0.0.1

執行完之后會看見一個mytoast文件夾在根目錄下的plugins目錄里面。把文件夾名稱改成com.example.mytoast

2.1 生成package.json文件

//進入到插件目錄
cd plugins/mytoast
//執行創建package.json文件
plugman createpackagejson ./

按照默認的選項提示創建即可

2.2 創建iOS/Android原生代碼

• iOS代碼 — AlertPlugin.h 文件

  #import <Foundation/Foundation.h>
  #import <Cordova/CDVPlugin.h>
  NS_ASSUME_NONNULL_BEGIN
  
  @interface AlertPlugin : CDVPlugin
  //接收cordova消息方法
  - (void)coolMethod:(CDVInvokedUrlCommand*)command;
  
  @end
  
  NS_ASSUME_NONNULL_END
  

• iOS代碼 — AlertPlugin.m 文件

  #import "AlertPlugin.h"
  
    @implementation AlertPlugin
    - (void)coolMethod:(CDVInvokedUrlCommand*)command{
    //    NSLog(@"className:%@ - callbackId:%@ - args:%@ - methodName:%@",
    //          command.className,command.callbackId,command.arguments,command.methodName);
        
        if (command.arguments.count > 0) {
            UIAlertController *alertCtr = [UIAlertController alertControllerWithTitle:@"顯示的標題" message:command.arguments[0] preferredStyle:UIAlertControllerStyleAlert];
            
            UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK" style:(UIAlertActionStyle)UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
                CDVPluginResult *result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:@"OC回傳給js的參數"];
                [self.commandDelegate sendPluginResult:result callbackId:command.callbackId];
            }];
            [alertCtr addAction:okAction];
            
            [[UIApplication sharedApplication].windows.firstObject.rootViewController presentViewController:alertCtr animated:YES completion:^{
                
            }];
        }else{
            CDVPluginResult *result = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"沒有參數"];
            [self.commandDelegate sendPluginResult:result callbackId:command.callbackId];
        }
        
    }
  
    @end
  

• Android代碼 — mytoast.java

  package com.example.mytoast;
  
  import org.apache.cordova.CordovaPlugin;
  import org.apache.cordova.CallbackContext;
  
  import org.json.JSONArray;
  import org.json.JSONException;
  import org.json.JSONObject;
  //導包
  import android.widget.Toast;
  
  public class mytoast extends CordovaPlugin {
  
      @Override
      public boolean execute(String action, JSONArray args, CallbackContext   callbackContext) throws JSONException {
          if (action.equals("coolMethod")) {
              String message = args.getString(0);
              this.coolMethod(message, callbackContext);
              return true;
          }
          return false;
      }
  
      private void coolMethod(String message, CallbackContext     callbackContext) {
          if (message != null && message.length() > 0) {
              callbackContext.success(message);
              //吐司內容
              Toast.makeText(cordova.getContext(),message, Toast.LENGTH_LONG) .show();
          } else {
              callbackContext.error("Expected one non-empty string argument.  ");
          }
      }
  }
  

2.3 修改plugin.xml，添加iOS和Android平台相關字段

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

2.4 插件js文件

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

exports.coolMethod = function (arg0, success, error) {
    exec(success, error, 'mytoast', 'coolMethod', [arg0]);
};

2.5 插件最終的目錄結構

com.example.mytoast
         |-- package.json
         |-- plugin.xml
         |-- src
              |-- ios
                    |-- AlertPlugin.h
                    |-- AlertPlugin.m
              |-- android
                    |-- mytoast.java
         |-- www
              |-- mytoast.js

按照上面的目錄結構，把原生文件放到對應的位置。

3. 測試插件

3.1 執行cordova命令添加插件

//add 后面參數為 我們新創建的插件文件夾
cordova plugin add ./plugins/com.example.mytoast

3.2 編寫測試index.html

<!DOCTYPE html>
<html>
    <head>
        <title>TestPlugin</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
            <script type="text/javascript" charset="utf-8">

            function testPlugin() {
                cordova.plugins.mytoast.coolMethod("我是JS傳來的參數！",alertSuccess,alertFail);
            }

            function alertSuccess(msg) {
                alert(msg);
            }

            function alertFail(msg) {
                alert('調用OC失敗: ' + msg);
            }
            </script>
    </head>

    <body style="padding-top:50px">
        <button style="font-size:17px;" onclick="testPlugin();">調用iOS插件</button> <br>
    </body>
</html>

3.3 執行效果

Demo插件附件

插件Demo下載

官網參考地址

cordova的plugin.xml字段說明