引用
這個插件采用的是開源版的 zxing,如果性能、識別率不滿足需求的話,建議使用 Scandit,它提供了 Community SDK,并且支持 Platforms(iOS/Android)、Frameworks(Titanium/Xamarin/Phonegap/Worklight)。其中 Community 版的支持 UPC-A / UPC-E、EAN8 / EAN13、QR Code。
插件地址:https://github.com/wildabeast/BarcodeScanner
(1)創(chuàng)建工程
引用
cordova create HelloBarcode com.rensanning.cordova HelloBarcode
cd HelloBarcode
cordova platform add android
(2)安裝 plugin
引用
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
(3)修改 index.html 后編譯執(zhí)行
http://wiki.jikexueyuan.com/project/cordova-3.x-Plug-in-article/images/2.1.png" alt="picture2.1" />
Html 代碼
<a href="#" class="btn" onclick="scanCode();">Scan Code</a>
<script type="text/javascript">
function scanCode() {
cordova.plugins.barcodeScanner.scan(
function (result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
</script>
http://wiki.jikexueyuan.com/project/cordova-3.x-Plug-in-article/images/2.2.png" alt="picture2.2" />
http://wiki.jikexueyuan.com/project/cordova-3.x-Plug-in-article/images/2.3.png" alt="picture2.3" />
Android 版本的 Zxing 插件默認(rèn)是橫向掃描的,豎向掃碼需要修改插件的代碼。這里有改好的,可以試試。com.phonegap.plugins.barcodescanner.rar
Html 代碼
<a href="#" class="btn enc" onclick="encodeText();">Encode Text</a>
<script type="text/javascript">
function encodeText() {
cordova.plugins.barcodeScanner.encode(
"TEXT_TYPE",
"http://www.baidu.com",
function(success) {
alert("encode success: " + success);
}, function(fail) {
alert("encoding failed: " + fail);
}
);
}
</script>
http://wiki.jikexueyuan.com/project/cordova-3.x-Plug-in-article/images/2.4.png" alt="picture2.4" />
Html 代碼
<a href="#" class="btn enc" onclick="encodeEmail();">Encode Email</a>
<script type="text/javascript">
function encodeEmail() {
cordova.plugins.barcodeScanner.encode(
"EMAIL_TYPE",
"rensanning@gmail.com",
function(success) {
alert("encode success: " + success);
}, function(fail) {
alert("encoding failed: " + fail);
}
);
}
</script>
http://wiki.jikexueyuan.com/project/cordova-3.x-Plug-in-article/images/2.5.png" alt="picture2.5" />
Html 代碼
<a href="#" class="btn enc" onclick="encodePhone();">Encode Phone</a>
<script type="text/javascript">
function encodePhone() {
cordova.plugins.barcodeScanner.encode(
"PHONE_TYPE",
"135-1234-5678",
function(success) {
alert("encode success: " + success);
}, function(fail) {
alert("encoding failed: " + fail);
}
);
}
</script>
http://wiki.jikexueyuan.com/project/cordova-3.x-Plug-in-article/images/2.6.png" alt="picture2.6" />
Html 代碼
<a href="#" class="btn enc" onclick="encodeSMS();">Encode SMS</a>
<script type="text/javascript">
function encodeSMS() {
cordova.plugins.barcodeScanner.encode(
"SMS_TYPE",
"An important message for someone.",
function(success) {
alert("encode success: " + success);
}, function(fail) {
alert("encoding failed: " + fail);
}
);
}
</script>
http://wiki.jikexueyuan.com/project/cordova-3.x-Plug-in-article/images/2.7.png" alt="picture2.7" />
注意:
a) 沒有實現(xiàn) CONTACT_TYPE 和 LOCATION_TYPE 的 encode。
b) 如果 encode 出錯:
Java 代碼
java.lang.NullPointerException
at com.google.zxing.client.android.encode.EncodeActivity.onCreateOptionsMenu(EncodeActivity.java:89)
下載最新的 encode.xml 文件,覆蓋 platforms\android\res\menu\encode.xml
Xml 代碼
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/menu_share"
android:title="@string/menu_share"
android:icon="@android:drawable/ic_menu_share"
android:orderInCategory="1"
android:showAsAction="withText|ifRoom"/>
<item android:id="@+id/menu_encode"
android:title="@string/menu_encode_vcard"
android:icon="@android:drawable/ic_menu_sort_alphabetically"
android:orderInCategory="2"
android:showAsAction="withText|ifRoom"/>
</menu>