Custom CORDOVA Plugin (Basics)

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

  1. Download node.js, after installation, you can use node and npm on the command line.
  2. 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

share picture 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.

Share pictures Generate Android project

Generate directory of android project

share picture Project directory

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

Step 1: Choose to open local Existing android project.

Share pictures Import project 1

Step 2: Find the android project just created Import.

Share a picture Import project 2

After importing, the directory is as follows:

share picture 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

share picture 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.

Share pictures Use location

Add a test button to the index.html file.

<button id= "test">testbutton> < /span>
share picture 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.

share picture 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

share picture 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.

Share pictures 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

share picture 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"); 
Share picture Example

Success!!

share picture 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

  1. Download node.js, after the installation is complete, you can use node and npm on the command line.< /li>
  2. 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

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

share picture 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.

Share pictures Generate Android project

Generate directory of android project

share picture Project directory

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

Step 1: Choose to open local Existing android project.

Share pictures Import project 1

Step 2: Find the android project just created Import.

Share a picture Import project 2

After importing, the directory is as follows:

share picture 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

share picture 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.

share picture Use location

Add a test button to the index.html file.

<button id= "test">testbutton> < /span>
share picture 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.

Share pictures 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
        • < /ul>

      • 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的安装

    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">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

    分享图片
    分享图片 目录结构

    分享图片
    分享图片 添加官方相机插件

    分享图片
    分享图片 添加之后的目录

    分享图片
    分享图片 使用位置

    分享图片
    分享图片 示例

    分享图片
    分享图片 效果图

    分享图片
    分享图片 创建自定义插件

    分享图片
    分享图片 文件复制路径

    分享图片
    分享图片 初始化插件

    分享图片
    分享图片 添加插件

    分享图片
    分享图片 示例

    分享图片
    分享图片 成功效果

    WordPress database error: [Table 'yf99682.wp_s6mz6tyggq_comments' doesn't exist]
    SELECT SQL_CALC_FOUND_ROWS wp_s6mz6tyggq_comments.comment_ID FROM wp_s6mz6tyggq_comments WHERE ( comment_approved = '1' ) AND comment_post_ID = 3797 ORDER BY wp_s6mz6tyggq_comments.comment_date_gmt ASC, wp_s6mz6tyggq_comments.comment_ID ASC

    Leave a Comment

    Your email address will not be published.