我的第一个cordova_android程序(cmd控制台)自定义插件
1. 创建工程
1.1输入:
PS E:\testDrawByJS> cordova create KMPrintEProject com.kmarking.eweihu MainPage
注:命令分解:(来自官网http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-create-command)
cordova create path [id [name [config]]] [options]
Value | Description |
---|---|
path | Directory which should not already exist. Cordova will create this directory. For more details on the directory structure, see below. |
id | Default: io.cordova.hellocordova Reverse domain-style identifier that maps to id attirbute of widget element in config.xml . This can be changed but there may be code generated using this value, such as Java package names. It is recommended that you select an appropriate value. |
name | Default: HelloCordova Application's display title that maps name element in config.xml file. This can be changed but there may be code generated using this value, such as Java class names. The default value is HelloCordova , but it is recommended that you select an appropriate value. |
config | JSON string whose key/values will be included in <path> /.cordova/config.json |
Options
Option | Description |
---|---|
--template | Use a custom template located locally, in NPM, or GitHub. |
--copy-from\ | --src |
--link-to | Symlink to specified www directory without creating a copy. |
2. 进入目录,添加平台
2.1输入:
PS E:\testDrawByJS> cd KM*
2.2输入:
PS E:\testDrawByJS\KMPrintEProject> cordova platform add browser --save
2.3运行结果:
Using cordova-fetch for cordova-browser@^6.0.0
Adding browser project...
Creating Cordova project for cordova-browser:
Path: E:\testDrawByJS\KMPrintEProject\platforms\browser
Name: MainPage
Plugin 'cordova-plugin-whitelist' found in config.xml... Migrating it to package.json
Discovered saved plugin "cordova-plugin-whitelist". Adding it to the project
Installing "cordova-plugin-whitelist" for browser
Adding cordova-plugin-whitelist to package.json
2.4输入:
PS E:\testDrawByJS\KMPrintEProject> cordova platform add android --save
2.5运行结果:
Using cordova-fetch for cordova-android@^8.0.0
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms\android
Package: com.kmarking.eweihu
Name: MainPage
Activity: MainActivity
Android target: android-28
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@8.1.0
Installing "cordova-plugin-whitelist" for android
2.6输入:
PS E:\testDrawByJS\KMPrintEProject> cordova platform add ios --save
2.7运行结果:
Using cordova-fetch for cordova-ios@^5.0.0
Adding ios project...
Creating Cordova project for the iOS platform:
Path: platforms\ios
Package: com.kmarking.eweihu
Name: MainPage
iOS project created with cordova-ios@5.1.1
Installing "cordova-plugin-whitelist" for ios
3. 添加插件:
3.1输入:
npm install -g plugman //安装一个插件工具
3.2输入:
plugman create --name KMPrintPlugin --plugin_id KMPrintPlugin --plugin_version 0.0.1
3.3运行后项目路径下出现,此路径为当前powerShell打开的路径,这个文件夹生成在哪里无所谓,最后会把这个插件添加到各平台下的。
3.4进入该文件夹,添加平台
输入:
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
运行后该目录下自动生成android/KMPrintPlugin.java文件!!!!!
3.5创建package.json文件
3.5.1输入:
plugman createpackagejson E:\testDrawByJS\KMPrintEProject\KMPrintPlugin
注:这样写用了绝对路径,在ios添加插件时会报错,应该添加为相对路径:
npm init
3.5.2接下来会一有提示填写信息,输入后最后yes就好
3.6在生成的java文件种编写代码:
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将插件添加到平台中
3.7.1输入:
PS E:\testDrawByJS\KMPrintEProject\com.kmarking.PrintPlugin> cordova plugin add KMPrintPlugin --save
3.7.2运行结果:
Installing "com.kmarking.PrintPlugin" for android
Installing "com.kmarking.PrintPlugin" for browser
Installing "com.kmarking.PrintPlugin" for ios
Adding com.kmarking.PrintPlugin to package.json
3.7.3此时项目中已有我们写好的Java文件了
4.关于 配置插件plugin.xml
有些博客说要自己手动创建,但是我自己手动创建后,build工程xml/config.xml是没有注册成功的!!!!
然后又在插件文件夹中add了platform android,这个plugin.xml是自动生成的,不用配就能用了!!!!!!
但是如果项目需要包含其他引用库,就需要在配置中手动添加<source-file>
5.在www文件夹下的js配置:
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.插件调用
在你的cordova工程中的 html页面用调用js方法 并且在js的function中写入
var success = function(e){
alert(e);
}
var error = function(e){
alert(e);
}
TestPlugin.greet("Geek",success,error);