基于vue框架
1、安装weixin-js-sdk
npm install weixin-js-sdk
2、引入weixin-js-sdk
import wx from 'weixin-js-sdk'
3、通过config接口注入权限验证配置
因安卓和ios在获取地址时的字段截取不一致，导致签名验证失效问题；所以在向后台传输地址时，分别对安卓和ios做了处理；
getConfig() {
let _this=this;
let url="";
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isiOS){
url=this.global_.link_path + 'index.html#/index'
}else{
url=window.location.href;
}
this.axios.get(this.global_.share_path,{
params:{
'url':url
}
}).then(function(res){
if(res.data.code == 200){
let appId = res.data.data.appId;
let nonceStr = res.data.data.nonceStr;
let signature = res.data.data.signature;
let timestamp = res.data.data.timestamp;
wx.config({
//debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: appId, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature, // 必填，签名，见附录1
jsApiList: [
'checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getLocation',
]
});
}
}.bind(this)).catch(function(err){
console.log(err);
})
},
我这里签名是后台直接返回的，如需要自己算，参考：好吧，没找到，回头补上；
4、调用微信选择头像
点击头像时，调用该方法；
chooseImageFn(){ // 微信选择头像
let _this = this;
wx.chooseImage({
count: 1,
success: function (res) {
let localIds = res.localIds; // 上传的图片的id,可以用于本地直接显示图片；
_this.getLocalImgDataFn(res.localIds[0]); // 把本地图片转成base64码，
}
})
},
5、获取本地图片
此方法需在调用chooseImageFn()函数之后调用，否则无效；
微信后台自动返回图片的base64码；调用这里的localId和res.localData都是刚刚我们上传的图片；
getLocalImgDataFn(localId){
let _this = this;
wx.getLocalImgData({
localId: localId, // 图片的localID
success: function (res) {
let basePic64 = res.localData; // 微信返回的base64码；
if(basePic64.indexOf('base64')>0){
let file = _this.iosDataURLtoFile(basePic64,'jpg');
_this.saveImg(file,basePic64)
}else{
let file = _this.dataURLtoFile(basePic64,'jpg');
_this.saveImg(file,localId)
}
}
});
},
6、因为后台需要file文件格式，所以我这里将base64码做了个转化：
理想很饱满，现实很骨感，在转化的过程中，又出现了安卓和ios的不同返回值，导致的各种问题；
5中我们获取到的base64码；安卓返回不带图片格式，而ios返回的base64码是带有图片格式的，so,针对安卓和ios又处理了两个不同的版本；安卓版本的返回值，我们手动添加了它的图片格式；才顺利将base64码转成了file文件格式；如图：
iosDataURLtoFile(dataurl, filename) {//将base64转换为文件
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
},
dataURLtoFile(dataurl,fimename) { //将base64转换为文件
let bstr = atob(dataurl), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], fimename, {type:'image/jpeg'});
},
7、将图片传给后台
Axios的post传输也是各种坑,新建formData;将所有需要的参数都用append的方式插入到新建的formData中；（必须这么传）
// 将上传的图片传给服务器
saveImg(file,localId){
let _this = this;
let data = new FormData();
data.append("userId",uid);
data.append("file",file);
let headers = {headers: {"Content-Type": "multipart/form-data"}}
return this.axios.post(this.global_.link_path + 'file/uploadHeadImg',data,headers).then(function(res){
if(res.data.code == RES_OK){
_this.infos.headimgurl = localId;
}
}.bind(this)).catch(function(err){
console.log(err);
})
},
备注：
1、import wx from 'weixin-js-sdk'只能引入一次，多次引入会报错；
网友评论