使用hBuilder打包成app扫一扫

最新推荐文章于 2024-04-22 09:22:17 发布

原创最新推荐文章于 2024-04-22 09:22:17 发布

· 685 阅读

0 ·

版权

文章标签：

#使用hBuilder打包成app扫一扫

参考地址：
https://www.cnblogs.com/huanhuan55/p/11541683.html
https://www.cnblogs.com/e0yu/p/7843505.html
https://blog.youkuaiyun.com/qq_39816586/article/details/90700002
http://blog.sina.com.cn/s/blog_60b5e13e0102xnse.html
https://blog.youkuaiyun.com/qq_35844177/article/details/78951825
http://www.html5plus.org/doc/zh_cn/barcode.html
参考Demo:https://blog.youkuaiyun.com/qq_37896578/article/details/96480198
项目代码：

<template>
  <div class="scan">
    <div @click="sao">扫一扫</div>
    <!-- <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="startCanOne" @click="ben">识别本地</button> -->
    <div id="bcid">
    </div>
  </div>
</template>

<script>
  let scan = null
  let filters=null
  let styles = {frameColor: "#0f0",scanbarColor: "#0f0"};//边框属性，中间线属性，背景色
  export default {
    data () {
      return {
        codeUrl: '',
      }
    },
    methods: {
      sao(){
        $('#bcid').css({'display':'block'});
          let that=this
          that.startRecognize ()
          that.startScan ()
      },
      // 创建扫描控件
      startRecognize () { 
        let that = this
        if (!window.plus) return
        scan = new plus.barcode.Barcode('bcid',filters,styles)
        scan.onmarked = onmarked
        function onmarked (type, result, file) {
          switch (type) {
            case plus.barcode.QR:
              type = 'QR'
              break
            case plus.barcode.EAN13:
              type = 'EAN13'
              break
            case plus.barcode.EAN8:
              type = 'EAN8'
              break
            default:
              type = '其它' + type
              break
          }
          result = result.replace(/\n/g, '')
          that.codeUrl = result
          alert(result)
          if(result=='我是冯昭'){
//             window.location.href="http://www.baidu.com"
            that.closeScan();
            $('#bcid').css({'display':'none'});
          }else{
//             window.location.href="https://www.51zxw.net/"
            that.closeScan();
            $('#bcid').css({'display':'none'});
          }
        }
      },
      // 开始扫描
      startScan () {
        if (!window.plus) return
        scan.start()
      },
      // 关闭扫描
      cancelScan () {
        if (!window.plus) return
        scan.cancel()
      },
      // 关闭条码识别控件
      closeScan () {
        if (!window.plus) return
        scan.close()
      },
    }
  }
</script>

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

<style lang="less">
  .scan {
    height: 100%;
    #bcid {
      width: 100%;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      height: 100%;
      text-align: center;
      color: #fff;
      background-color: black;
      display: none;
    }
  }
</style>

hBuilder如何使用，上面的参考地址有