sap.ndc.BarcodeScannerButton：用於啟動條碼掃描過程的按鈕控制元件（顯示條碼圖示）。 如果本機掃描功能不可用或未授予相機功能，則該按鈕要麼被隱藏，要麼透過開啟帶有輸入欄位的對話方塊來提供後備，可以在其中手動輸入條形碼。BarcodeScanner 被載入之後，執行 `init` 方法：

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

```javascript
	//	* Feature vector (sap.Settings.isFeatureEnabled) is available
	//  * Barcode scanner is enabled by the Feature Vector
	//  * Barcode scanner Cordova plug-in (cordova.plugins.barcodeScanner) or zxing-js (ZXing.BrowserMultiFormatReader) is available
```

available 屬性預設為 true：
![](https://img-blog.csdnimg.cn/img_convert/f8600fca9ebfb139b5db858963823310.png)

> native device capabilities should be by default enabled if there is no feature vector available to restrict the capability.

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

瀏覽器裡檢測不到 cordova API：
![](https://img-blog.csdnimg.cn/img_convert/20588f08f049c2c5a7d649a2f2de2e69.png)

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

然後嘗試獲取 `ZXingAPI`. 這是一個非同步過程。

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

`oZXingScannerAPI` 可用。
![](https://img-blog.csdnimg.cn/img_convert/8241c9840e439ea6285a26f532a3176d.png)

點選 barcode 按鈕之後，執行下圖第 129 行程式碼的 `scan` 方法。

如果條碼掃描功能不可用，則啟動條碼掃描過程，顯示來自攝像頭的實時輸入或顯示對話方塊以直接輸入值。

條碼掃描是非同步完成的。 當它被觸發時，該函式返回而不等待掃描過程完成。 應用程式必須提供回撥函式來對成功掃描、掃描期間的錯誤以及對話方塊上的實時輸入事件做出反應。

fnSuccess 傳遞了一個具有文字、格式和取消屬性的物件。 text 是條碼資料的文字表示，format 是檢測到的條碼型別，cancel 是使用者是否取消掃描。 fnError 給出了錯誤，fnLiveUpdate 被傳遞了在對話方塊的輸入欄位中輸入的新值。

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

只有當 CordovaScannerAPI 可用時，才進入 584 行下面的分支：

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

否則進入 618 行，彈出對話方塊。

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

SAP Fiori Client 是 SAP Fiori 應用程式的原生移動應用程式執行時容器。 SAP Fiori Client 允許使用者以線上模式訪問其 SAP Fiori 應用程式。後續我會介紹如何在 Fiori client 裡解決這個 cordova 外掛不可用的問題。

SAP UI5 BarcodeScannerButton 的初始化邏輯 - feature 檢測，Cordova API 檢測等邏輯

相關文章