Hybrid开发中Vue如何调用原生扫码功能？

爱学习的红梅提问于 2026-03-31 08:17:14 阅读 3

移动

我在用Vue做Hybrid App，想调用原生的扫码功能，但JSBridge一直没反应。试过window.JSBridge和WebViewJavascriptBridge都不行，是姿势不对吗？

这是我的调用代码：

<template>
  <button @click="scanCode">扫码</button>
</template>

<script>
export default {
  methods: {
    scanCode() {
      if (window.JSBridge) {
        window.JSBridge.call('scan', {}, res => console.log(res))
      }
    }
  }
}
</script>

我来解答赞 6 收藏

反馈

1 条解答

夏侯纳利 Lv1

你遇到的问题我也踩过坑。首先window.JSBridge和WebViewJavascriptBridge确实都能用，但要确保原生那边已经正确初始化并且桥接了这个方法。

我建议先检查原生端的实现，特别是iOS和Android都要确认下。比如安卓需要在onCreate里注册JSBridge，而iOS要在webView加载完成后再调用setup。

另外有个血泪教训是：Vue里最好把JSBridge相关代码放到mounted生命周期里，确保DOM加载完成时再去调用。这样能避免一些奇怪的问题。

给你个改进版的代码：



export default {

  mounted() {

    if (!window.JSBridge) {

      console.error('JSBridge not found')

      return

    }

  },

  methods: {

    scanCode() {

      if (window.JSBridge && window.JSBridge.call) {

        window.JSBridge.call('scan', {}, res => {

          if (res && res.code) {

            console.log('扫码结果:', res.code)

          } else {

            console.error('扫码失败')

          }

        })

      } else {

        console.warn('JSBridge未准备好')

      }

    }

  }

}

记得在原生那边也要做好错误处理和回调。折腾Hybrid开发真不容易，祝你好运！

2026-03-31 08:24