二維碼掃瞄與產生(APP)
# FastWeb之二維碼掃瞄(APP)
- 適用平臺：APP(移動端)
# 1. 說明
採用條碼掃瞄控制元件，通過相機來對二維碼進行掃瞄識別。
通過本範例學習，可以掌握UgBarCodeScanner的使用方法。
# 2. 設計明細
開啟FastWeb設計器，在[模組列表(APP)]中新建模組進行設計，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。
①：TUgBarCodeScanner元件，控制元件名稱為UgBarCodeScanner01。
②：TUgAppSelect元件，控制元件名稱為UgAppSelect01。
③：TUgAppButton元件，控制元件名稱為UgAppButton01。
④：TUgAppButton元件，控制元件名稱為UgAppButton02。
⑤：TUgAppMemo元件，控制元件名稱為UgAppMemo01。
UgAppRunFrame屬性設定
Height：設定頁面高度=480。Width：設定頁面寬度=320。
③UgAppButton01屬性設定
Caption：設定按鈕上顯示的文字=打開相機。
④UgAppButton02屬性設定
Caption：設定按鈕上顯示的文字=關閉相機。
# 3. 程式設計
# 3.1. 程式初始設定
該程式無程式初始設定。
# 3.2. 事件設定
- ①UgBarCodeScanner01-OnCamerasFound事件
當控制元件查詢到可用的相機時，將相機加入相機選擇的列表中。
procedure UgBarcodeScanner01onCamerasFound(sender: tobject);
Var
i:Integer;
begin
UgAppSelect01.Items.Clear;
UgAppSelect01.Items := UgBarcodeScanner01.CameraList;
if UgAppSelect01.Items.Count>0 then
UgAppSelect01.ItemIndex:=0;
end;
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- ①UgBarCodeScanner01-OnResult事件
當控制元件獲取到識別的結果時輸出結果。
UgAppMemo01.Lines.Add(Result);
1
- ③UgAppButton01-OnClick事件
當點選[打開相機]按鈕時，選擇的相機會被打開。
if UgAppSelect01.Items.Count>0 then
begin
UgBarcodeScanner01.Decode(UgAppSelect01.Items.ValueFromIndex[UgAppSelect01.ItemIndex]);
end;
1
2
3
4
2
3
4
- ④UgAppButton02-OnClick事件
當點選[關閉相機]按鈕時，選擇的相機會被關閉。
procedure UgAppButton02OnClick(sender: tobject);
begin
UgBarcodeScanner01.Stop;
end;
1
2
3
4
2
3
4
# 4. 運行結果
使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。
首先選擇使用的相機，選擇完成後點選[打開相機]按鈕，相機打開，對準要掃瞄的二維碼，下方的文字框中顯示識別的結果。點選[關閉相機]關閉預覽影像界面的顯示。