快速自定义Cordova插件（-安卓篇）

时间  2020-07-19 标签 快速 自定义 cordova 插件

1，安装plugman,Cordova须要用这个来建立插件html

 

 

  • 命令: npm install -g plugman

 

 

2，plugman安装完以后就能够建立一个插件了cordova plugin

 

  • 命令:plugman create --name [插件名] --plugin_id [插件ID] --plugin_version [插件版本号]
  • 例子:plugman create --name toastPlugin --plugin_id toast-plugin-xytoast --plugin_version 1.0.1
  • 演示:桌面上新建plugins文件夹，而后cd到plugins文件夹
MAC005deMacBook-Pro:~ mac005$ cd /Users/mac005/Desktop/plugins 
MAC005deMacBook-Pro:plugins mac005$ plugman create --name toastPlugin --plugin_id cordova-plugin-xytoast --plugin_version 1.0.1
MAC005deMacBook-Pro:plugins mac005$

1.0.0版本好像下面提交插件库提交不上去，因此从1.0.1版本开始了java

这里插件id注意最好都小写，这个插件id会在用户安装完以后显示在config.xml文件中的<plugin name="cordova-plugin-whitelist" spec="1" />android

而后在plugins文件夹下面就会生成目录以下：ios

 

  • 一个规范的插件的话，通常src目录下新建android和ios目录，而后在android和ios目录下新建类

以下：git

 

3，建立完成后须要对plugin.xml进行配置

 

  • 打开后的文件以下
 
<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-xytoast" version="1.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>toastPlugin</name>
    <js-module name="toastPlugin" src="www/toastPlugin.js">
        <clobbers target="cordova.plugins.toastPlugin" />
    </js-module>
</plugin>

 

这里要注意一些参数的含义：github

 

id：表明这个插件的惟一标示，在上传到npm后，用户都是经过这个插件id去下载的chrome

<name>：这里name能够和id不同的，这个name就是插件的name，没有其余对应关系apache

<js-module>:文件中可能会有多个js-module的，一个js-module就是一个调用的方式，这里用户调用的方式就是cordova.plugins.toastPlugin.方法名，以后咱们会对外提供toast这个方法，那调用方式就为cordova.plugins.toastPlugin.toast,也有可能再建立一个js-module以下：npm

 

<js-module name="toastAuto" src="www/toastAuto.js">
        <clobbers target="cordova.plugins.toastAuto" />
</js-module>

以后咱们会对外提供auto这个方法，那调用方式就为cordova.plugins.toastAuto.auto,上面有没有发现js-module标签里面name和src和target他们对应与同一个js文件名的都为toastAuto.jsjson

js-module标签中的name要和www文件夹下toastPlugin.js这个文件名同样

<clobbers>中的target: 这个target就是js代码调用原生代码的引用

 

  • 添加Android平台配置后
<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-toast" version="1.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>toastPlugin</name>
    <js-module name="toastPlugin" src="www/toastPlugin.js">
        <clobbers target="cordova.plugins.toastPlugin" />
    </js-module>
    
    <platform name="android">  
        <source-file src="src/android/ShowToast.java" target-dir="src/com/hand/toast"/>  
        <config-file target="res/xml/config.xml" parent="/*">  
            <feature name="ShowToast">  
                <param name="android-package" value="com.hand.toast.ShowToast"/>  
            </feature>  
        </config-file>  
    </platform>  
</plugin>

参数的含义：

platform中: name为平台名

source-file标签中: src为java源文件的路径，target-dir为插件安装好后，源文件的位置，要和下面的feature标签下param标签里的value中的包名对应

feature标签中：name要与java类名一致都为ShowToast, param标签中的value是插件安装好后java类名全路径

 

4, 编写toastPlugin.js文件

 

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

exports.toast = function (arg0, success, error) {
    exec(success, error, 'ShowToast', 'toastFunc', [arg0]);
};

 注意：  ShowToast:是plugin.xml中配置的feature的name

            toastFunc是对应名为ShowToast的java类中的method

            toast：是在外部使用时调用的方法，对使用者是可见的。

5, 编写Android原生功能类 ShowToast.java文件

 

  •  咱们首先须要新建一个cordova工程
cd /Users/mac005/Desktop
cordova create MyApp
cd /Users/mac005/Desktop/MyApp
cordova platform add android 
cordova build android
  •  用androidstudio打开android工程，而后在android平台下面去新建ShowToast.java文件以下：
  • 完善ShowToast.java文件
package com.hand.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 ShowToast extends CordovaPlugin{  
  private CallbackContext mCallbackContext;  
  @Override  
  public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {  
    this.mCallbackContext = callbackContext;  
    if("toastFunc".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（“toastFunc”.equals(action)）中的toastFunc对应toastPlugin.js中exec方法的第4个参数

完成这个ShowToast.java类后把完整的类复制到以前建立的toastPlugin插件下面位置为src/android/ShowToast.java,这样一个最简单的插件就算是完成了，接下来测试一下咱们的成果

 

  • 插件的使用
<Button onclick="cordova.plugins.toastPlugin.toast('吐司',function(msg){  
  alert(msg);  
},function(msg){  
  alet(msg);  
})">打印吐司</Button>

 

6, 建立npm mudule

MAC005deMacBook-Pro:toastPlugin mac005$ npm init
package name: (toastplugin) cordova-plugin-xytoast
version: (1.0.0) 1.0.1
description: an android toast
entry point: (index.js) 
test command: 
git repository: https://github.com/XiaoyuZheng666/CordovaPlugin.git
keywords: toast
author: xiaoyuzheng
license: (ISC) MIT
About to write to /Users/mac005/Desktop/plugins/toastPlugin/package.json:

{
  "name": "cordova-plugin-xytoast",
  "version": "1.0.1",
  "description": "an android toast",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/XiaoyuZheng666/CordovaPlugin.git"
  },
  "keywords": [
    "toast"
  ],
  "author": "xiaoyuzheng",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/XiaoyuZheng666/CordovaPlugin/issues"
  },
  "homepage": "https://github.com/XiaoyuZheng666/CordovaPlugin#readme"
}


Is this ok? (yes)

这里注意：package name是要求所有小写，这个会在用户安装好了以后，显示在用户的package.js中的dependencies中。它能够和插件id不同的，不过我看通常的三方插件package的name和插件id是同样的。若是发现屡次提交失败，考虑从新命令行向导生成package文件,命令以下

npm init

 

7, 本地测试

    建立一个cordova工程CordovaTest而且添加以前建立的插件

MAC005deMacBook-Pro:~ mac005$ cd /Users/mac005/Desktop 
MAC005deMacBook-Pro:Desktop mac005$ cordova create CordovaTest
Creating a new cordova project.
MAC005deMacBook-Pro:Desktop mac005$ cd /Users/mac005/Desktop/CordovaTest 
MAC005deMacBook-Pro:CordovaTest mac005$ cordova platform add android
Using cordova-fetch for cordova-android@~7.0.0
Adding android project...
Creating Cordova project for the Android platform:
	Path: platforms/android
	Package: io.cordova.hellocordova
	Name: HelloCordova
	Activity: MainActivity
	Android target: android-26
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@7.0.0
Android Studio project detected
Android Studio project detected
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for android

               This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.
          
Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
--save flag or autosave detected
Saving android@~7.0.0 into config.xml file ...
MAC005deMacBook-Pro:CordovaTest mac005$ cordova plugin add /Users/mac005/Desktop/plugins/toastPlugin 
Installing "cordova-plugin-xytoast" for android
Android Studio project detected
Adding cordova-plugin-xytoast to package.json
Saved plugin info for "cordova-plugin-xytoast" to config.xml

在工程www文件夹下面的index.html作测试

添加以下代码

<button onclick="cordova.plugins.toastPlugin.toast('吐司',function(msg){  
  alert(msg);  
},function(msg){  
  alert(msg);  
})">打印吐司</button>

而后经过cordova run android命令运行去cordovaTest工程，发现成功了

若是发现没起做用，记得用chrome的小工具inspect去查看，由于是google的服务须要开蓝灯翻墙，会发现报错以下：

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'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

 

在index.html中使用下面的代码

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />

而后能够在安卓studio中打断点一步步去调试插件，直至成功！

8, 提交npm

发布前须要修改package.json中的version，若是是1.0.0是不容许发布的，修改成更高版本便可。 而后在发布前还须要在npm官网注册你的帐户，而后经过

npm adduser

来添加本地用户,须要用户名、密码与邮箱。

npm publish

在文件夹中加入license与readme等，使用这个命令去上传便可。

命令行出现，你的“项目名@版本号”，说明上传成功，过会去cordova plugin页面搜索便可。

 

插件demo地址：点击打开连接

联系我们 沪ICP备13005482号-10