uni-app 报错 this.$refs.barcode.cancel is not a function

uni-app 报错 this.$refs.barcode.cancel is not a function 产品分类： uniapp/App

属性 值
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 26.4
HBuilderX类型 正式
HBuilderX版本号 4.87
手机系统 iOS
手机系统版本号 iOS 26
手机厂商 苹果
手机机型 13
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

直接扫码

预期结果：

能正常扫码

实际结果：

云打包自定义基座运行报错，标准基座正常

bug描述：

已经获取相机权限：

uni.scanCode({
    onlyFromCamera: true,// 只从相机扫码，提升响应速度
    // scanType: 'qrCode',
    success: function(res) {
        console.log('- 扫码成功:', res)
        console.log('- 二维码内容:', res.result)
    },
    fail: function(err) {
        console.log('- 扫码失败:', err)
    },
    complete: function() {
        console.log('- 扫码完成')
    }
})

更多关于uni-app 报错 this.$refs.barcode.cancel is not a function的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 报错 this.$refs.barcode.cancel is not a function的实战教程也可以访问 https://www.itying.com/category-93-b0.html


欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

好的，我是 DCloud 的官方人员，针对您提交的这个 bug 反馈，我来进行一下评审。

  1. 反馈内容完整性评审 这个 bug 反馈整体质量不错，核心问题描述清晰，但存在一些关键信息缺失，会直接影响我们的排查效率。

BUG 标题与描述：标题和描述都准确指出了报错信息 this.$refs.barcode.cancel is not a function，并且点明了关键差异点：标准基座没问题，云打包（自定义基座）有问题。这是一个非常有价值的线索，说明问题很可能出在打包配置上，而非代码逻辑本身。

代码示例：提供的代码示例是 uni.scanCode 的调用，这是正确的。但这里有一个潜在的误导点：报错中的 this.$refs.barcode 通常是在 nvue 页面中使用 <barcode> 组件时才需要的。您在 vue 页面中调用 uni.scanCode 却引出了这个错误，这本身就是个异常现象，可能是底层引擎的错误调用。您提供的代码示例是完整的，可以直接运行，但为了更精准地定位，建议您确认一下项目中是否完全没有使用 <barcode> 组件。

复现步骤：步骤“直接扫码”过于简单。虽然结合描述“云打包自定义基座运行报错”可以理解，但我们更希望看到类似“使用 HBuilderX 4.87 正式版，进行云打包制作自定义基座，在 iOS 设备上运行并调用扫码功能”这样更精确的步骤。最关键的是，缺少了 manifest.json 中「App 模块配置」的截图或说明，这是排查此问题的核心。

预期结果与实际结果：预期结果“能正常扫码”是合理的。实际结果“云打包自定义基座运行报错，标准基座正常”清晰地指出了问题所在，这是一个有效的 bug 报告，不属于误报。

分类信息：提供的运行环境信息（Mac, HBuilderX 4.87, iOS, Vue3 等）比较完整，这点做得很好。

  1. Bug 是否成立及原因分析 这个 bug 是成立的，但根本原因很可能不是代码问题，而是打包配置问题。
    根据知识库中的信息，从 HBuilderX 3.6.11 版本开始，为了符合隐私合规要求，Barcode（扫码）模块需要手动勾选才能打包到应用中。标准基座是包含所有模块的，所以没问题；而自定义基座是根据你的 manifest.json 配置来打包的，如果没有勾选，就不会包含扫码原生模块，从而导致调用 uni.scanCode 时内部调用 this.$refs.barcode.cancel() 失败，因为相关的原生对象根本不存在。
    我找到了多个与您情况几乎完全一致的案例，官方人员都给出了相同的解决方案：

[DCloud问答_213628]：同样的报错，同样的 iOS 环境。
[DCloud问答_211620]：标准基座没问题，自定义基座报错。官方人员 DCloud_UNI_yuhe 的回复是：“在manifest中安卓模块上勾选扫码了吗？”
[DCloud问答_159893]：官方人员 DCloud_iOS_WZT 明确回复：“最新版需要勾选，之前会默认打包到基础模块，为了隐私合规需要依赖权限的模块都需要勾选才会打包”。

  1. 是否为基本概念问题 这属于一个典型的因平台打包策略变更导致的配置问题，不属于基础编程概念问题。
    解决方案与建议 请您按照以下步骤排查和解决：

检查并勾选模块：在 HBuilderX 中，打开项目的 manifest.json 文件，切换到「App 模块配置」选项卡，务必找到并勾选 Barcode（扫码）模块。同时，为了确保扫码功能正常，通常也需要勾选 Camera&Gallery（相机和相册）模块。

重新打包自定义基座：勾选模块后，您需要重新制作并运行自定义基座。旧的基座中不包含该模块，必须重新打包才能生效。

关于扫码体验的补充：官方文档也提到，uni-app 的扫码引擎识别效率相对较弱。如果您对扫码识别率和 UI 自定义有更高要求，可以考虑以下替代方案：

前往插件市场搜索功能更强大的扫码插件：https://ext.dcloud.net.cn/search?q=扫码
或者，在条件允许的情况下，升级到 uni-app x，其扫码能力有显著提升，体验更好。

建议您先按第一步检查配置，这大概率能解决您的问题。 内容为 AI 生成，仅供参考

回到顶部