vue项目中,调用微信公众号 js-sdk 选择或者拍照,上传图片
1 安装依赖:yarn add weixin-js-sdk
2 引入依赖:
import wx from 'wexin-js-sdk'
3.使用
jssdk需要签名权限, 这个权限是由后台提供的,前端要把签名权限注入到wx.config中:
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
1.将当前界面的url 传给后端
2.后端返回微信认证需要的参数
3.jsApiList
4.例子中用到的是 "chooseImage", "uploadImage" 两个sdk;
业务场景是: 先从手机上选择照片 ,然后上传找到到微信服务(微信服务会返回上传成功的图片serverId ,前端将serviceId给后台,后台从微信多媒体接口下载图片到自己的服务器,此处获得的 serverId 即media_id)
methods: {
useCamera() {
getWxParam({
url: window.location.href.split("#")[0]
}).then(res => {
res = res.data;
if (res && res.code === 0) {
const { appId, timestamp, nonceStr, signature } = res.data;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId, // 必填,公众号的唯一标识
timestamp, // 必填,生成签名的时间戳
nonceStr, // 必填,生成签名的随机串
signature, // 必填,签名
jsApiList: ["chooseImage", "uploadImage"] // 必填,需要使用的JS接口列表
});
this.useWxCamera(); // 调用wx sdk
}
})
},
useWxCamera() {
const that = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ["album", "camera"], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
wx.uploadImage({
localId: `${localIds}`, // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function(res) {
var serverId = res.serverId; // 返回图片的服务器端ID
this.loadingFlag = true; // 加载中
// idCardOcr 是调接口方法 这里的业务是上传图片之后,后台识别身份证号,再传给前端
idCardOcr(serverId)
.then(res => {
res = res.data;
that.loadingFlag = false;
if (res && res.code === 0) {
const { idCard , name } = res
that.idCard = idCard ;
that.name = name;
} else {
Toast(res.message || "系统异常,请重试");
}
})
.catch(res => {
that.loadingFlag = false;
});
}
});
}
});
}
}