Develop custom plug-ins in cordova

Develop custom plug-ins in cordova

A custom plug-in is required for recent work. I have studied it for a long time and finally developed the simplest plug-in based on the android platform. Although it takes a lot of time to write a blog, but in order to view the review again in the future, it can provide a good reference, it is also a value, not to mention nonsense, directly enter the topic.

 

1. Establish the environment

Install some software and configuration environment before developing the cordova plug-in.

1.1 node. js Environment Construction

To node. js official website (https://nodejs.org/) download and installation is good, but visit node. js need to flip the wall, in the dos window input npm, can display the following information on the node. js installation successful

1.2 install cordova

Enter the following command in the window to install cordova globally

Npm install-g cordova

1.3 download android sdk

Go to Google's official website (https://developer.android.com/sdk/index.html) to download android sdk, and then need to configure the following environment variables

The development environment of this plug-in is ready.

 

2. Create the first application

The created command is cordova create

Example:

Cordovacreate hello com. cool. hello HelloWorld

 

 

 

• First ParameterhelloCreates a hello folder in the project directory.
• Second Parametercom.cool.helloIndicates the package name (Reverse Domain Name), used to mark different apps
• Third ParameterHelloWorldIndicates the project name, which can be modified in the config. xml file.

   

   

  3. Add a platform

  3.1 enter the created project directory

  Cd hello

  3.2 view existing platforms

   

  Cordova platforms list

  3.3 Add the required Platform

  Cordova platform add android

   

  To remove a platform that has already been added, cordova platform remove android or cordova platform rm android

   

  4. compile the project

  Compile project commands

  Cordova build android

  5. Run the project

  Cordova run android

  Note: The generated project can be imported to eclipse, as shown in figure

  6. Plug-in development

  As mentioned above, all preparations are made. The next step is the specific development process of the plug-in.

  6.1 install pluman

  Npm install-g plugman

  6.2 After installing plugman, you can create a plug-in named cordova plugin.

  Plugman create -- name -- Plugin_id -- Plugin_version [-- Path ] [-- VariableNAME = VALUE]
  
  Parameters:
  PluginName: plug-in name
  PluginID: plug-in id, egg: coolPlugin
  Oversion: version, egg: 0.0.1
  Directory: an absolute or relative directory that creates a plug-in Project
  Variable NAME = VALUE: additional descriptions, such as author Information and Related descriptions

  Egg: plugman create -- name CoolPlugin -- plugin_id coolPlugin -- plugin_version 0.0.1

   

  The Directory of the generated plug-in is as follows:

  However, to comply with the rules, we generally create an android directory under the src directory, and then create a class under the android directory, as shown in

   

  
  

   

  The configuration of HelloPlugin. js and plugin. xml is as follows:

   

  A. plugin. xml configuration

   

     
      
       
        
             
          
           CoolPlugin
              
           
            
              
              
           
            
            
              
             
            
            
            
             
            
             
            
            
            
          
         
        
       
      
     

  
  
  

   

   

   

  
  
  

   

   

  B. Configure HelloPlugin. js

   

   

  Var exec = require ('cordova/exec '); var myFunc = function () {}; // arg1: Successful callback // arg2: Failed callback // arg3: ID of the class configuration to be called // arg4: name of the called native method // arg5: parameter, json format myFunc. prototype. showToast = function (success, error) {exec (success, error, "CoolToast", "showToast", []) ;}; myFunc. prototype. showshowToast = function (text, lenth, success, error) {exec (success, error, "CoolToast", "showshowToast", [text, lenth]) ;}; myFunc. prototype. openActivity = function () {exec (null, null, "CoolToast", "openActivity", []) ;}; var showt = new myFunc (); module. exports = showt;

  
  
  

   

   

  C. Finally, there is a java class.

  Which of the following TestActivity classes is used for testing?

   

   

  package com.cool.toast;import org.apache.cordova.CallbackContext;import org.apache.cordova.CordovaPlugin;import org.json.JSONArray;import org.json.JSONException;import com.example.hello.TestActivity;import android.content.Intent;import android.widget.Toast;public class ShowToast extends CordovaPlugin {@Overridepublic boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {// TODO Auto-generated method stubif("showToast".equals(action)){Toast.makeText(cordova.getActivity(), "show...", Toast.LENGTH_SHORT).show();callbackContext.success("success");return true;}else if("showshowToast".equals(action)){String str = args.getString(0);int len = args.getInt(1);if(len == 0){Toast.makeText(cordova.getActivity(), str, Toast.LENGTH_SHORT).show();callbackContext.success("success" + str);return true;}else{Toast.makeText(cordova.getActivity(), str, Toast.LENGTH_LONG).show();callbackContext.success("success" + str);return true;}}else if("openActivity".equals(action)){openActivity();callbackContext.success("success");return true;} callbackContext.error("error");        return false; }private void openActivity() {Intent intent = new Intent(cordova.getActivity(),TestActivity.class);cordova.getActivity().startActivity(intent);}}

   

  6.3 plug-in Installation

  The path of my plug-in is F: \ CoolPlugin.

  Switch to the newly created hello directory cd hello

  Execute the plug-in installation command cordova plugin addF: \ CoolPlugin

  After the execution, you will find that the plug-in has been installed.

   

  6.4 Use of plug-ins

   

   

  cool.toast.showToast();  cool.toast.showshowToast("hello",0, function(msg) {                alert(msg);            }, function(msg) {                alert(msg);            });cool.toast.openActivity();

  
  

   

  In index.html under F: \ hello \ platforms \ android \ assets \ www

   

  Egg: