本教程之前的這幾篇文章，算是圍繞著 SAP UI5 和 Cordova 的一個小系列：

* [SAP UI5 應用開發教程之四十八 - 如何在 SAP UI5 應用裡開發條形碼掃描功能](https://jerry.blog.csdn.net/article/details/123420376) - 透過這篇文章介紹的步驟開發而成的 SAP UI5 應用，只能在桌面瀏覽器里正常執行，在使用者授權的情況下，開啟膝上型電腦的攝像頭。

* [SAP UI5 應用開發教程之四十九 - 如何在桌面電腦端除錯執行在手機上的 SAP UI5 應用](https://jerry.blog.csdn.net/article/details/123433404)

* [SAP UI5 應用開發教程之五十 - 如何使用 Cordova 將 SAP UI5 應用生成一個能在 Android 手機上安裝的混合應用](https://jerry.blog.csdn.net/article/details/123475735)

* [SAP UI5 應用開發教程之五十一 - 如何使用 Chrome 除錯執行在手機上的 SAP UI5 Cordova 混合應用](https://jerry.blog.csdn.net/article/details/123489082) - 如果一個 SAP UI5 應用使用了 `sap.ndc.BarcodeScanner`，並且透過 `Cordova` 構建打包，生成 apk 檔案安裝到安卓手機上。在手機上執行時，點選 `Scan` 按鈕，仍然不能彈出我們期望看到的手機攝像頭掃描介面。透過除錯發現，這是由於 `sap.ndc.BarcodeScanner` 的內部實現裡，首先會去檢測 `cordova.plugins.barcodeScanner` 是否可用。當且僅當我們在將 SAP UI5 應用打包成 Cordova 應用時，顯式新增 `` 這個 Cordova plugin 到專案時，`cordova.plugins.barcodeScanner` 才會被賦予正確的值。

![](https://img-blog.csdnimg.cn/img_convert/3fe0b3926d1d5f3ea42fcb6c075830f4.png)

本文餘下部分介紹如何在一個 Cordova 應用中啟用 `cordova-plugin-barcodescanner`.

實現的效果如下：

![](https://img-blog.csdnimg.cn/img_convert/eed57f8f9502263b5dc52bf28b138697.png)

選擇`僅在使用該應用時允許`即可。

我們在允許該請求之前，HelloCordova 應用在手機 `設定` 皮膚裡，在`許可權`裡顯示的是`無需許可權`：

![](https://img-blog.csdnimg.cn/img_convert/d5e6bf82d4b029af74e66996966f7a1a.png)

允許 Cordova 應用請求攝像頭的申請後，`許可權`皮膚顯示如下：

![](https://img-blog.csdnimg.cn/img_convert/d64ab37adccf2e82b21a56b068501899.png)

現在就能使用手機攝像頭，掃描條形碼了：

![](https://img-blog.csdnimg.cn/img_convert/c1718335c0709a164b82f60d988e1cd3.png)

掃描成功的介面如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/6607345085ac296e51ebabd6e23d8240.png)

詳細步驟參考這篇[文章](https://blog.csdn.net/i042416/article/details/123501147)。

如何使用 SAP UI5 的標準控制元件結合 Cordova 外掛呼叫手機攝像頭進行條形碼掃描試讀版

相關文章