Vue3 网页调用微信扫一扫 -小记

网页开发调用扫一扫

前言：微信内打开网页链接，调用微信扫一扫功能

1.引入第三方 weixin-js-sdk

npm install weixin-js-sdk -S

附 vue代码：

<script lang="ts" setup>
import { onMounted,ref } from 'vue'
import { queryWxConfig, queryMsg } from "@/api/scanCode" //我自己请求的后台接口 获取 wx.config 配置
import wx from 'weixin-js-sdk';
const wxConfig = ref({
  appId: '',
  timestamp: 0,
  nonceStr: '',
  signature: '',
});


// 初始化微信 JS-SDK
function initWechatSDK() {
  let url = location.href.split("#")[0];
  queryWxConfig(url).then((data)=>{
    wxConfig.value.appId = data.data.result.appId;
    wxConfig.value.timestamp = data.data.result.timestamp;
    wxConfig.value.nonceStr = data.data.result.nonceStr;
    wxConfig.value.signature = data.data.result.signature;
  });
  
}


// 调用微信扫一扫接口
function scanQRCode() {
  console.log("扫一扫");
  wx.config({
    debug: false,
    appId: wxConfig.value.appId,
    timestamp: wxConfig.value.timestamp,
    nonceStr: wxConfig.value.nonceStr,
    signature: wxConfig.value.signature,
    jsApiList: ['scanQRCode'] // 需要使用的微信接口
  });

  wx.error(function (res) {
    console.log(res.errMsg)
    console.log('微信config配置失败res', res)
  })
   
    wx.scanQRCode({
      needResult: 1,
      scanType: ['qrCode'],
      success: function (res) {
        var result = res.resultStr; // 获取扫码结果
        // 处理扫码结果
        //.......
      }
    });
 
}
onMounted(() => {
  initWechatSDK();
});
</script>