环境准备
1、jdk安装
环境变量设置:
新建变量 名:JAVA_HOME 值(jdk安装的路径):C:\Program Files\Java\jdk1.8.0_51
2、Android SDK安装
环境变量设置:
新建变量 名:ANDROID_HOME 值(SDK的路径):D:\AS_SDK
3、gradle安装
环境变量设置:
在path变量末尾添加gradle的路径D:\Android Studio\gradle\gradle-4.1\bin
4、下载和安装Node.js (地址:https://nodejs.org/en/download/)
安装完后:
通过命令node --version 可查看nodejs版本;
通过命令npm --version 可查看npm版本;
5、cordova安装
命令行输入:npm install -g cordova
通过命令cordova requirements检查必备的构建工具
6、创建cordova项目
cordova create cordovaProject
7、进入创建的cordova项目根目录,添加android项目
cordova platform add android
8、打出apk
cordova build android
自定义插件生成方法一:命令生成
1、新建目录用于创建插件 => plugins ,进入新建的plugins目录打开命令行,创建插件
plugman create --name [插件名] --plugin_id [插件ID] --plugin_version [插件版本号]
plugman create --name MyPlugin --plugin_id pluginId-MyPlugin --plugin_version 1.0.0
2、打开www目录修改MyPlugi.js文件:MyPlugin为对于的java类名 toastShow为H5调用所使用的方法名
cordova.define("MyPluginTest", function(require, exports, module) {//MyPluginTest和cordova_plugin.js里面的id参数对应
var exec = require('cordova/exec');
exports.toastShow = function (arg0, success, error) {
exec(success, error, 'MyPlugin', 'toastShow', [arg0]);//toastShow h5调用名、原生接收的action名 MyPlugin//java类名
};
});
3、进入插件目录MyPlugin生成java类
plugman platform add --platform_name android
4、创建package.json
npm init
5、进入cordova项目目录,导入插件
cordova plugin add E:\plugins\MyPlugin
完成后cordova_plugin.js文件自动添加配置
module.exports = [
{
"id": "MyPluginTest", //对应MyPlugin.js里面的cordova.define的参数1
"file": "plugins/com.test.MyPlugin/www/MyPlugin.js", //MyPlugin.js文件路径
"pluginId": "pluginId-MyPlugin", //对应metadata
"clobbers": [
"colin"//H5调用别名
]
}
];
module.exports.metadata = {
"cordova-plugin-whitelist": "1.3.4",
"pluginId-MyPlugin": "1.0.0"
};
6、测试
index文件添加一个按钮
<input type="button" value="佛祖保佑" id='test'/>
index.js添加事件
document.getElementById("test").addEventListener("click",test);
colin.toastShow("佛祖来了",function(msg){
alert('原生返回了:'+msg);
},function(e){
alert(e);
});
自定义插件生成方法二:手动生成(备注:cordova3之后已经不支持此方式)
1、 创建一个java类MyToast.java继承CordovaPlugin 重写execute
public class MyToast extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
System.out.println("action11 "+action);
if(action.equals("showToast")){
Toast.makeText(cordova.getActivity(),args.getString(0),Toast.LENGTH_SHORT).show();
return true;
}
return super.execute(action, args, callbackContext);
}
}
2、在assets的plugins里面新建MyToast.js文件
cordova.define("Toast", function(require, exports, module) {//Toast 随便起名,但在cordova_plugin.js要对应上
var exec = require('cordova/exec');
exports.toastShow = function (arg0, success, error) {
exec(success, error, 'MyToast', 'toastShow', [arg0]);//MyToast java类名 toastShow h5调用名、原生接收的action名
};
});
3、编辑cordova_plugin.js文件
module.exports = [
{
"id": "Toast",//对应MyToast.js
"file": "plugins/toast/MyToast.js",MyToast.js文件路径
"pluginId": "pluginId-MyToast",
"clobbers": [
"colinToast"//别名,随便写,H5调用的原生的开头名
]
}
];
module.exports.metadata = {
"pluginId-MyToast": "1.0.0"
};
4、编辑cofig.xml文件
添加:
<feature name="MyToast">//MyToast随便写
<param name="android-package" value="org.apache.cordova.toast.MyToast" />//value是MyToast.java的包名+类名
</feature>
5、测试
index文件添加一个按钮
<input type="button" value="佛祖保佑" id='test'/>
index.js添加事件
document.getElementById("test").addEventListener("click",test);
colinToast.toastShow("佛祖来了",function(msg){
alert('原生返回了:'+msg);
},function(e){
alert(e);
});
};