H5端实现扫一扫功能

要实现H5端扫一扫的功能前提必须是https协议才可。

以下代码是vue3写法。

废话不多说：

首先点击扫一扫进入到扫一扫的页面 如：scan.vue

完整代码如下copy即可使用：

<template>
  <div class="scan">
    <div class="reader-box">
      <div class="reader"
           id="reader"></div>
      <div class="area flex_placeholder">
        <div class="scanArea_prompt">将二维码/条码放入框内，即可自动扫描</div>
      </div>
    </div>
    <footer class="flex_box footer_box">
      <div class="footer_body">
        <svg t="1650876409672"
             class="icon"
             viewBox="0 0 1024 1024"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="2058">
          <path d="M213.333333 213.333333v128H128V128h213.333333v85.333333h-128z m0 597.333334h128v85.333333H128V682.666667h85.333333v128z m597.333334-597.333334h-128V128h213.333333v213.333333h-85.333333v-128z m0 597.333334v-128h85.333333v213.333333H682.666667v-85.333333h128zM128 469.333333h768v85.333334H128v-85.333334z"
                :fill="appTheme"
                p-id="2059"></path>
        </svg>
        <div :style="'margin-top:0.03rem;font-size:14px;color:' + appTheme"
             @click="scanClick">扫码</div>
      </div>
    </footer>
  </div>
</template>
<script>
import { Html5Qrcode } from 'html5-qrcode'
import { useRouter} from 'vue-router'
import { inject, reactive, toRefs, onMounted } from 'vue'
import { Dialog, Toast } from 'vant'
export default {
  name: 'scan',
  components: {
    Html5Qrcode,
    [Dialog.Component.name]: Dialog.Component,
  },
  setup () {
    const router = useRouter()
    const $api = inject('$api')
    const dayjs = require('dayjs')
    const data = reactive({
      html5Qrcode: null
    })
    onMounted(() => {
       startScans()
    })
    const scanClick = () => {
     startScans()
    }
    const startScans = () => {
      Html5Qrcode.getCameras().then(devices => {
        if (devices && devices.length) {
          data.html5Qrcode = new Html5Qrcode('reader')
          data.html5Qrcode.start({
            facingMode: 'environment'
          }, {
            fps: 24,
            qrbox: 280
          }, async (decodeText, decodeResult) => {
            if (decodeText) {
              var params = decodeText.split('|')
              switch (params[1]) {
                case 'activitySignIn':
                case 'meetingSignIn':
                  var id = params[2]
                  if (params[1] === 'meetingSignIn') {
                    try {
                      const res = await $api.conferenceActivitiesFile.conferenceAddMySignIn({
                        activityId: id,
                        conferenceId: id,
                        signInType: 'qrCode',
                        userId: data.user.id,
                        remarks: 'wx',
                        dataId: id,
                        type: '1'
                      })
                      if (!res) {
                        Toast('请检查网络!')
                        return
                      }
                      if (res) {
                        var code = res.errcode || 0
                        if (code === 200) {
                          Dialog.alert({
                            title: '提示',
                            message: '签到成功',
                            confirmButtonText: '我知道了'
                          }).then(async () => {
                            setTimeout(() => {
                              router.go(-1)
                            }, 1000)
                          }).catch(() => {
                            // on cancel
                          })
                        }
                      }
                    } catch (error) {
                      Dialog.alert({
                        title: '提示',
                        message: error.data.errmsg || error.data.data,
                        confirmButtonText: '我知道了'
                      }).then(async () => {
                        setTimeout(() => {
                          router.go(-1)
                        }, 1000)
                      }).catch(() => {
                        // on cancel
                      })
                      return
                    }
                  } else if (params[1] === 'activitySignIn') {
                    try {
                      const res = await $api.conferenceActivitiesFile.activityaddMySignIn({
                        activityId: id,
                        conferenceId: id,
                        signInType: 'qrCode',
                        userId: data.user.id,
                        dataId: id,
                        type: 'signIn'
                      })
                      if (!res) {
                        Toast('请检查网络!')
                        return
                      }
                      if (res) {
                        var code1 = res.errcode || 0
                        if (code1 === 200) {
                          Dialog.alert({
                            title: '提示',
                            message: res.errmsg || res.data,
                            confirmButtonText: '我知道了'
                          }).then(async () => {
                            setTimeout(() => {
                              router.go(-1)
                            }, 1000)
                          }).catch(() => {
                            // on cancel
                          })
                        }
                      }
                    } catch (error) {
                      Dialog.alert({
                        title: '提示',
                        message: error.data.errmsg || error.data.data,
                        confirmButtonText: '我知道了'
                      }).then(async () => {
                        setTimeout(() => {
                          router.go(-1)
                        }, 1000)
                      }).catch(() => {
                        // on cancel
                      })
                      return
                    }
                  }
                  break
                default:
                  break
              }
              stopScan()
            }
          }, (err) => {
            console.log('err', err)
          })
        }
      })
    }
    const stopScan = () => {
      data.html5Qrcode.stop()
      setTimeout(() => {
        router.go(-1)
      }, 1000)
    }
  }
}
</script>
<style lang="less" scoped>
.scan {
  box-sizing: border-box;
  padding-bottom: 50px;

  .container {
    height: 100%;
  }

  .reader-box {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .reader {
    width: 540rpx;
    height: 540rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .area {
    // background: rgba(0, 0, 0, 0.4);
    position: relative;
    top: 33%;
  }

  .scanArea2_2 {
    width: 2.1rem;
    position: relative;
  }

  .scanArea2_2 img {
    width: 100%;
  }

  .scanArea_prompt {
    padding-top: 20px;
    width: 100%;
    color: #bcbcbc;
    text-align: center;
  }

  .footer_box {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;

    .footer_body {
      color: #b7b7b7;
      text-align: center;
    }
  }
}
</style>