这里我只记录了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, //上传的图片的本地IdisShowProgressTips: 1, //默认为1，显示进度提示success: function (resq) {let serverId = resq.serverIdif (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>