Mon premier plug-in personnalisé pour le programme cordova_android (console cmd)
1. Créez un projet
1.1 Entrée:
PS E:\testDrawByJS> cordova create KMPrintEProject com.kmarking.eweihu MainPage
Remarque: Décomposition de la commande: (depuis le site officiel http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-create-command )
cordova create path [id [name [config]]] [options]
Évaluer | Description |
---|---|
chemin | Répertoire qui ne devrait pas déjà exister. Cordova créera ce répertoire. Pour plus de détails sur la structure des répertoires, voir ci-dessous. |
identifiant | Valeur par défaut : io.cordova.hellocordova identificateur de style de domaine inversé qui correspond à l' id attrait de l' widget élément dans config.xml . Cela peut être modifié, mais il se peut que du code soit généré à l'aide de cette valeur, comme les noms de package Java. Il est recommandé de sélectionner une valeur appropriée. |
Nom | Par défaut : HelloCordova titre d'affichage de l'application qui mappe l' name élément dans le config.xml fichier. Cela peut être modifié, mais il se peut que du code soit généré à l'aide de cette valeur, comme les noms de classe Java. La valeur par défaut est HelloCordova , mais il est recommandé de sélectionner une valeur appropriée. |
config | Chaîne JSON dont la / les clés / valeurs seront incluses dans <path> /.cordova/config.json |
Options
Option | Description |
---|---|
--modèle | Utilisez un modèle personnalisé situé localement, dans NPM ou GitHub. |
--copie de \ | --src |
--lié à | Lien symbolique vers le www répertoire spécifié sans créer de copie. |
2. Entrez dans le catalogue et ajoutez une plateforme
2.1 Entrée:
PS E:\testDrawByJS> cd KM*
2.2 Entrée:
PS E:\testDrawByJS\KMPrintEProject> cordova platform add browser --save
2.3 Résultats de l'opération:
Utilisation de cordova-fetch pour cordova-browser@^6.0.0
Ajout d'un projet de navigateur ...
Création d'un projet Cordova pour cordova-browser:
Chemin: E: \ testDrawByJS \ KMPrintEProject \ plates-formes \ browser
Nom:
Plugin MainPage 'cordova-plugin-whitelist' trouvé dans config.xml ... Migration vers package.json
Découverte du plugin enregistré "cordova-plugin-whitelist". Ajout au projet
Installation de "cordova-plugin-whitelist" pour le navigateur
Ajout de cordova-plugin-whitelist à package.json
2.4 Entrée:
PS E:\testDrawByJS\KMPrintEProject> cordova platform add android --save
2.5 Résultats en cours d'exécution:
Utilisation de cordova-fetch pour cordova-android@^8.0.0
Ajout d'un projet Android ...
Création d'un projet Cordova pour la plate-forme Android:
Chemin: plates-formes \ android
Package: com.kmarking.eweihu
Nom: MainPage
Activité: MainActivity Cible
Android: android- 28
Chemin du sous-projet: CordovaLib
Chemin du sous-projet: application
Projet Android créé avec [email protected]
Installer "cordova-plugin-whitelist" pour Android
2.6 Entrée:
PS E:\testDrawByJS\KMPrintEProject> cordova platform add ios --save
2.7 Résultats en cours d'exécution:
Utilisation de cordova-fetch pour cordova-ios@^5.0.0
Ajout d'un projet ios ...
Création d'un projet Cordova pour la plate-forme iOS:
Chemin: plates-formes \ ios
Package: com.kmarking.eweihu
Nom: Projet MainPage
iOS créé avec cordova-ios @ 5.1.1
Installation de "cordova-plugin-whitelist" pour iOS
3. Ajoutez un plug-in:
3.1 Entrée:
npm install -g plugman //安装一个插件工具
3.2 Entrée:
plugman create --name KMPrintPlugin --plugin_id KMPrintPlugin --plugin_version 0.0.1
3.3 Apparaît sous le chemin du projet après l'exécution. Ce chemin est le chemin ouvert par le powerShell actuel. Peu importe où le dossier est généré. Enfin, le plug-in sera ajouté à chaque plate-forme.
3.4 Entrez dans le dossier, ajoutez la plate-forme
Entrer:
PS E:\testDrawByJS\KMPrintEProject> cd KM*
PS E:\testDrawByJS\KMPrintEProject\TestDialog> plugman platform add --platform_name android
PS E:\testDrawByJS\KMPrintEProject\TestDialog> plugman platform add --platform_name ios
Après l'exécution, le fichier android / KMPrintPlugin.java est automatiquement généré dans ce répertoire! ! ! ! !
3.5 Créer un fichier package.json
3.5.1 Entrée:
plugman createpackagejson E: \ testDrawByJS \ KMPrintEProject \ KMPrintPlugin
Remarque: Le chemin absolu est écrit de cette manière et une erreur sera signalée lors de l'ajout du plug-in dans ios. Il doit être ajouté en tant que chemin relatif:
npm init
3.5.2 Ensuite, il y aura une invite pour remplir les informations, et enfin oui après la saisie
3.6 Ecrire du code dans les fichiers java générés:
package KMPrintPlugin;
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 KMPrintPlugin 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;
}else if(action.equals("greet")){
String name = data.getString(0);
String message = "Hello, " + name;
callbackContext.success(message);
Log.d("Hello",message);
Toast.makeText(this.cordova.getActivity(),"1111",Toast.LENGTH_SHORT);
return true;
}else{
return false;
}
}
private void coolMethod(String message, CallbackContext callbackContext) {
if (message != null && message.length() > 0) {
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty string argument.");
}
}
}
3.7 Ajouter des plugins à la plate-forme
3.7.1 Entrée:
PS E:\testDrawByJS\KMPrintEProject\com.kmarking.PrintPlugin> cordova plugin add KMPrintPlugin --save
3.7.2 Résultats de l'opération:
Installation de «com.kmarking.PrintPlugin» pour Android
Installation de «com.kmarking.PrintPlugin» pour le navigateur
Installation de «com.kmarking.PrintPlugin» pour ios
Ajout de com.kmarking.PrintPlugin à package.json
3.7.3 Il y a déjà des fichiers Java écrits par nous dans le projet à ce moment
4. Concernant le plugin de configuration plugin.xml,
certains blogs ont dit que je devais le créer manuellement, mais après l'avoir créé manuellement, le projet de construction xml / config.xml n'a pas été enregistré avec succès! ! ! !
Ajoutez ensuite la plateforme android dans le dossier du plugin. Ce plugin.xml est généré automatiquement et peut être utilisé sans configuration! ! ! ! ! !
Mais si le projet doit inclure d'autres bibliothèques de référence, vous devez ajouter manuellement <source-file> dans la configuration
5. La configuration js dans le dossier www:
var exec = require('cordova/exec');
<!-- msg 是传递的数据 success error 是回调方法 其中 TestPlugin是plugin中配置的js中clobbers标签中的target-->
<!--greet 是java文件中excute中的action值,和.h中定义的greet方法, 记住 要保持一致。-->
exports.greet = function(msg, success, error) {
exec(success, error, "TestPlugin", "greet", [msg]);
};
6. Appel de plug-in
Utilisez la méthode js pour appeler la page html dans votre projet cordova et écrire dans la fonction js
var success = function(e){
alert(e);
}
var error = function(e){
alert(e);
}
TestPlugin.greet("Geek",success,error);