如何在Angular应用加载时调用microsoftTeams.media.scanBarCode API

问题原因 #

microsoftTeams.initialize() 是异步执行的操作，你在调用初始化方法后立即触发scanBarCode时，SDK还未完成和Teams客户端的上下文绑定，相关API尚未就绪，因此不会有任何响应。而点击事件触发时距离初始化已经过了足够时间，SDK加载完成，因此可以正常调用。

修复方案 #

等待initialize执行完成后再调用扫码API即可，根据你使用的Teams JS SDK版本选择对应写法：

版本1：v2+ 支持Promise的SDK

config: microsoftTeams.media.BarCodeConfig = {
    timeOutIntervalInSec: 30,
};

constructor() {}

async ngOnInit(): Promise<void> {
    // 等待SDK初始化完成
    await microsoftTeams.initialize();
    // 初始化完成后再调用扫码API
    microsoftTeams.media.scanBarCode((error: microsoftTeams.SdkError, decodedText: string) => {
        if (error) {
            if (error.message) {
                console.log(' ErrorCode: ' + error.errorCode + error.message);
            } else {
                console.log(' ErrorCode: ' + error.errorCode);
            }
            this.message = error;
        } else if (decodedText) {
            microsoftTeams.tasks.submitTask(decodedText);
        }
    }, this.config);
}

版本2：旧版本仅支持回调的SDK

config: microsoftTeams.media.BarCodeConfig = {
    timeOutIntervalInSec: 30,
};

constructor() {}

ngOnInit(): void {
    microsoftTeams.initialize(() => {
        // 初始化完成回调内调用扫码API
        microsoftTeams.media.scanBarCode((error: microsoftTeams.SdkError, decodedText: string) => {
            if (error) {
                if (error.message) {
                    console.log(' ErrorCode: ' + error.errorCode + error.message);
                } else {
                    console.log(' ErrorCode: ' + error.errorCode);
                }
                this.message = error;
            } else if (decodedText) {
                microsoftTeams.tasks.submitTask(decodedText);
            }
        }, this.config);
    });
}

内容的提问来源于stack exchange，提问作者GMAC