最近在做鴻蒙應(yīng)用開(kāi)發(fā)，業(yè)務(wù)中需要實(shí)現(xiàn)掃碼功能，踩了不少坑，也積累了一些經(jīng)驗(yàn)，今天就來(lái)和大家分享一下鴻蒙 Next 應(yīng)用掃碼功能的開(kāi)發(fā)全流程，從環(huán)境搭建到代碼實(shí)現(xiàn)，再到技術(shù)思考和拓展，希望能給正在做鴻蒙開(kāi)發(fā)的小伙伴一些幫助。

一、鴻蒙掃碼能力概述

在開(kāi)始開(kāi)發(fā)之前，先了解一下鴻蒙系統(tǒng)提供的掃碼能力。官方提供了scanBarcode模塊，它適用于 Phone 和 Tablet 設(shè)備，起始版本為 4.0.0 (10) 。
這個(gè)模塊主要通過(guò)startScanForResult接口來(lái)實(shí)現(xiàn)掃碼功能，同時(shí)還提供了豐富的參數(shù)配置和結(jié)果返回類型，方便我們根據(jù)業(yè)務(wù)需求進(jìn)行定制化開(kāi)發(fā)。

在使用之前，需要通過(guò)import { scanBarcode } from '@kit.ScanKit';導(dǎo)入掃碼模塊。這里涉及到幾個(gè)關(guān)鍵類型定義：

• ScanResult：掃碼結(jié)果，包含碼類型scanType、識(shí)別內(nèi)容originalValue，從 4.1.0 (11) 版本起還可能包含碼識(shí)別位置信息scanCodeRect以及從 5.0.0 (12) 版本起 QR Code 四個(gè)角點(diǎn)位置信息cornerPoints。
• ScanCodeRect：表示碼的位置信息，包含外接矩形左上角和右下角坐標(biāo)。默認(rèn)掃碼接口不返回該信息。
• Point：用于表示點(diǎn)坐標(biāo)，坐標(biāo)系以左上角為 {0，0}。
• ScanOptions：掃碼、識(shí)碼參數(shù)，可設(shè)置掃碼類型scanTypes（默認(rèn)掃碼 ALL 全部碼類型）、是否開(kāi)啟多碼識(shí)別enableMultiMode（默認(rèn) false 單碼識(shí)別）、是否開(kāi)啟相冊(cè)掃碼enableAlbum（默認(rèn) true，且相冊(cè)識(shí)碼只支持單碼識(shí)別）。

二、開(kāi)發(fā)環(huán)境準(zhǔn)備

1 開(kāi)發(fā)工具安裝

首先，確保已經(jīng)安裝好鴻蒙開(kāi)發(fā)套件 DevEco Studio。如果還沒(méi)安裝，可以去華為開(kāi)發(fā)者官網(wǎng)下載對(duì)應(yīng)系統(tǒng)版本的安裝包，按照安裝向?qū)б徊讲酵瓿砂惭b。安裝完成后，打開(kāi) DevEco Studio，檢查 SDK 是否已經(jīng)下載完整，如果沒(méi)有，在設(shè)置中選擇合適的 SDK 版本進(jìn)行下載。

2 設(shè)備連接與調(diào)試

開(kāi)發(fā)過(guò)程中，需要真機(jī)調(diào)試來(lái)確保功能正常。用數(shù)據(jù)線將手機(jī)連接到電腦，打開(kāi)手機(jī)的開(kāi)發(fā)者模式（一般在設(shè)置 - 關(guān)于手機(jī)中連續(xù)點(diǎn)擊版本號(hào)開(kāi)啟），然后在設(shè)置 - 系統(tǒng)和更新 - 開(kāi)發(fā)人員選項(xiàng)中開(kāi)啟 USB 調(diào)試和鴻蒙設(shè)備連接。在 DevEco Studio 中，點(diǎn)擊工具欄的運(yùn)行按鈕，選擇連接的手機(jī)設(shè)備，就可以將應(yīng)用安裝到手機(jī)上進(jìn)行調(diào)試了。

三、掃碼功能代碼實(shí)現(xiàn)

1 添加權(quán)限

在config.json文件中添加掃碼所需的權(quán)限，因?yàn)閽叽a需要使用相機(jī)，所以要添加相機(jī)權(quán)限。權(quán)限聲明如下：

{
    "reqPermissions": [
        {
            "name": "ohos.permission.CAMERA"
        }
    ]
}

這里要注意，如果沒(méi)有添加權(quán)限，應(yīng)用在調(diào)用掃碼功能時(shí)會(huì)報(bào)錯(cuò)，無(wú)法正常使用相機(jī)。

2 編寫(xiě)掃碼代碼

1 使用 Promise 方式獲取掃碼結(jié)果

import { scanBarcode, scanCore } from '@kit.ScanKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';

// 定義掃碼參數(shù)options
// 設(shè)置掃碼類型為全部碼類型，開(kāi)啟多碼識(shí)別和相冊(cè)掃碼功能
let options: scanBarcode.ScanOptions = { scanTypes: [scanCore.ScanType.ALL], enableMultiMode: true, enableAlbum: true };
try {
    // 調(diào)用掃碼接口，使用Promise方式獲取掃碼結(jié)果
    scanBarcode.startScanForResult(getContext(this), options).then((result: scanBarcode.ScanResult) => {
        // 掃碼成功，打印掃碼結(jié)果
        hilog.info(0x0001, 
            `結(jié)果為 ${JSON.stringify(result)}`);
    }).catch((error: BusinessError) => {
        // 掃碼失敗，打印錯(cuò)誤信息
        hilog.error(0x0001, 
            `錯(cuò)誤碼: ${error.code}, 錯(cuò)誤信息: ${error.message}`);
    });
} catch (error) {
    // 調(diào)用掃碼接口出錯(cuò)，打印錯(cuò)誤信息
    hilog.error(0x0001, `啟動(dòng)掃碼失敗。錯(cuò)誤碼: ${error.code}, 錯(cuò)誤信息: ${error.message}`);
}

2 使用 Callback 方式獲取掃碼結(jié)果

import { scanBarcode } from '@kit.ScanKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';

try {
    // 調(diào)用掃碼接口，使用Callback方式獲取掃碼結(jié)果
    scanBarcode.startScanForResult(getContext(this), (error: BusinessError, result: scanBarcode.ScanResult) => {
        if (error) {
            // 掃碼失敗，打印錯(cuò)誤信息
            hilog.error(0x0001,`錯(cuò)誤碼: ${error.code}, 錯(cuò)誤信息: ${error.message}`);
            return;
        }
        // 掃碼成功，打印掃碼結(jié)果
        hilog.info(0x0001, `結(jié)果為 ${JSON.stringify(result)}`);
    });
} catch (error) {
    // 調(diào)用掃碼接口出錯(cuò)，打印錯(cuò)誤信息
    hilog.error(0x0001,`啟動(dòng)掃碼失敗。錯(cuò)誤碼: ${error.code}, 錯(cuò)誤信息: ${error.message}`);
}

3 界面展示

在應(yīng)用界面上添加一個(gè)按鈕，點(diǎn)擊按鈕觸發(fā)掃碼操作。使用 ArkTS 的聲明式 UI 語(yǔ)法來(lái)實(shí)現(xiàn)：

@Entry
@Component
struct Index {
    build() {
        Column() {
            Button('開(kāi)始掃碼')
              .onClick(() => {
                    // 這里調(diào)用上面編寫(xiě)的掃碼代碼
                })
        }
      .width('100%')
      .height('100%')
    }
}

這樣，一個(gè)簡(jiǎn)單的掃碼功能就實(shí)現(xiàn)了。運(yùn)行應(yīng)用，點(diǎn)擊按鈕就可以打開(kāi)掃碼界面進(jìn)行掃碼操作了。

四、技術(shù)思考與踩坑經(jīng)驗(yàn)

1 兼容性與版本管理

在開(kāi)發(fā)過(guò)程中，一定要注意鴻蒙系統(tǒng)版本對(duì)掃碼功能接口的影響。比如startScan接口從 4.1.0 (11) 版本開(kāi)始就被廢棄了，官方推薦使用startScanForResult接口。我一開(kāi)始沒(méi)注意到這個(gè)變化，還用舊接口開(kāi)發(fā)，結(jié)果在新系統(tǒng)上測(cè)試時(shí)一直報(bào)錯(cuò)，浪費(fèi)了不少時(shí)間排查問(wèn)題。所以在開(kāi)發(fā)前，一定要仔細(xì)查看官方文檔，確認(rèn)好接口的使用版本范圍。

2 錯(cuò)誤處理機(jī)制

掃碼過(guò)程中會(huì)遇到各種各樣的錯(cuò)誤，比如參數(shù)錯(cuò)誤、內(nèi)部錯(cuò)誤、用戶取消掃碼等。一定要在代碼中做好錯(cuò)誤處理，不然用戶使用時(shí)遇到錯(cuò)誤，應(yīng)用直接崩潰或者報(bào)錯(cuò)，體驗(yàn)就非常差。我在開(kāi)發(fā)時(shí)，就遇到過(guò)用戶取消掃碼后應(yīng)用報(bào)錯(cuò)的情況，后來(lái)在catch語(yǔ)句中對(duì)不同的錯(cuò)誤碼進(jìn)行了判斷處理，當(dāng)用戶取消掃碼時(shí)，給用戶一個(gè)友好的提示，問(wèn)題就解決了。

3 性能優(yōu)化

在多碼識(shí)別和相冊(cè)掃碼場(chǎng)景下，性能可能會(huì)受到影響。我嘗試過(guò)在掃碼前對(duì)圖片進(jìn)行預(yù)處理，比如縮小圖片尺寸，發(fā)現(xiàn)掃碼速度有了明顯提升。另外，合理設(shè)置掃碼類型也很重要，如果業(yè)務(wù)只需要識(shí)別二維碼，就不要設(shè)置成識(shí)別全部碼類型，這樣可以減少不必要的計(jì)算，提高識(shí)別效率。

五、技術(shù)拓展

1 自定義掃碼界面

鴻蒙系統(tǒng)雖然提供了默認(rèn)的掃碼界面，但有時(shí)候我們可能需要更個(gè)性化的界面設(shè)計(jì)。這時(shí)候就可以嘗試自定義掃碼界面，通過(guò)customScan模塊能力實(shí)現(xiàn)自定義界面掃碼。不過(guò)這部分開(kāi)發(fā)難度相對(duì)較大，需要對(duì)鴻蒙系統(tǒng)的相機(jī)開(kāi)發(fā)有一定的了解，可以花點(diǎn)時(shí)間對(duì)照文檔一步步實(shí)現(xiàn)。

2 結(jié)合其他功能

掃碼功能可以和很多業(yè)務(wù)功能結(jié)合起來(lái)，比如在電商應(yīng)用中，掃碼獲取商品信息，直接跳轉(zhuǎn)到商品詳情頁(yè)；在支付應(yīng)用中，掃碼完成支付操作。我之前做過(guò)一個(gè)活動(dòng)報(bào)名的應(yīng)用，用戶掃碼活動(dòng)二維碼就可以直接進(jìn)入報(bào)名頁(yè)面，大大提高了用戶的參與效率。

3 掃碼結(jié)果解析與處理

掃碼得到的結(jié)果格式多種多樣，可能是 URL、文本、特定編碼等。我們可以根據(jù)不同的業(yè)務(wù)需求，對(duì)掃碼結(jié)果進(jìn)行解析和處理。比如識(shí)別出 URL 后，在應(yīng)用內(nèi)的 WebView 中打開(kāi)鏈接；識(shí)別出文本信息后，提取關(guān)鍵內(nèi)容進(jìn)行分析。

以上就是我在鴻蒙 Next 應(yīng)用掃碼功能開(kāi)發(fā)過(guò)程中的一些經(jīng)驗(yàn)分享，希望對(duì)大家有所幫助。如果在開(kāi)發(fā)過(guò)程中遇到什么問(wèn)題，歡迎在評(píng)論區(qū)交流討論，我們一起學(xué)習(xí)進(jìn)步！