Sencha框架引入外部JS生成二维码报QRCode未定义如何解决

核心原因 #

QRCode is not defined报错的本质是执行二维码初始化逻辑时，qrcode库还未被正确加载到当前作用域，或DOM节点还未完成渲染。你之前尝试的两种加载方式失效，基本逃不出这几个场景：

• 脚本引用路径错误，实际加载了404空资源
• 脚本加载顺序错误，业务代码执行时QRCode构造函数还未挂载到全局
• ExtJS组件更新是异步逻辑，调用update()后立刻取DOM时，节点还未插入页面
• 老旧系统存在全局命名空间沙箱，库挂载的对象没有暴露到业务代码执行的作用域

分步修复 #

1. 先确认库资源加载正常 #

打开浏览器控制台执行window.QRCode，如果返回undefined说明库根本没加载成功：

• 把qrcode.min.js下载到本地项目静态资源目录，不要使用远程CDN地址
• 在index.html中把qrcode的脚本标签放到所有Ext框架、业务脚本的最前面，不要加async/defer异步加载属性，参考写法：

<script src="/static/js/qrcode.min.js"></script>
<script src="/ext/ext-all.js"></script>
<script src="/pages/business.js"></script>

• 调整后刷新页面，再次在控制台执行window.QRCode，能返回构造函数才说明加载成功。

2. 修复ExtJS组件渲染时序问题 #

原有代码在调用组件update()方法后立刻获取qrcode节点，Ext组件的模板更新是异步渲染流程，这时候DOM节点可能还没生成，且重复调用update会冲掉已经渲染好的二维码，把回调逻辑改成如下写法：

callback: function (response, success) {
    if (success) {
        this.WMSAppUrl = this.WirelessAppStore.data.items[0].data.Url;
        const labelCmp = this.lookupRFWindow.WirelessAppLabel;
        labelCmp.update({ Url: this.WMSAppUrl });

        const initQrCode = function() {
            const qrContainer = document.getElementById("qrcode");
            if (!qrContainer || !window.QRCode) return;
            qrContainer.innerHTML = '';
            new QRCode(qrContainer, {
                text: this.WMSAppUrl,
                width: 100,
                height: 100
            });
        }.bind(this);

        // 组件未渲染就等afterrender事件触发再初始化
        if (!labelCmp.rendered) {
            labelCmp.on('afterrender', initQrCode, this, { single: true });
        } else {
            // 已经渲染过直接执行
            initQrCode();
        }
    }
},

3. 全局变量隔离场景兼容 #

如果老旧系统存在JS沙箱，window上的QRCode无法被业务代码访问，有两种处理方式：

• 直接把qrcode库的源码复制到当前业务文件的顶部，和业务代码同作用域执行
• 用Ext.Loader加载时绑定加载完成回调，确认库加载成功后再弹出窗口、拉取store数据：

Ext.Loader.loadScript({
    url: '/static/js/qrcode.min.js',
    onLoad: function() {
        // 库加载完成后再执行原有lookupRF的弹窗、数据拉取逻辑
        this.createRFLookup();
        this.lookupRFWindow.show();
        // 后续store拉取逻辑保持不变
    },
    scope: this
});

验证标准 #

1. 浏览器网络面板中qrcode.min.js请求状态为200，无404/加载失败
2. 控制台执行window.QRCode可返回构造函数，不是undefined
3. 触发弹窗、数据加载完成后，qrcode容器内可看到生成的canvas或img二维码节点

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