【前端】Cordova自定义插件开发步骤(基于Android)
来源:互联网 发布:软件测试外包怎么样 编辑:程序博客网 时间:2024/06/05 19:05
前言
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>
参考资料
- 创建你的第一个App
- 【前端】Cordova自定义插件开发步骤(基于Android)
- (2)cordova android自定义插件开发
- cordova开发插件步骤及小结(android插件)
- cordova自定义插件步骤
- Cordova 自定义插件(Android)
- Android+Cordova混合开发以及Cordova自定义插件
- cordova开发自定义插件
- Cordova 开发自定义插件
- cordova开发自定义插件
- cordova开发自定义插件
- cordova开发自定义插件
- Cordova 插件开发(Android)
- 自定义Cordova-Android插件
- Cordova插件开发3步骤
- Android Cordova 插件开发之编写自定义插件
- Android Cordova 插件开发之自定义插件生成安装包
- Android Cordova 插件开发之编写自定义插件
- Android Cordova 插件开发之编写自定义插件
- 通过例子学设计模式之--抽象工厂模式以及使用场景说明(C++实现)
- DB2 数据库索引设计的最佳实践
- QWidget,QMainWindow和QDialog的区别
- ffmepg滤镜专题3-旋转
- 树状数组 总结
- 【前端】Cordova自定义插件开发步骤(基于Android)
- 410c安卓分区
- windows环境下编译spark源码和搭建源码调试环境
- go.js的一些功能
- 介绍vue-cli
- -webkit-tap-highlight-color 属性 及 active伪类在手机端无效
- 设计模式_14:备忘录模式
- scanf函数库解决问题
- linux打包和解压缩到指定目录