vue+vant 扫码（jssdk）

效果：

第一步：

后台配置js接口安全域名
域名规则：例:https://admin.serve.com.cn；填写：serve.com.cn；
微信jssdk config:invalid signature 签名错误 ,就是域名没配置好；

没了

代码：

//安装jssdk yarn add weixin-js-sdk
<template>
  <div class="ScanQRCode w100">
    <van-button type="primary" class="submits posFix" @click="qrCode">扫一扫</van-button>
  </div>
</template>

<script>
import Vue from "vue";
import { Button ,Toast ,Dialog } from "vant";
import axios from "axios";
import wx from 'weixin-js-sdk'

const arr = [ Button ,Toast];
arr.map(e => {
  //动态生成组件
  Vue.use(e);
});

export default {
  data() {
    return {
      
    };
  },
  name: "ScanQRCode",
  created() {
    this.getConfig()
  },
  methods: {
    getConfig(){ //1.获取config参数
      //window.location.href在Android上扫码正常，Ios签名失败；换成(window.location.href).split('#')[0]
      const url = (window.location.href).split('#')[0] //window.location.href
      axios.get(this.$my.api+'/base/wechat/getJSTicket?url=' + encodeURIComponent(url))
        .then(res => {
          if(res.data&&res.data.code == 200){
            console.log(res.data.data)
            let data = res.data.data
            wx.config({
            	beta: true,
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appid, // 必填，公众号的唯一标识
                timestamp:data.timestamp , // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名
                jsApiList: ['checkJsApi','scanQRCode'] // 必填，需要使用的JS接口列表
            });
            wx.ready(function(){
                console.log('成功')
            });
            wx.error(function(err){
              console.log(err)
            });
          }else{
            Toast(res.data.message)
          }
        }, response => {
            console.log("error");
        })
    },
    checkJsApi(api){//检测api是否可用
      return new Promise((rel,err)=>{
        wx.checkJsApi({
            jsApiList: [api], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function(res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
              if(res.checkResult&&res.checkResult.chooseImage == false){
                Toast('微信版本较低，请升级后重试！')
                err('版本低')
              }else{
                rel(true)
              }
            }
        });
      })
    },
    qrCode(){ //扫码
     this.checkJsApi('scanQRCode').then((rel)=>{
        if(rel){
          wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
              let result = res.resultStr.split(',')[1]; // 当needResult 为 1 时，扫码返回的结果
              this.submit(result)
            }
          });
        }
      })
    },
    submit(num){//扫码成功后调用
      axios.get(this.$my.api+'/base/express/checkExpress?number='+ num)
        .then(res => {
          if(res.data&&res.data.code == 200){
            console.log(res.data.data)
            Dialog.confirm({
              title: '扫码结果',
              message: `EMS结果：${res.data.data.EmsExpress}
录入结果：${res.data.data.Express}`,
              messageAlign:'left',
              cancelButtonText:'关闭',
              confirmButtonText:'继续扫码'
            }).then(() => {
              // on confirm
              this.qrCode()
            }).catch(() => {
              // on cancel
            });
          }else{
            Toast(res.data.message)
          }
        }, response => {
            console.log("error");
        })
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ScanQRCode{
  background:url('../assets/images/logo.jpg') no-repeat center center;
  height: 100%;

}
.submits{width: calc(100% - .4rem); bottom:.2rem;left:.2rem;}

</style>