因为开发排期短，项目要使用hybrid-native开发。第一版使用flutter+webview实现，结果在真机测试时切换路由严重闪屏，根本无法使用。第二版使用uniapp+webview实现，虽然踩了很多坑，但整体功能都可以实现。这篇mark一下h5+调起原生扫码的实现。

需要注意的问题

• 相机遮罩阻止滚动冒泡，防止相机层跟随滚动 @touchmove.prevent
• 在SPA应用中，离开当前路由时应销毁扫码组件实例
• 在销毁前应判断是否存在相机实例，否则控制台报错

一些疑问

• 实例生成后必须销毁才能再次调起
• 相机的定位属性设置不生效
• uniapp与webview通信失败

code view

<template>
  <!-- 相机遮罩 -->
  <div class="qrcoderead-cover" v-if="qrcoderead_visible" @touchmove.prevent @click="closeqrcoderead">
    <div class="header-cover">
      <i class="iconfont iconfanhui btn-back" @click="closeqrcoderead"></i>
      <div class="title">掃描二維碼</div>
    </div>
  </div>
</template>

<script>
let barcode = null // 扫码实例
data() {
  return {
    qrcoderead_visible: false, // 扫码组件
  }
},
beforeDestroy() {
  // 在路由跳转时关闭扫码组件
  this.closeqrcoderead()
},
methods: {
  // 调起原生扫码
  openQrcodeRead() {
    // 创建Barcode扫码控件
    this.qrcoderead_visible = true
    if (!barcode) {
      barcode = plus.barcode.create("barcode", [plus.barcode.QR], {
        top: "100px",
        left: "0px",
        width: "100%",
        height: "500px",
        position: "static"
      })
      barcode.onmarked = (type, result) => {
        let text = "未知: "
        switch (type) {
          case plus.barcode.QR:
            text = "QR: "
            break
          case plus.barcode.EAN13:
            text = "EAN13: "
            break
          case plus.barcode.EAN8:
            text = "EAN8: "
            break
        }
        // alert(text + result)
        this.account = result
        this.qrcoderead_visible = false
        this.closeqrcoderead()
      }
      plus.webview.currentWebview().append(barcode)
    }
    barcode.start()
  },
  // 关闭扫码组件
  closeqrcoderead() {
    if (barcode == null) return // 如果没有生成实例，关闭时直接
    barcode.close()
    barcode = null
    this.qrcoderead_visible = false
  }
}
</script>

小结

希望flutter生态越来越好，希望uniapp的再接再厉