vue3+vant4+微信公众号实现图片上传和扫一扫功能

这里我只记录了js的实现过程

首先先安装weixin-js-sdk

npm install weixin-js-sdk

处理JS-SDK配置，前提是已经从后端获取到了appId和openId

<script setup>
import { ref, onMounted } from "vue";
import { imageConfig } from "@/api";//后端接口
import wx from 'weixin-js-sdk'
let form = ref([])
onMounted(() => {
  getImageConfig();
});
const getImageConfig = async () => {
  //请求后端接口获取数据用于配置JS-SDK，接口参数根据后端要求有所不同，
  //注意的是url获取的是地址栏上的哈希路由地址#前面的内容，如果用的是history路由方式会有所不同
  let res = await imageConfig({
    appId: "",
    url: window.location.href.split("#")[0],
  });
  if (res.code == 200) {
    wx.config({
      debug: true, //开启调试模式，调用的所有api的返回值会在客户端alert出来
      appId: "", //必填，公众号的唯一标识
      timestamp: res.data.timestamp, //必填，时间戳
      nonceStr: res.data.nonceStr, //必填，随机串
      signature: res.data.signature, //必填，签名
      jsApiList: [
        "chooseImage",
        "uploadImage",
        "scanQRCode",
        "hideAllNonBaseMenuItem",
        "getLocalImgData",
      ], //必填，需要使用的js接口列表
    });
    wx.ready(function () {
      //config信息验证后会执行ready方法，所有接口调用必须在config接口获得结果之后，
      //config是一个客户端的异步操作，所以如果需要在页面加载时就要调用相关接口，则需把相关接口放在ready函数中调用来确保正确执行
      //对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
    });
    wx.error(function (res) {
      alert(res);
      //config信息验证失败会执行error函数，如果签名国企导致的验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
    });
  }
};
const upClick = () => {
  wx.chooseImage({
    count: 9, //默认是9.一次允许选在的图片数量
    sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //可以指定来源是相册还是相机，默认两者都有
    success: function (res) {
      let localIds = res.localIds; //返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片，但是IOS系统的不显示需要特殊处理
      let localIdsLength = localIds.localIdsLength;
      localIds = localIds.reverse(); //数组颠倒顺序
      uploadImage(localIds, localIdsLength);
    },
  });
};
//选择图片
const uploadImage = (localIds, localIdsLength) => {
  let localId = localIds[0];
  let isIOS = false;
  let localDate = null;
  if (window.__wxjs_is_wkwebview) {
    //判断是不是IOS系统
    isIOS = true;
    wx.getLocalImgDate({
      localId: localId,
      success: function (res) {
        localDate = res.localDate;
        localDate = localDate.replace("jpg", "jpeg");
      },
    });
  }
  //上传图片
  wx.uploadImage({
    localId: localId, //上传的图片的本地Id
    isShowProgressTips: 1, //默认为1，显示进度提示
    success: function (resq) {
        let serverId = resq.serverId
        if (isIOS) {
            form.value.push({imgPath:localDate,imgId:serverId})
        }else{
            form.value.push({imgPath:localId,imgId:serverId})
        }
        localIdsLength--;
        localIds.shift()
        if (localIdsLength>0) {
            uploadImage(localIds, localIdsLength);//递归，解决一次上传多张图片问题
        }
    }
  });
};
//扫一扫
const imgylsao = (index) =>{
    wx.csanQRCode({
        needResult:1,//默认为0，扫描结果由微信处理，1则直接返回扫描结果
        scanType:['qrCode','barCode'],//可以指定扫二维码还是一维码，默认两者都有
        success:function(res){
            let result = res.resultStr//当needResult为1时，扫码返回的结果
            if (result != undefined && result.split(",").length > 3) {//二维码
                form.value[index].invoiceNum = result.split(",")[3].match(/\d+/g);
            }else{
                form.value[index].invoiceNum = result.substring(result.lastIndexOf(',')+1,result.length).match(/\d+/g);
            }
        }
    })
}
</script>