1.安装环境 cordova
npm install -g cordova
2.创建 cordova 项目
cordova create hello com.example.hello HelloWorld
3.为项目添加平台
cordova platform add android --save
4.安装创建插件手脚架
npm install -g plugman
测试
plugman -v
5.创建插件
plugman create --name VhallLivePlugin --plugin_id com.live.VhallLivePlugin --plugin_version 1.0.0
6.为插件添加平台
/**
* 注意：一定要等到插件文件夹/src/android/xxxxx.java生成才能进行下一步
**/
plugman platform add --platform_name android
7.在插件目录下创建package.json文件
{
"name": "cordova.live.vhallliveplugin", // 必须小写
"version": "1.0.0", // 版本
"description": "a cordova plugin", //介绍
"cordova": {
"id": "cordova.live.vhallliveplugin",
"platforms": [
"android"
]
},
"keywords": [
"ecosystem:cordova",
"cordova-android",
"cordova-ios",
"vhallliveplugin",
"cordova.live.vhallliveplugin"
],
"repository": {
"type": "git",
"url": "git+https://github.com/hhjjj1010/cordova-plugin-alipay-v2.git"
},
"bugs": {
"url": "https://github.com/hhjjj1010/cordova-plugin-alipay-v2/issues"
},
"homepage": "https://github.com/hhjjj1010/cordova-plugin-alipay-v2#readme",
"author": "hhjjj1010",
"license": "ISC"
}
8.插件plugin.xml配置说明
<?xml version='1.0' encoding='utf-8'?>
<plugin id="com.live.VhallLivePlugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<name>VhallLivePlugin</name>
/**
* name为前端调用插件名称，src为映射地址
**/
<js-module name="VhallLivePlugin" src="www/VhallLivePlugin.js">
<clobbers target="cordova.plugins.VhallLivePlugin"/>
</js-module>
<platform name="android">
<config-file parent="/*" target="res/xml/config.xml">
<feature name="VhallLivePlugin">
<param name="android-package" value="com.live.VhallLivePlugin.VhallLivePlugin"/>
</feature>
</config-file>
<config-file parent="/*" target="AndroidManifest.xml"></config-file>
/**
* target-dir 去掉多余的层级，只需留3层
**/
<source-file src="src/android/VhallLivePlugin.java" target-dir="src/com/live"/>
</platform>
</plugin>
9.为cordova项目安装插件
cordova plugin add F:xxxxxVhallLivePlugin(插件地址) --nofetch
10.测试cordova下的wwwindex.html
<!DOCTYPE html>
<html>
<head>
<!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">-->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<!--<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">-->
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<button onclick="test()">click</button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script >
function test(){
cordova.plugins.VhallLivePlugin.coolMethod('click',function(msg){
alert('成功'+msg);
},function(e){
alert(e);
})
}
</script>
</body>
</html>