vue3H5页面调用微信的扫一扫功能

jssdk文档：developers.weixin.qq.com/doc/offiacc…

前置工作

引入jssdk包

第一种：index.html页面引入

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

第二种:npm 包下载 main.js引入

npm install weixin-jsapi --save

import wx from "weixin-jsapi";

app.config.globalProperties.$wx = wx;

封装sdk初始化及扫一扫方法调用

/*
* 初始化wx sdk配置 scanQRJssdk
* */
export  const initWechatSDK  =(data)=>{
  try{
      const { appId, timestamp, nonceStr, signature } = data;
      wx.config({
          // beta: true,
          debug: false,
          appId: appId,
          timestamp: timestamp,
          nonceStr: nonceStr,
          signature: signature,
          jsApiList: ['checkJsApi', 'scanQRCode']
      });
      wx.ready(() => {
          wx.checkJsApi({
              jsApiList: ['scanQRCode'],
              success(res) {
                  console.log('aaaa', res);
              }
          });
      });
      wx.error((res) => {
          alert(`出错了：${res.errMsg}`);// 这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然     后根据微信文档查询即可。
      });
      return true
  }catch (e) {
      console.error('初始化微信SDK失败:', error)
      return false
  }
}
//调用微信扫一扫
export const scanQRCode = () => {
    return new Promise((resolve, reject) => {
        wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success(res) {
              let  timer =  setTimeout(() => {
                    const result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
                    clearTimeout(timer);
                    timer = null
                    resolve(result)
                }, 2000);
            },
            fail(err) {
                reject(err)
            }
        })
    })
}

实际调用：

<template>
<div><a-button @click="OnQRcode">扫一扫</a-button></div>
</template>
<script setup>
import {initWechatSDK, scanQRCode} from "@/utils/wxServer";
import {onMounted} from "vue";
function OnQRcode(id) {
  // 点击的时候调起扫一扫功能
  let res = scanQRCode();
  const resultStrArr = res.split(',');
  let decodedText = resultStrArr[resultStrArr.length - 1];
  console.log(decodedText)
}
const scanQRJssdk=async () => {
  const u = navigator.userAgent;
  const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // Android
  const isIOS = navigator.platform.indexOf('iPhone') != -1;//ios
  let url = '';
  if (isAndroid) {
    url = location.href;
  }
  if (isIOS) {
    url = location.href.split('#')[0]; // hash模式下,#后面的部分如果带上ios中config会不对
  }
  // const resData = await getWeiXinSdk({url}); // 根据接口返回appId，timestamp等数据
  const resData = undefined;
  console.log('获取微信配置结果', resData);
  if (resData) {
    initWechatSDK(resData);
    // alert(JSON.stringify(resData));
  }
}
onMounted(()=>{
  scanQRJssdk();
})
;
</script>
<style scoped>

</style>