android 和 phonegap(Cordova)互動使用Zxing二維碼掃描
android方面的配置:配置環境,下載、編譯Zxing原始碼,整合進專案
1、環境下載、安裝,編譯Zxing原始碼
下載Zxing原始碼地址:https://github.com/zxing/zxing
其中android資料夾下為一個功能應用,有分享、歷史記錄;
androidtest資料夾下為一個測試應用,主要是測試android資料夾下的應用的功能;
android-integration資料夾下為一些介面,androidtest主要呼叫這裡面的介面來達到呼叫android下面的實現;
core資料夾下為核心程式碼,解析碼,生成碼等實現都在此;
android-core資料夾下就一個檔案,關於camera的設定;
程式碼已經有了,但是原始碼中缺少一個jar,包,也就是core-3.2.2-SNAPSHOT.jar這類,需要我們編譯;這個時候配置我們的環境:
1.1、安裝配置環境
Ant: http://ant.apache.org/bindownload.cgi
Maven: http://maven.apache.org/download.cgi
下載效果如下圖
配置的方法就是解壓在一個資料夾下;然後在我的電腦中的環境變數path中配置:
Path中配置的路徑依據實際情況配置;
1.2 、環境安裝好後,開始編譯
檢測環境是否配置好:
ant -version;
mvn -version;
通過CMD進入到“D:\PhoneGapEnvi\zxing-master”的指定目錄;
然後開始編譯;
進入到 zxing-master\android 目錄,輸入命令:
android update project –path .
編譯jar包在 zxing-master\core 目錄,輸入命令:
mvn -DskipTests -Dgpg.skip=true install
編譯成功以後如下圖很容易發現jar包在
D:\PhoneGapEnvi\zxing-master\core\target 下面的core-3.2.2-SNAPSHOT.jar
1.3、 eclipse引進Zxing專案並且配置執行
引進去以後發現專案會報錯,主要有幾個原因:
1、libs
2、CameraConfigurationUtils:這個類找不到源頭,需要配置,檔案在 D:\PhoneGapEnvi\zxing-master\android-core目錄中,記錄檔案目錄別忘了;
注意:ZXingTestActivity不使用到,可以不用配置;如果要使用,配置的檔案在
D:\PhoneGapEnvi\zxing-master\android-integration目錄中,複製進去即可;
整個Zxing專案就可以執行起來了。
2、將執行好的專案移植進ionic跨平臺專案中
需要運動的東西有的多,注意移植,主要有如下紅線部分:
還有特別重要的許可權檔案 AndroidManifest.xml 配置;
移植好了以後專案一大半已經完成了;
cordova 外掛、ionic 、android整合
3、cordova 中安裝配置phonegap-plugin-barcodescanner外掛
最後生成的目錄有下效果:
3.1 專案中的使用
controller中的使用:
angular.module('aftersale.ctrl', [])
.controller('aftersaleCtrl', function ($scope, $log, $cordovaPreferences,$cordovaBarcodeScanner,ShowFactory) {
$scope.afterSaleTitle="售後";
$scope.scanBarcode = function()
{
//這裡就是呼叫的方法:$cordovaBarcodeScanner.scan();
$cordovaBarcodeScanner.scan().then(function(imageData)
{
console.log("Barcode Format -> " + imageData.text);
console.log("Barcode Format -> " + imageData.format);
console.log("Cancelled -> " + imageData.cancelled);
}, function(error) {
console.log("An error happened -> " + error);
});
};
});
android 方面的:
com.phonegap.plugins.barcodescanner.BarcodeScanner中
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) {
this.callbackContext = callbackContext;
this.requestArgs = args;
if (action.equals(ENCODE))
{
Log.i(LOG_TAG, "ENCODE");
JSONObject obj = args.optJSONObject(0);
if (obj != null) {
String type = obj.optString(TYPE);
String data = obj.optString(DATA);
// If the type is null then force the type to text
if (type == null) {
type = TEXT_TYPE;
}
if (data == null) {
callbackContext.error("User did not specify data to encode");
return true;
}
encode(type, data);
} else {
callbackContext.error("User did not specify data to encode");
return true;
}
}
//會呼叫這裡;
else if (action.equals(SCAN))
{
Log.i(LOG_TAG, "SCAN");
//android permission auto add
if(!hasPermisssion()) {
requestPermissions(0);
} else {
scan(args);
}
}else {
return false;
}
return true;
}
如果使用者喜歡呼叫ZXing專案原始的畫面,修改如下程式碼:
//將之前的這個方法的程式碼登出,寫上如下程式碼,即可呼叫ZXing原生專案的介面和邏輯;
public void scan(final JSONArray args) {
Log.i(LOG_TAG, " public void scan()");
Intent intent = new Intent();
intent.setClass(webView.getContext(), CaptureActivity.class);
this.cordova.getActivity().startActivity(intent);
}
以上如有不能理解的地方請留言;