cordova 混合开发 本文章用android项目为例 ios 项目类似 添加平台不一样
环境安装
1.先安装Node.js
创建cordova项目
1.cordova create 目录名称 (包名) (app名称)
如:cordova create testCordova io.cordova.hellocordova testCordova
2.添加平台
cordova platforms add android
移除android平台支持
cordova platforms rm android
3.编译
android平台： cordova build
编写自定义插件
需要命令 plugman npm install -g plugman
1.创建插件:
plugman create --name XXX--plugin_id XXX --plugin_version XXX
plugman create --name CustomToast --plugin_id io.cordova.hellocordova.customToast --plugin_version 1.0.0
2.进入到插件目录 添加平台
plugman platform add --platform_name android
3.修改插件配置文件plugin.xml(可以不修改 根据需要修改)
<?xml version='1.0' encoding='utf-8'?>
<plugin xmlns:android="http://schemas.android.com/apk/res/android"
id="io.cordova.hellocordova.customToast"
version="1.0.0"
xmlns="http://apache.org/cordova/ns/plugins/1.0">
<!--name 与 创建时候 name对应-->
<name>CustomToast</name>
<!--name 与 创建时候 name对应-->
<js-module
name="CustomToast"
src="www/CustomToast.js">
<clobbers target="cordova.plugins.CustomToast" />
</js-module>
<platform name="android">
<config-file
parent="/*"
target="res/xml/config.xml">
<feature name="CustomToast">
<!--name 与 创建时候 name对应-->
<param
name="android-package"
value="io.cordova.hellocordova.customToast.CustomToast" />
</feature>
</config-file>
<!--name 与 创建时候 name对应-->
<config-file
parent="/*"
target="AndroidManifest.xml"></config-file>
<!--name 与 创建时候 name对应-->
<source-file
src="src/android/CustomToast.java"
target-dir="src/io/cordova/hellocordova/plugin"/>
</platform>
</plugin>
3.生成package.json 文件
npm init
插件生成完成。
4.添加到项目中
进入到项目android平台下执行：
cordova plugin add XXX (插件路径)
cordova plugin add D:\cordovaWorkplace\plugins\CustomToast
注意：
cordova plugin list 查看项目添加的插件
cordova plugin rm XX(插件id) 删除某个插件
cordova plugin add <path> 添加插件
完毕：
可在项目中查看对应的 配置文件变化
res/xml/config.xml文件
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
...
...
<!-- 新生成插件-->
<feature name="CustomToast">
<param name="android-package" value="io.cordova.hellocordova.customToast.CustomToast" />
</feature>
</widget>
assets/www/cordova_plugins.js
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
...
...
,
{
"id": "io.cordova.hellocordova.customToast.CustomToast",
"file": "plugins/io.cordova.hellocordova.customToast/www/CustomToast.js",
"pluginId": "io.cordova.hellocordova.customToast",
"clobbers": [
"cordova.plugins.CustomToast"
]
}
];
module.exports.metadata =
// TOP OF METADATA
{
"cordova-plugin-whitelist": "1.3.3",
"io.cordova.hellocordova.customToast": "1.0.0"
...
...
};
// BOTTOM OF METADATA
});
测试
在android项目中
assets/www/index.html中添加按钮 编写对应的js事件:
如:在body中添加
<body>
...
...
<button id="CustomToast" style="width:200px;height:50px;">CustomToast</button>
...
...
<script type="text/javascript">
document.getElementById("CustomToast").addEventListener("click", cToast);
function cToast(){
cordova.plugins.CustomToast.coolMethod("sdfg",onSuccess,onFail);
function onSuccess(imageData) {
alert('onSuccess because: ' + imageData);
}
function onFail(message) {
alert('Failed because: ' + message);
}
}
</script>
<body>
运行代码 点击按钮:
device-2018-06-09-152750.png
网友评论