序文
前回のブログでは、Cordova入門編としてCordovaの紹介とCordovaプロジェクトの作成と実行を行い、Cordovaの中核となるのがプラグインであることについても触れましたが、このブログでは主に使い方と使い方について解説していきます。プラグイン.
Cordova プラグインの使用
まず、公式がいくつかのプラグインを提供していますが、サードパーティ製のプラグインも多数あり、公式サイトで必要なプラグインを探すことができます。
ここでは、使用する 2 つのプラグインを見つけます。プラグインの使用は非常に簡単で、ドキュメントに従うだけです。
最初に電源状態プラグインを使用します
。ドキュメントに従って、最初にプラグインを追加し、プロジェクトのルート ディレクトリでコマンドを実行する必要があります。
cordova plugin add cordova-plugin-battery-status
実行が完了すると、いくつかの新しいファイルがプロジェクトに追加されます。
まず、追加のディレクトリorg.apache.cordovaが作成され、新しく追加されたプラグインの Android コードが保存されます。
その後、対応する構成が構成ファイルに追加されます。
すると、プラグインに関連する js コードが www ディレクトリに追加され、
プラグインの追加後は通常どおり使用できるようになります。すぐ下のフロントエンドコードを変更するだけです。
コードは非常に単純です。index.js
を変更して
実行します
。プラグインの使用が非常に簡単であることがわかります。Cordova は、開発者が H5 とネイティブの間の通信を迅速に認識するのに非常に役立ちます。
次にカメラプラグインを使って見てみましょう。
手順は同じで、まずプラグインを追加します
cordova plugin add cordova-plugin-camera
次に、ドキュメントに従ってフロントエンドのコードを記述し、
jsを記述して
実行します。
他のプラグインも同様に使用され、最初にプラグインを追加し、次に API を調整するのが一般的な手順です。
カスタム Cordova プラグイン
公式またはサードパーティのプラグインを使用することに加えて、多くの場合、ビジネス関連のロジックを処理するためにプラグインをカスタマイズする必要があります。
まず、プラグインの公式定義を見てみましょう: https://cordova.apache.org/docs/en/11.x/guide/hybrid/plugins/index.html
ここで重要なポイントをピックアップします
- Cordova プラグインは、js がネイティブと対話するためのブリッジであり、主な方向は js がネイティブを調整することです。
- プラグインは、js コードとネイティブ コードの少なくとも 2 つの部分で構成されます。js はフロントエンド呼び出しへのメソッドのエクスポートを担当し、ネイティブはビジネス ロジックの実装と js の実行結果の通知を担当します。
- js 呼び出しネイティブは最終的に次のように
cordova.exec実行されます。
次に、公式の Android プラグイン開発ガイドに移動します。
要点まで同じです
- Android プラグイン クラスはCordovaPlugin を継承し、
execute(String action, JSONArray args, CallbackContext callbackContext)メソッドを書き直す必要があります。ネイティブ ビジネス ロジックはこのメソッドに実装されます。 - jsを実行すると、
cordova.exec最終的にネイティブexecuteメソッドが実行されます
大まかな流れがわかったら、プラグインを作成していきます プラグインのディレクトリやファイルに詳しい方は、もちろん自分で一つずつ作成することも可能ですが、公式ツールを使用することをお勧めしますタイプミスを避けるために、plugman を使用してそれらを作成します。
次のように進めます
sudo npm install -g plugmanpluginman をインストールします。権限の問題を避けるために、このインストールを使用することをお勧めします。- インストールが完了すると、plugman の指示が表示され、
plugman -help、plugman create -help 
コマンドの説明によると、プラグインを作成する指示は次のとおりです。plugman create --name 插件名 --plugin_id 插件id --plugin_version 插件版本
次に、新しいプラグインを保存する適切なディレクトリを見つけて、そのディレクトリに切り替えてプラグインを作成するコマンドを実行するのは簡単です。たとえば、
plugman create --name CustomerPlugin --plugin_id com-yzq-customer-plugin --plugin_version 1.0.0
実行後、プラグインの初期構造であるディレクトリが作成されます。
このうち、www の下にある CustomerPlugin.js は、上記のプラグインの 2 つの部分の js コード部分であり、フロントエンド呼び出しへのメソッドのエクスポートを担当し、内部で exec メソッドを実行します。その後の通話を容易にするためにはほとんど役に立ちません。
var exec = require('cordova/exec');
/**
* 导出一个方法给前端调用 coolMethord就是方法名
* @param arg0 传递的参数
* @param success 成功的回调
* @param error 失败的回调
*/
exports.coolMethod = function (arg0, success, error) {
/**
* CustomerPlugin 就是指定要调用原生的类名
* coolMethod 是action，一般在原生代码中会根据该值进行判断执行不同的逻辑
*/
exec(success, error, 'CustomerPlugin', 'coolMethod', [arg0]);
};
また、主にプラグインの設定を記述した plugin.xml もあります。具体的な設定項目については、公式ドキュメントの plugin.xml を参照してください。
設定の説明は次のとおりです。
<?xml version='1.0' encoding='utf-8'?>
<plugin id="com-yzq-customer-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<name>CustomerPlugin</name>
<!--js-module指定进行通信的js接口 src就是接口文件的路径-->
<js-module name="customer-plugin" src="www/CustomerPlugin.js">
<!--clobbers target是前端调用时的名字，可自行更改-->
<clobbers target="customer_plugin"/>
</js-module>
</plugin>
さて、js 部分のコードが利用可能です。以下は各エンドのネイティブ コードを追加するものです。ここでは Android プラットフォームのみを示します。
まず、新しく作成したプラグイン ディレクトリでコマンドを実行するplugman platform add --platform_name androidと、src ディレクトリに Android ディレクトリが表示されます。その中の CustomPlugin クラスが、Android の生徒が記述する必要があるコードです。
最後に実行してnpm init -yespackage.jsonを生成し、作成後にpackage.json内の情報を変更します。
この時点で、プラグインが作成されます。
以下は先ほどの公式プラグインの使い方と同じで、作成したプラグインをプロジェクトにインポートするだけです。
cordova plugin add 你的插件路径
実行が完了したら、Android プロジェクトに戻ると、対応するファイルが追加されていることがわかります。
最後に、ディレクトリ構造を調整し、config.xml の構成が正しいかどうかを必ず確認してください。
残りはビジネス コードです。まず CustomerPlugin のコードを見てください。
package com.yzq.cordovademo.plugin;
import android.widget.Toast;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
/**
* @author yuzhiqiang ([email protected])
* @description 自定义的cordova插件
* @date 2023/3/26
* @time 15:09
*/
public class CustomerPlugin extends CordovaPlugin {
/**
* js 最终会调用到execute方法
*
* @param action The action to execute.
* @param args The exec() arguments.
* @param callbackContext The callback context used when calling back into JavaScript.
* @return
* @throws JSONException
*/
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
/*一般根绝传过来的action匹配，做不同的逻辑*/
if (action.equals("coolMethod")) {
String message = args.getString(0);
this.coolMethod(message, callbackContext);
return true;
}
return false;
}
private void coolMethod(String message, CallbackContext callbackContext) {
Toast.makeText(cordova.getActivity(), "插件方法被调用了", Toast.LENGTH_SHORT).show();
if (message != null && message.length() > 0) {
/*成功回调给js*/
callbackContext.success("nativa调用完成");
} else {
/*错误回调给js*/
callbackContext.error("Expected one non-empty string argument.");
}
}
}
ネイティブコードを書いたら、あとはフロントエンドの呼び出しですが、ここでは簡単な使い方や、前のプロジェクトをベースに追加したコードを紹介します。
このページは非常にシンプルで、ボタンを追加し、
通常通り js で呼び出して
効果を確認するだけです。
h5 がネイティブメソッドを正常に呼び出せることがわかります。
この時点で、シンプルなカスタム プラグインが完成しました。
サンプルコードは github に置かれているので、必要に応じて自分で確認できます: CordovaDemo
この記事が役立つと思われる場合は、高評価をお願いします。より多くの開発者を助けることができます。記事に間違いがある場合は、修正してください。転載する場合は、Yu Zhiqiang のブログからの転載であることを明記してください。ありがとう！_