生成二维码

https://blog.csdn.net/weixin_43924228/article/details/101621089

扫描二维码

方案1：（调用第三方）
1、https://blog.csdn.net/qq_37896578/article/details/96480198
2、https://blog.csdn.net/weixin_40679578/article/details/103045305?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf
3、https://www.cnblogs.com/rrene/p/9549870.html
4、http://www.manongjc.com/detail/16-djuzfzsiefojxil.html

5、https://www.jb51.net/article/182158.htm
方案2：（调用微信官方）
1、调用微信扫码功能 ：https://blog.csdn.net/xiaozhuge_S/article/details/102546837?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param
2、https://www.jianshu.com/p/8a0c66620136【需调用后端接口，拿到返回值后调取微信 $ 换成vue写法】
3、https://www.jianshu.com/p/1346264b32b2【需调用后端接口，拿到返回值后调取微信】
4、https://blog.csdn.net/xiamoziqian/article/details/109332080

调用第三方（方法1）

<template>
  <div>
    <div class="erwm">
      <div class="scan">
        <div id="bcid">
          <div style="height:40%"></div>
          <p class="tip">...载入中...</p>
        </div>
        <footer class="footer">
          <p @click="startRecognize">11</p>
          <p @click="startScan">22</p>
          <p @click="cancelScan">33</p>
          <p @click="closeScan">44</p>
        </footer>
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import Vue from 'vue'
var scan = null;
var styles = {frameColor: "#2e5dea",scanbarColor: "#2e5dea",};//边框属性，中间线属性，背景色
var filter;//扫码格式 空为全类型
export default {
  name: 'erwm',
  components: {
 
  },
  data() {
    return {
      codeUrl: '',
      isShow:true
    }
  },

 created () {
进入页面就调取扫一扫

this.startRecognize();

 this.startScan();

 alert('创建');

 },

  mounted(){
    this.startRecognize();
    this.startScan();
    // this.isShow = true;
  },

 updated(){
this.startRecognize();

 this.startScan();

 this.isShow = true;

 alert('更新');

 },

// destroyed(){
// console.log('aaa');

}

 ,

  methods: {
  创建扫描控件
    startRecognize() {

      let that = this;
      if (!window.plus) return;
      scan = new plus.barcode.Barcode('bcid',filter,styles);
      console.log(scan)
      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);
      }

      that.startScan();

    },

    //开始扫描
    startScan() {
      if (!window.plus) return;
      scan.start();
    },

    //关闭扫描
    cancelScan() {
      if (!window.plus) return;
      scan.cancel();
    },

    //关闭条码识别控件
    closeScan() {
      if (!window.plus) return;
      scan.close();
    },

    goback() { // 返回
      this.closeScan()
      this.$router.push({ path: '/Transferoptions' });
      // this.isShow = false;
    }
  }
}

</script>

<style lang="less" scoped>

.scan {
  height: 100%;
  #bcid {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom:0;
    text-align: center;
    color: red;
    background: #fff;
  }
  footer {
    position: absolute;
    left: 0;
    bottom: 1rem;
    height: 2rem;
    line-height: 2rem;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }
}

</style>

调用第三方（方法2 ---- 亲测好用）

<template>
  <div>   
    <div title="扫码" class="topbar">     
      <router-link to="/home" slot="left" 
        @click.native='cancelScan' 
        class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
      </router-link>  
    </div>
    <div class="mui-content">
      <div class="scan">
        <div id="bcid">
        <div class="content"></div>
          <p class="tip">...载入中...</p>
        </div>
        <div class="footer">
          <button type="primary" @click="startScan" v-show="isShow">点击扫描</button>
          <button type="primary" @click="cancelScan">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
  let scan = null;
  //点手机虚拟返回键
  document. addEventListener( "plusready",  function() {
    // 注册返回按键事件
    plus.key.addEventListener('backbutton', function() {
      // 事件处理
      scan.close();
      //关闭条码识别控件
      window.history.
      back();
    }, false);
  });
 
  export default{

    data(){
      return{
        codeUrl: '',
        isShow:true
      }
    },

    components:{
      // topbar
    },
  
    mounted () {
      this.startScan()//进入页面就调取扫一扫
    },
    created(){
      this.startRecognize();
      this.startScan();
    },
  
    methods: {
      //创建扫描控件
      startRecognize() {
        let that = this;
        if (!window.plus) 
        return;
        that.isShow=false;
        // 创建条码扫描识别控件
        scan = new plus.barcode.Barcode('bcid');
        // 条码识别成功
        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);
          scan.cancel();
          //关闭扫描
          scan.close();
          //关闭条码识别控件
          if(that.codeUrl){
            that.isShow=true
          }
        }

      },
      //开始扫描
      startScan() {
        if (!window.plus)
        return;
        this.startRecognize()
        //创建控件
        scan.start();
      },
      cancelScan(){
        this.isShow = true;
        scan.cancel();
        //关闭扫描
        scan.close();
        //关闭条码识别控件
      }

    }
  };
</script>

<style scoped lang='less'>
 .mui-content{
   padding: 44px 0 60px 0; /*px*/
   box-sizing: 
   border-box;
   margin-top: 60px; /*px*/
 }
 .scan {
   height: 100%;
 }
 .scan #bcid {
   width: 100%;
   position: absolute;
   left: 0;
   right: 0;
   top:50px;/*px*/
   bottom:3rem;
   text-align: center;
   color: #fff;
   background: #ccc
 }
 .scan .footer {
   position:absolute;
   left: 50%;
   transform: translate(-50%);
   bottom: 10px;
   width: 100%;
   height: 30px;
   z-index: 2;
   display: flex;
   justify-content: center;
 }

 .scan footer button{
   width: 45%;
   font-size: 30px;/*px*/
 }
 .clickBtn,.cancelBtn{
   margin-top:20px;/*px*/
   width: 150px;/*px*/
   height: 60px;/*px*/
   text-align: 
   center;;
 }
 .cancelBtn{
   margin-left:20px;/*px*/
 }
</style>