自定义Cordova插件基础篇

cordova自定义插件


注意:存放自定义cordova插件目录不能有空格可能会报错

cordova的安装

  1. 下载node.js,安装完成后你可以在命令行中使用node和npm.
  2. 安装cordova使用node.js的npm工具。打开控制台输入
npm install -g cordova

-g是全局安装cordova。安装完成后就可以在命令行使用cordova命令。

安装plugman

cordova需要用plugman来创建自定义插件

命令:npm install -g plugman

用cordova创建android工程

1.创建cordova工程

首先在电脑中创建一个cordova工程的目录,然后进入到创建的目录里。之后就可以开始创建cordova工程,下面是创建工程的代码和实例图。

cordova create demo com.lmr.android

demo --> 工程名 —— com.lmr.android --> 包名

创建插件

创建成功后的目录:

插件目录

2.生成android工程

先进入到刚刚创建的cordova目录中,然后开始创建android工程。

cordova platform add android

android --> 创建的平台名也可以是iOS等

下图是创建成功的情况,失败的原因有可能是android的环境没有配好。


生成Android工程

生成android工程的目录


工程目录

生成之后我们开始导入到android studio中:

第一步:选择打开本地已有的android工程。


导入工程1

第二步:找到刚刚创建好的android工程导入。


导入工程2

导入之后目录如下:

目录结构

至此就已经把cordova插件开头的部分创建好了。

使用cordova官方提供的插件

首先进入到创建好的android工程目录下,然后再进行添加插件操作:

cordova plugin add cordova-plugin-camera
添加官方相机插件

添加成功后的Android目录的变化

添加之后的目录

使用增加的插件

可以在官网查到 cordova官网camera插件

使用插件的位置,在Android工程下找到index.html和index.js这两个文件。

使用位置

在index.html文件中添加一个测试按钮。

<button id="test">test</button>
示例

在index.js文件中添加:

//前面的test是之前那个button的按钮,后面的test是方法名,给按钮注册点击事件
document.getElementById("test").addEventListener("click",test);
//点击事件绑定的方法
function test(){
    //调用添加的camera插件
    // onSuccess:是调用成功的返回事件;onFail:是调用失败的返回事件
    navigator.camera.getPicture(onSuccess,onFail);
}
//成功的返回事件
function onSuccess() {
    console.log("Camera cleanup success.")
}
//失败的返回事件
function onFail(message) {
    alert('Failed because: ' + message);
}

然后运行起来项目,下面是我运行起来的效果。点击test按钮,会打开手机上的相机,效果图就不放了。

效果图

创建自定义插件

注意:创建插件是先cd到你要创建的目录下,存放自定义cordova插件目录不能有中午和空格可能会报错

先在电脑上创建一个cordova插件的目录,然后跳转到该目录,开始创建cordova插件。

创建自定义插件

plugman create --name toast-plugin --plugin_id toast-plugin --plugin_version 1.0.0

--name toast-plugin --> 插件名

--plugin_id toast-plugin --> 插件ID

--plugin_version 1.0.0 --> 插件版本号

生成插件的目录如下

  • toast-plugin
    • src
      • android
        • android的目录
    • www

编写ToastDemo.java用于被调用

可以在刚刚创建的Android工程下面编写这个代码,具体代码如下:

execute方法是插件被调用时,会把操作和参数以及回调传递过来。

package com.lmr.android;

import android.widget.Toast;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaArgs;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONException;

/**
 * ToastDemo
 *
 * @author lmr
 * @date 2018-08-19
 */
public class ToastDemo extends CordovaPlugin {

    @Override
    public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException {
        if ("show".equals(action)){
            // 获取activity和context --> cordova.getActivity()和cordova.getContext()
            Toast.makeText(cordova.getContext(),args.getString(0),Toast.LENGTH_SHORT).show();
            return true;
        }
        return false;
    }
}

把这个文件复制到刚刚生成的插件目录下

文件复制路径

编辑plugin.xml文件

修改plugin.xml,代码都有注释,如下:

<?xml version='1.0' encoding='utf-8'?>
<plugin id="toast-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>toast-plugin</name>
    <js-module name="ToastShow" src="www/toast-plugin.js">
        <clobbers target="ToastShow" />
    </js-module>

    <!--添加Android平台  -->
    <platform name="android">
        <config-file target="res/xml/config.xml" parent="/*">  
            <!-- JS调用时的名字 -->
            <feature name="ToastShow">  
                <!-- value:的值是对应的插件中ToastDemo.java存放的路径 --> 
                <param name="android-package" value="com.lmr.android.ToastDemo"/>
            </feature>  
        </config-file>  
        <!-- src:是插件里存放对应.java的路径, target-dir:安装插件时把.java文件存放的位置,要和上面的value路径对应 -->
        <source-file src="src/android/ToastDemo.java" target-dir="src/com/lmr/android" />
    </platform> 
</plugin>

编辑www目录下的toast-plugin.js文件

打开后是这样的:

var exec = require('cordova/exec');

exports.coolMethod = function (arg0, success, error) {
    exec(success, error, 'toast-plugin', 'coolMethod', [arg0]);
};

修改为

var exec = require('cordova/exec');

// ToastShow: 是plugin.xml文件中的feature标签 name属性
// show:是js中调用的方法名
// [arg0]: 表示一个参数,[arg0,arg1]:表示两个参数
exports.show = function (arg0, success, error) {
    exec(success, error, 'ToastShow', 'show', [arg0]);
};

初始化插件

进入到插件目录,初始化插件

npm init

效果图如下,输入信息时有括号的按照括号里面的输入,没有的可以跳过。

初始化插件

向项目中添加自定义插件

上面基本上就完成了一个简单的自定义插件的制作,接下来把插件添加到之前创建的Android工程中测试,制作是否成功。

添加的方法和上面一样,先进入到platforms目录下

然后输入

// 插件的本地目录
cordova plugin add D:\CordovaPlugin\plugins\toast-plugin

添加成功


添加插件

然后在Android studio中调用测试。调用方式通俗的讲就是toast-plugin.js文件中的那两个参数。

  ToastShow.show("123456");
示例

成功!!

成功效果

基础内容大概就这些,后面还会在写一个复杂一点的插件教程,大家有疑问可以在评论中问,看到了会回复,有错误也欢迎指出,共同学习。

原文地址:https://www.cnblogs.com/Free-Thinker/p/10768260.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


公司前端界面用的是vue,我要嵌入到Android中生成App第一步:安装nodenode安装:直接进入官网https:/odejs.org/zh-cn/,下载最新版本安装。安装之后在命令行中使用”node-v”检查安装是否成功。npm安装:由于新版的nodejs已经集成了npm,所以node安装时npm也一并安装好了。同样可以通过输
Q:我用cordova开发项目,想在app内跳转外部链接,安装了cordova-plugin-inappbrowser后确实可以跳转,但是跳转的页面有个按钮,原本点击会下载app,现在点击后毫无反应,求大神解惑。A:已经找到解决办法了,把cordova.InAppBrowser.open的打开网页方式改为“_system”即可,即用手机默认浏览器打
我正在使用https://github.com/arnesson/cordova-plugin-firebase/在基于离子的应用上接收GoogleFirebase消息.设置证书后,安装插件并设置Firebase帐户我能够通过Firebase控制台接收通知(在Android和ios设备上).但是,当我通过FirebaseAPI(https://firebase.google.com/docs/clo
一、Cordova的基础点在混合式应用中,我们通过现有的Cordova插件,可以轻松的在H5上调用手机native的功能。现有的Cordova插件能满足平时大部分的开发需求,然而,有时候找不到合适的插件、或对找到的插件有不满意的地方,那就要动手去做或改写一个插件,这时候就要了解一些Cordova插件的
cordova自定义插件注意:存放自定义cordova插件目录不能有空格可能会报错cordova的安装下载node.js,安装完成后你可以在命令行中使用node和npm.安装cordova使用node.js的npm工具。打开控制台输入npminstall-gcordova-g是全局安装cordova。安装完成后就可以在命令行
一、问题VueAPP中有一个文件下载功能,用了各种方法来实现下载功能,app都没有反应。JS实现html页面点击下载文件这个博客里面几乎包含了我试过的大部分方法,发现PC端没问题,手机不可以。二、经过这些方法PC端没问题,安卓就不行,问了一个接触过安卓的后台小伙伴,说是
helloindex.html1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title>我的App<itle>6<metaname="format-detection"content="telephone=no&q
1.plugman安装npminstall-gplugman如果提示permissiondenied需要加sudosudonpminstall-gplugman2.创建插件sudoplugmancreate--name插件名--plugin_id插件id--plugin_version0.0.13创建package.json文件cd上面床架的插件文件夹下,plugmancreate
最近学习了cordova插件,记录一下大概的过程,仅供参考。前期的配置就不记录了网上好多。在简书上从新写了一个更详细的cordova插件教程,有需要的可以点这里进去看看。第一步创建一个cordova项目输入命令:cordovacreate项目名包名例子:cordovacreatedemocom.zc.demo项目的大概目
我知道这个链接:https://cordova.apache.org/docs/en/latesteference/cordova-plugin-file/#where-to-store-files但我想将文件保存在Downloads目录中.这可以使用Ionic在任何路径中保存文件吗?如果是这样,请分享这个例子.这是代码:downloadImage(image){this.platform.ready(
我想在我的HTML5PhonegapJavaScript应用程序中添加状态栏通知.可能吗?解决方法:Ourteam已发布用于phonegapAndroid状态栏通知的插件.https://github.com/phonegap/phonegap-plugins/commits/master/Android/StatusBarNotification
使用cordova-plugin-geoloaction插件我正在检索用户在其移动设备上的位置.我的onSuccess()函数返回纬度和经度,现在我想在应用程序中显示相应的地址:<scripttype="text/javascript"charset="utf-8">//WaitfordeviceAPIlibrariestoload//document.addEventListe
我正在检查Android的PhoneGapAPI,并正在尝试相机示例应用程序示例并安装在我的Android手机(2.1GalaxyS)中.然而,在运行应用程序并拍照后,未检索到图像.根据我在代码中的理解,拍摄照片后,图像将显示在按钮下方60×60.我尝试在警报消息中打印出base64值,但我也没有得到任何响应(也
我刚刚在Eclipse中创建了一个包含所有phonegap和cordova文件的Android项目.但是,我没有这样的目录,因此没有config.xml.根据ApacheCordova文档,它应该位于:app/res/xml/config.xml.对于/res目录,我的文件夹结构如下:es/drawable-hdpies/drawable-ldpies/drawable-
我正试图在phonegap中设置一个新的开发环境.以下是我的路径变量设置在Windows中的外观:C:\Users\Mrinal\AppData\Roaming\npm;C:\android\development\sdk\platform-tools;C:\android\development\sdk\tools;C:\ProgramFiles\Java\jdk1.7.0_17\bin;C:\ant\bin现在在第三行
我正在将Worklight用于Android应用程序,当我尝试添加启动画面时publicclassMyAppextendsWLDroidGap{@OverridepublicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);super.setIntegerProperty("splashscreen",
我正在创建一个可在所有3个移动平台(Android,iOSa和WindowsMobile8)上运行的HTML5移动应用程序.我正在使用javascript进行本地化(https://github.com/eligrey/l10n.js/#readme).该应用程序在浏览器上正常工作.但是当我在移动模拟器上部署它时,本地化不起作用.我认为问题是java
我有通过cordova成功构建的代码.但是,当我尝试模拟它时,我收到此错误“错误:cmd:命令失败,退出代码为1”.关于如何解决这个问题的任何想法?Hereismyoutputfromattemptingtoemulatethecode解决方法:我有同样的问题.看起来你没有任何AVD在运行.我不认为ionic的教程指定你需要这
我尝试添加各种标签并尝试添加相对路径:’//’这些是我尝试过的各种元标记<metahttp-equiv="Content-Security-Policy"content="default-src'self'"><metahttp-equiv="Content-Security-Policy"content="style-src'self''u
我正在Cordova/PhoneGap中编写一个应用程序,它试图使用Dropbox.js从Dropbox获取文件.Cordova版本为3.0.1,Dropbox.js版本为0.10.0.我的Javascript在桌面浏览器上工作得很好:varclient=newDropbox.Client({key:"<mykey>",secret:"<mysecret>"});client.authenticate