cordova 添加自定义插件

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:\xxxxx\VhallLivePlugin(插件地址) --nofetch

10.测试cordova下的www\index.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>

cordova 添加自定义插件

猜你喜欢