前言
Cordova概述
Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个设备的功能,比如说:传感器、数据、网络状态等。
由于项目需要,需要自己开发Cordova插件。下面查阅网上资料后的总结。
基本环境
首先需要确保拥有基本的环境,笔者的基本环境是这样的:
- Windows 10 x64
- npm v3.10.10
- node v6.11.2
- Android Studio 2.2.3
安装cordova
下面使用npm安装cordova
npm install -g cordova
创建一个测试项目
首先创建一个hello项目,下面步骤来自官网cordova的步骤
创建App
cordova create hello com.example.hello HelloWorld
添加平台
之后所有后续命令都在项目目录(hello目录)里执行
cd hello
添加Android平台
cordova platform add android --save
检查你当前平台设置状况
cordova platform ls
将工程导入Android Studio
- 打开Android Studio
- 选择菜单栏的「File」->「New」->「Import Project」
- 选择「…\hello\platforms\android」目录
- 导入完成
开发插件
安装pluman
npm install -g plugman
创建插件
创建一个插件的命令参数如下:
plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]
<pluginName>
:插件名字<pluginID>
:插件id<version>
:版本<directory>
:可选。一个绝对或相对路径的目录,该目录将创建插件项目variable NAME=VALUE
:可选。额外的描述,如作者信息和相关描述
下面是一个示例:
plugman create --name HelloPlugin --plugin_id hello-plugin --plugin_version 0.0.1
运行上面示例后就会在当前目录下生成一个HelloPlugin文件夹。其目录结构如下:
│ plugin.xml
│
├─src
└─www
HelloPlugin.js
编写Java
我们需要根据规范来开发一个插件,下面在HelloPlugin/src
目录下创建android文件夹,再新建一个Hello.java
文件,内容和如下:
package com.hello.toast;
import android.widget.Toast;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;
public class HelloPlugin extends CordovaPlugin {
private CallbackContext mCallbackContext;
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
this.mCallbackContext = callbackContext;
if ("coolMethod".equals(action)) {
String msg = args.getString(0);
Toast.makeText(cordova.getActivity(), msg, Toast.LENGTH_SHORT).show();
callbackContext.success("success");
return true;
}
mCallbackContext.error("error");
return false;
}
}
要注意的是,if ("coolMethod".equals(action))
对应HelloPlugin\www\HelloPlugin.js
中的exports.coolMethod
和exec()
方法的第四个参数。
HelloPlugin
Java类对应HelloPlugin.js
文件名称。
也就是说,改了Java中coolMethod
或类名,也需要修改JS中对应的名称,否则可能会导致找不到Java类或方法。
HelloPlugin\www\HelloPlugin.js
完整代码如下:
cordova.define("hello-plugin.HelloPlugin", function(require, exports, module) {
var exec = require('cordova/exec');
exports.coolMethod = function (arg0, success, error) {
exec(success, error, 'HelloPlugin', 'coolMethod', [arg0]);
};
});
修改plugin.xml
打开HelloPlugin/plugin.xml
文件,在标签<plugin>
内添加下面代码
<plugin>
...
<platform name="android">
<source-file src="src/android/HelloPlugin.java" target-dir="src/com/hello/toast"/>
<config-file target="res/xml/config.xml" parent="/*">
<feature name="HelloPlugin">
<param name="android-package" value="com.hello.toast.HelloPlugin"/>
</feature>
</config-file>
</platform>
</plugin>
添加插件
之后就可以添加插件测试一下了
cordova plugin add HelloPlugin
如果需要移除插件则执行:
cordova plugin remove HelloPlugin
看下Android Studio,有文件添加进来了。
调用插件
在index.html
下某个地方插入下面语句进行测试,index.html
是创建项目时自动生成的。
<Button onclick="cordova.plugins.HelloPlugin.coolMethod('Toast', null, null)">Show Toast</Button>
比如在下面位置插入:
...
<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="cordova.plugins.HelloPlugin.coolMethod('Toast', null, null)">Show Toast</Button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
...
点击按钮,即可弹出原生的Toast。
注意事项
如果出现下面错误
"Refused to execute inline event handler because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
", source: file:///android_asset/www/index.html (47)
解决办法是注释掉index.html
中的第一行<meta>
。
<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 *">
-->
...
</html>
参考资料