cordova開發自訂外掛程式

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的下載

到Google官網(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 {@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外掛程式的安裝

  我的外掛程式所在的路徑是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: