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
The directory after successful creation:
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 directory of android project
After generation, we start to import it into android studio:
Step 1: Choose to open local Existing android project.
Step 2: Find the android project just created Import.
After importing, the directory is as follows:
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
After adding the Android directory successfully Variations
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.
Add a test button to the index.html file.
<button id= "test">testbutton> < /span>
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);} span>
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.
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.
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
- android
- www
- src
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;}} span>
Copy this file to the plugin directory just generated
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: p>
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.
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
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");
Success!!
< 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
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
The directory after successful creation:
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 directory of android project
After generation, we start to import it into android studio:
Step 1: Choose to open local Existing android project.
Step 2: Find the android project just created Import.
After importing, the directory is as follows:
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
After adding the Android directory successfully Variations
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.
Add a test button to the index.html file.
<button id= "test">testbutton> < /span>
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);} span>
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.
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.
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>
- android
- www
- src
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; } } span>
把这个文件复制到刚刚生成的插件目录下
编辑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 studio中:
第一步:选择打开本地已有的android工程。
第二步:找到刚刚创建好的android工程导入。
导入之后目录如下:
至此就已经把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的目录
- android
- www
- src
编写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");
成功!!
基础内容大概就这些,后面还会在写一个复杂一点的插件教程,大家有疑问可以在评论中问,看到了会回复,有错误也欢迎指出,共同学习。
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