Cordova插件开发一篇就够了

---

工具与环境介绍

开发工具：Android Studio 2.3、VS Code

Cordova Version: 8.0.0 

---

开发步骤

---

1、建立cordova项目

cordova create MyProject

---

2、添加Android平台

cd MyProject
cordova platform add android

---

3、降低gradle版本

1) 使用vs code打开项目，全局搜索"/gradle-",将StudioBuilder.js和GradleBuilder.js文件中的`gradle-4.1-all.zip`修改为`gradle-3.3-all.zip`;

2)修改classpath,将gradle插件的版本修改为2.2.3：

3) 修改platforms/android/app/build.gradle中的`implementation`为`compile`;

dependencies {
    compile fileTree(dir: 'libs', include: '*.jar')
    // SUB-PROJECT DEPENDENCIES START
    compile(project(path: ":CordovaLib"))
    // SUB-PROJECT DEPENDENCIES END
}

4) 在`defaultConfig`闭包中添加:`jackOptions{ enabled true}`

 defaultConfig {
        ......
        jackOptions{ 
            enabled true
            }
    }

4、运行项目

cordova run android

5、安装plugman插件

npm install plugman -g

6、进入项目目录并构建MyPlugin插件

cd MyProject/plugins

plugman create --name MyPlugin --plugin_id plugin_id --plugin_version 0.1.0

7、向插件添加Android平台支持

cd MyPlugin

plugman platform add --platform_name android

8、修改plugin.xml

<source-file src="src/android/MyPlugin.java" target-dir="src/plugin_id/MyPlugin" />
改为：
<source-file src="src/android/MyPlugin.java" target-dir="src/plugin_id" />

9、将插件MyPlugin添加至Android项目当中

# 进入项目根目录
plugman install -d --platform android --project platforms/android --plugin plugins/MyPlugin

10、在index.html中调用

# 删除或注释此行标签 
<!--<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:;">-->
# 调用
<script type="text/javascript">
   function f(){
       cordova.plugins.MyPlugin.coolMethod("hello");
    }
</script>

<button onclick="fu()">how how</button>      

需要注意的是，如果是对Cordova根目录下的plugins目录下的插件内容进行修改，则需要对插件进行重新卸载或是安装才能达到效果。

在页面中引入`<script type="text/javascript" src="cordova.js"/>后，cordova.js将自动为我们引入plugins目录下的所有js文件，当调用`cordova.plugins.MyPlugin.coolMethod`（也可直接写成`MyPlugin.coolMethod`）时，程序将查找`cordova_plugins.js`中`clobbers`为`MyPlugin`插件信息，根据`file`找到需要调用的js文件，该文件中的export的对象即是`MyPlugin`指向的对象，然后找到对象中的`coolMethod`方法执行，而`coolMethod`若想调用原生的java方法，则要通过`exec(success, error, "$clobbersName", "$functionName", options);`这里的`clobbersName`并不是`cordova_plugin.js`中的`clobber`（尽管大多时候为了代码的可读或者是规范要求，二者的值是一样的）而是原生中`config.xml`里的`<feature/>` 的`name`属性，通过`name`属性找到节点内部的`java`文件，然后执行内部的`execute`函数，值得注意的是js里面的`exec`和java端的`execute`的参数表并不一致，而且`execute`也不是静态方法，所以二者之间还隐含着较多的学问。读者可自行探索。