Cordova從零開始插件開發-支付寶插件(一)

這兩天APP開發基本進入尾聲,但有一個最後的難題發生了,就是支付。就目前而言,大家一般都在用的手機(移動)支付方式無非就是三種;

支付寶、微信、網銀(銀聯)支付;本文着重講一下支付寶插件的開發,其他兩種類似。

支付寶方面:需要簽約,商戶公鑰,商戶私鑰,支付寶公鑰,商戶parentID等一些信息,請參考支付寶集成開發文檔或使用度娘搜索。

Cordova下的支付寶插件,度娘搜了一下,好多說的有頭沒尾的,讓人看了更頭疼;要不就是收費的,哎,對於咱這種苦逼屌絲程序猿來說,傷不起!

沒辦法,只能自己來搞;於是各種搜索Cordova插件開發例子,教程等,講的都是大同小異的內容,沒有適合的步驟來做,然初學者無從下手;

本文將從零開始講解,如何開發插件,並已一個例子--支付寶插件來講解。

注:小弟也初學。講得不好,大神勿噴!


1、創建cordova工程項目

cordova create plugdemo com.demo.plugdemo plugdemo

2、添加支持平臺

cd plugdemo

cordova platform add android

3、導入eclipse,進行插件開發。

導入步驟:右鍵新建->Other

在嚮導中選擇如圖所示。

選擇項目所在目錄,勾選列表中出現的2個項目,點擊Finish即可

這裏可以把項目重新命名也可以。改名後注意引用的更改。

導入成功後,目錄結構如下圖

可以看到,默認的assets中是沒有文件的,但在目錄結構中是可以看到的;這裏右鍵plugdemo->Properties(屬性)或者選中項目按Alt+Enter也可以打開屬性窗口

打開後,展開Resource->Resource Filters,在右側的窗口中,將Exclude all中顯示的全部去除即可顯示。

這裏導入項目部分介紹完畢!下面開始做第一個Hello World的插件demo。

一、在 src 文件夾中創建一個 com.demo.plugs 包,在包內創建一個 PlugHelloWorld.java 文件,編寫下面的代碼:

package com.demo.plugs;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;

import android.content.Context;
import android.widget.Toast;

public class PlugHelloWorld extends CordovaPlugin {
	public boolean execute(String action , JSONArray args, CallbackContext callbackContext ){
		/*顯示一個提示語*/
        Context Activity = this.cordova.getActivity().getApplicationContext();
        Toast.makeText(Activity, "你好!世界!", Toast.LENGTH_LONG).show();
        /*顯示一個提示語*/

        return true;
    }
}
插件必須繼承自 CordovaPlugin 類,而包名和插件名是自定義的。

插件必須包含一個 execute 方法,它是唯一可以被 JavaScript 直接調用的方法。

二、在 res/xml/config.xml 文件 <widget></widget> 標籤內加入下面的代碼


<feature name="PlugHelloWorld">
	    <param name="android-package" value="com.demo.plugs.PlugHelloWorld" />
	</feature>

name:方法名  value:包名+方法名。

三、添加JS引用,調試插件運行。

在assets/www/index.html中添加如下代碼:

<div class="app">
       <h1>Apache Cordova</h1>
       <div id="deviceready" class="blink">
       <p class="event listening">Connecting to Device</p>
       <p class="event received">Device is Ready</p>
        <input type = "button" value="點擊我測試插件運行效果!" onclick="a1()" />
       </div>
</div>


在assets/www/js/index.js文件 onDeviceReady方法中添加如下代碼:

function a1(){
	cordova.exec(success,error,"PlugHelloWorld",null,[]);
}

參數解釋:

success:插件執行成功的回調函數

error:插件執行失敗的回調函數

PlugHelloWorld:插件方法名

null:插件中如果定義多個方法,如set,get,select等方法,這裏指定要執行的方法名。execute方法無需指定。

[]:參數,即執行方法的傳遞參數,JSON數據格式。

可暫時無需關心回調,即success和error均設置爲null即可。

到此,一個簡單的插件編寫已完畢,運行APP可以測試看看效果。

若顯示中文出現亂碼,請自行度娘解決。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章