cordova 混合開發(fā) 本文章用android項目為例 ios 項目類似 添加平臺不一樣
環(huán)境安裝
1.先安裝Node.js
創(chuàng)建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.創(chuàng)建插件:
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 與 創(chuàng)建時候 name對應-->
<name>CustomToast</name>
<!--name 與 創(chuàng)建時候 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 與 創(chuàng)建時候 name對應-->
<param
name="android-package"
value="io.cordova.hellocordova.customToast.CustomToast" />
</feature>
</config-file>
<!--name 與 創(chuàng)建時候 name對應-->
<config-file
parent="/*"
target="AndroidManifest.xml"></config-file>
<!--name 與 創(chuàng)建時候 name對應-->
<source-file
src="src/android/CustomToast.java"
target-dir="src/io/cordova/hellocordova/plugin"/>
</platform>
</plugin>
3.生成package.json 文件
npm init
插件生成完成。
4.添加到項目中
進入到項目android平臺下執(zhí)行：
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
