cordova custom plug-in

Note: The directory where the custom cordova plug-in is stored must not contain spaces. An error may be reported.

Installation of cordova

Download node.js, after installation, you can use node and npm on the command line.
Install cordova using node.js npm tools. Open the console and enter

npm install -g cordova

-g is to install cordova globally. After the installation is complete, you can use the cordova command on the command line.

Install plugman

cordova needs plugman to create custom plug-ins

Command: npm install -g plugman

Create an android project with cordova

1. Create a cordova project

First create a cordova project directory on the computer, and then enter the created directory. After that, you can start to create the cordova project. Below is the code and example diagram for the creation of the project.

cordova create demo com.lmr.android

demo –> project name – com.lmr.android –> package name

Create plug-in

The directory after successful creation:

< div class="image-container" style="max-width: 695px; max-height: 260px;">

< img alt="share picture" style="cursor: zoom-in;" src="/wp-content/uploads/images/mobile/cordova/1626791704417.png

Plug-in directory

2. Generate android project

First enter the cordova directory you just created, and then start creating the android project.

cordova platform add android

android –> The platform name created can also be iOS, etc.

The following figure shows the successful creation In the case of the failure, the reason for the failure may be that the android environment is not well equipped.

Generate Android project

Generate directory of android project

Project directory

After generation, we start to import it into android studio:

Step 1: Choose to open local Existing android project.

Import project 1

Step 2: Find the android project just created Import.

Import project 2

After importing, the directory is as follows:

Directory structure< /div>

So far, the beginning part of the cordova plugin has been created.

Use cordova’s official plug-in

First enter the created android project directory, and then add the plug-in operation:

cordova plugin add cordova-plugin-camera

< div class="image-view" data-width="554" data-height="201"> share picture

Add the official camera plug-in

After adding the Android directory successfully Variations

The added directory

Use the added plug-in

Yes Check the cordova official website camera plug-in on the official website

Use the location of the plug-in to find the two files index.html and index.js under the Android project.

Use location

Add a test button to the index.html file.

<button id= "test">testbutton> < /span>

Example

Add in the index.js file:

//The previous test is the button of the previous button , The following test is the method name, register the click event for the buttondocument.getElementById("test").addEventListener("click",test); //click event binding methodfunction test(){ //Call the added camera plug-in// onSuccess: is the return event of successful call; onFail: is the return event of call failed navigator.camera.getPicture(onSuccess,onFail);} //successful return eventfunction onSuccess() {console.log("Camera cleanup success.")} //Failed return eventfunction onFail (message) {alert('Failed because: '+ message);}

Then run the project, the following is what I run Effect. Click the test button, the camera on the phone will be opened, and the rendering will not be released.

renderings

Create a custom plug-in

Note: Create a plug-in First cd to the directory you want to create. The directory for storing custom cordova plugins must not have noon and spaces. An error may be reported.

First create a cordova plugin directory on your computer, and then jump Go to this directory and start creating cordova plugins.

< div class="image-view" data-width="800" data-height="53"> share picture

Create a custom plug-in

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

–name toast-plugin –> plug-in name

–plugin_id toast-plugin –> plug-in ID

–plugin_version 1.0.0- -> Plug-in version number

The directory where the plug-in is generated is as follows

toast-plugin
- src
  - android
    - Android directory
- www

Write ToastDemo.java to be called

You can write this code under the Android project you just created. The specific code is as follows:

The execute method is when the plug-in is called. Pass operations and parameters and callbacks.

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 callbackC ontext) throws JSONException {if ("show".equals(action)){ // Get activity and context --> cordova.getActivity() and cordova.getContext() Toast.makeText(cordova.getContext(),args.getString(0),Toast.LENGTH_SHORT).show(); return true;} return false;}}

Copy this file to the plugin directory just generated

File copy path

Edit plugin.xml file

Modify plugin. xml and code are commented as follows:

'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-pluginname> <js-module name="ToastShow" src="www/toast-plugin.js"> <clobbers target="ToastShow" /> js-module>  <platform  name="android"> <config-file  target="res/xml/config.xml" parent="/*">  <feature name="ToastShow">  <param name="android-package" < span class="hljs-a ttr">value="com.lmr.android.ToastDemo"/> feature> config-file>  <source- file src="src/android/ToastDemo.java" target-dir="src/com/lmr/android" /> platform> plugin> < /span>< /span>< /span>

Edit the toast-plugin.js file in the www directory

It looks like this after opening:

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

Modify to

var exec = require('cordova/exec'); // ToastShow: Yes The feature tag name attribute in the plugin.xml file // show: is the name of the method called in js // [arg0]: represents a parameter , [Arg0,arg1]: Represents two parameters exports.show = function (arg0, success, error) {exec(success, error, 'ToastShow', 'show', [arg0]); };

Initialize the plugin

Go to the plugin directory and initialize the plugin p>

npm init

The effect diagram is as follows. When inputting information, the parentheses follow the input in the parentheses, and those without parentheses can be skipped.

Initialize the plug-in

Add a custom plug-in to the project

The above is basically Finished the production of a simple custom plug-in, then add the plug-in to the previously created Android project to test whether the production is successful.

The method of adding is the same as above, first enter the platforms directory< /p>

Then enter

// The local directory of the plug-in cordova plugin add D:\CordovaPlugin\plugins\toast-plugin

Added successfully

Add the plug-in

Then call the test in Android studio. Generally speaking, the calling method is the two parameters in the toast-plugin.js file.

ToastShow.show("123456");

Example

Success!!

successful results

< p>The basic content is about this, and a more complicated plug-in tutorial will be written later. If you have any questions, you can ask in the comments. If you see it, you will reply. If you have any mistakes, you are welcome to point out and learn together.

cordova custom plugin

Note: store custom cordova plugin directory There can be no spaces and an error may be reported.

Installation of cordova

Download node.js, after the installation is complete, you can use node and npm on the command line.< /li>
Install cordova and use the npm tool of node.js. Open the console and enter

npm install -g cordova

-g is to install cordova globally. After the installation is complete, you can use the cordova command on the command line.

Install plugman

cordova needs plugman to create custom plug-ins

Command: npm install -g plugman

Create an android project with cordova

1. Create a cordova project

cordova create demo com.lmr.android

demo –> project name – com.lmr.android –> package name

Create plug-in

The directory after successful creation:

< div class="image-container" style="max-width: 695px; max-height: 260px;">

< img alt="share picture" style="cursor: zoom-in;" src="/wp-content/uploads/images/mobile/cordova/1626791704519.png

Plug-in directory

2. Generate android project

First enter the cordova directory you just created, and then start creating the android project.

cordova platform add android

android –> The platform name created can also be iOS, etc.

The following figure shows the successful creation In the case of the failure, the reason for the failure may be that the android environment is not well equipped.

Generate Android project

Generate directory of android project

Project directory

After generation, we start to import it into android studio:

Step 1: Choose to open local Existing android project.

Import project 1

Step 2: Find the android project just created Import.

Import project 2

After importing, the directory is as follows:

Directory structure

So far The beginning part of the cordova plugin has been created.

Use cordova’s official plug-in

First enter the created android project directory, and then add the plug-in operation:

cordova plugin add cordova-plugin-camera

< div class="image-view" data-width="554" data-height="201"> share picture

Add the official camera plug-in

After adding the Android directory successfully Variations

The added directory

Use the added plug-in

Yes Check the cordova official website camera plug-in on the official website

The location of using the plug-in, find in under the Android project Two files, dex.html and index.js.

Use location

Add a test button to the index.html file.

<button id= "test">testbutton> < /span>

Example

In index. Add in the js file:

//The test in the front is the button of the previous button, and the test in the back is the method name, register the button Click eventdocument.getElementById("test").addEventListener("click",test); //Click event binding methodfunction test (){ //Call the added camera plug-in// onSuccess: is the return event of successful call ;OnFail: the return event of call failure navigator.camera.getPicture(onSuccess,onFail);} //Successful return eventfunction onSuccess() {console.log("Camera cleanup success.")} //Failed return event function onFail(message) {alert('Failed because: '+ message);}

Then run the project, the following is the effect I run. Click the test button, the camera on the phone will be opened, and the rendering will not be released.

renderings

Create a custom plug-in

Note: Create a plug-in First cd to the directory you want to create. The directory for storing custom cordova plugins must not have noon and spaces. An error may be reported.

First create a cordova plugin directory on your computer, and then jump Go to this directory and start creating cordova plugins.

< div class="image-view" data-width="800" data-height="53"> share picture

Create a custom plug-in

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

–name toast-plug in –> plug-in name

–plugin_id toast-plugin –> plug-in ID

–plugin_version 1.0.0 –> plug-in version number

The directory where the plug-in is generated is as follows

toast-plugin
- src
  - android
    - android directory
  - www
Write ToastDemo.java to be called

You can write this code under the Android project you just created. The specific code is as follows:

The execute method is when the plug-in is called, it will pass the operation, parameters and callbacks.
```
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 callbackCon text) 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,代码都有注释，如下：
```
‘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-pluginname> <js-module name="ToastShow" src="www/toast-plugin.js"> <clobbers target="ToastShow" /> js-module>  <platform name="android"> <config-file target="res/xml/config.xml" parent="/*">  <feature name="ToastShow">  <param name="android-package" value="com.lmr.android.ToastDemo"/> feature> config-file>  <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 
```
添加成功
添加插件

< p>然后在Android studio中调用测试。调用方式通俗的讲就是toast-plugin.js文件中的那两个参数。
```
ToastShow.show("123456"); 
```
示例

成功！！

成功效果

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

cordova自定义插件

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

cordova的安装

下载node.js，安装完成后你可以在命令行中使用node和npm.

安装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">testbutton>

示例

在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 callbackConte xt) 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,代码都有注释，如下：

‘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-pluginname> <js-module name="ToastShow" src=" www/toast-plugin.js"> <clobbers target="ToastShow" /> js-module> <platform name="android"> <config-file target="res/xml/config.xml" parent="/*"> <feature name="ToastShow"> <param name="android-package" value="com.lmr.android.ToastDemo"/> feature> config-file> <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");

示例

成功！！

成功效果

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

创建插件

插件目录

生成Android工程

工程目录

导入工程1

导入工程2

目录结构

添加官方相机插件

添加之后的目录

使用位置

示例

效果图

创建自定义插件

文件复制路径

初始化插件

添加插件

示例

成功效果

Cordova, Custom, foundation, plugin

Post navigation

Cocos2D-X Basic Concept
How to add string resources to strings.xml in the Cordova project

Leave a Comment Cancel reply
Your email address will not be published.