Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> cordova開發自定義插件

cordova開發自定義插件

編輯:關於android開發

cordova開發自定義插件


由於最近工作需要,需要一個自定義插件,本人研究了很久終於做出一個最簡單的插件,是基於android平台來開發的,雖然寫博客很花時間,但是為了以後再次查看復習能很好的提供參考,也是值了,廢話就不多說,直接進入主題。

 

1.環境搭建

cordova插件開發前需要安裝一些軟件和配置環境

1.1 node.js環境搭建

到node.js官網(https://nodejs.org/)下載安裝就好,不過訪問node.js需要翻牆,在dos窗口輸入npm,能顯示如下信息就說明node.js安裝成功

\

1.2 cordova 的安裝

在窗口輸入下面命令全局安裝cordova

npm install -g cordova

1.3 android sdk的下載

到谷歌官網(https://developer.android.com/sdk/index.html)上下載android sdk,然後需配置下面幾個環境變量

\

到此插件的開發環境就搭建好了。

 

2.創建第一個應用

創建的命令是cordova create

列如:

cordovacreate hello com.cool.hello HelloWorld

 

 

 

  • 第一個參數hello表示在工程目錄中創建一個 hello 的文件夾
  • 第二個參數com.cool.hello表示包名(反向域名),用於標志不同的 app
  • 第三個參數HelloWorld表示項目的名稱,可以在 config.xml 文件中修改

     

     

    3.添加平台

    3.1 進入創建的項目目錄

    cd hello

    3.2查看已有的平台

     

    cordova platforms list

    3.3添加所需要的平台

    cordova platform add android

     

    如果想移除已經添加的平台的話cordova platform remove android 或者cordova platform rm android

     

    4.編譯項目

    編譯項目命令

    cordova build android

    5.運行項目

    cordova run android

    注:生成的項目可以導入到eclipse中,導入之後如下圖

    \

    6.插件開發

    前面說了這麼多全都是准備工作,接下來是插件的具體開發過程

    6.1 pluman的安裝

    npm install -g plugman

    6.2 plugman安裝完之後就可以創建一個插件了cordova plugin

    plugman create --name --plugin_id --plugin_version [--path ] [--variableNAME=VALUE]

    參數:
    pluginName: 插件名字
    pluginID: 插件id, egg:coolPlugin
    oversion: 版本, egg : 0.0.1
    directory:一個絕對或相對路徑的目錄,該目錄將創建插件項目
    variable NAME=VALUE: 額外的描述,如作者信息和相關描述

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

     

    生成的插件的目錄如下:

    \

    但是遵循規范的話,一般在src目錄下新建android目錄,然後在android目錄下新建類,如下圖

     

    \ \

     

    其中HelloPlugin.js和plugin.xml的相關配置如下

     

    a.plugin.xml的配置

     

    
        CoolPlugin
        
            
        
        
        
            
                
                
            
    
    
            
    
    
              
                  
             
            
        
            
            
    
    
            
    
    
            
        
    


     

     

     

    
      
                  
             


     

     

    b.HelloPlugin.js的配置

     

     

    var exec = require('cordova/exec');
    var myFunc = function(){};
    
    
    // arg1:成功回調
    // arg2:失敗回調
    // arg3:將要調用類配置的標識
    // arg4:調用的原生方法名
    // arg5:參數,json格式
    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最後還有一個java類

    裡面的哪個TestActivity這個類是我測試用的,這裡忽悠就好

     

     

    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 {
    
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    // TODO Auto-generated method stub
    if("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插件的安裝

    我的插件所在的路徑是F:\CoolPlugin

    首先切換到最初創建的hello目錄 cd hello

    執行插件安裝命令cordova plugin addF:\CoolPlugin

    執行完之後你就發現插件已經安裝上去了

     

    6.4插件的使用

     

     

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

     

    在F:\hello\platforms\android\assets\www下的index.html的中

     

    egg:

     

    
    

     

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved