项目需求中,需要去掉微信的相机,进行拍照上传,下面是我的一些具体实现代码。
重点:1. 需要真机测试,2.域名需要提前去做绑定。
- 需要引入微信外连
在index.html中引入。
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
- 签名效验。
把当前项目地址(url)截取下来当作参数去掉后端给的接口。
3.微信测试接口
https://www.weixinsxy.com/jssdk/
// 调微信接口
getwechdata(){
let url = window.location.href.split('#')[0];
this.axios.post(this.basURL.votUrl+'/home/getWx',{
"data":{
"url":url,
},
"token": this.$store.state.token,
}).then(res=>{
if(res.data.errorinfo == null){
this.sellq = res.data.data;
wx.config({
debug:false, // 因为在手机上测试没法打印,当debug为true时,所有的返回值都会在手机上alert出来
appId:this.sellq.appId, // 必填,公众号唯一标识
timestamp:this.sellq.timestamp, // 必填,生成签名的时间戳
nonceStr:this.sellq.nonceStr, // 必填,生成签名的随机串
signature:this.sellq.signature,// 必填,签名
jsApiList: [
'checkJsApi',
'chooseImage',
'uploadImage',
'downloadImage',
'previewImage'
] // 必填,需要使用的JS接口列表,需要用到什么接口就去开发者文档查看相应的字段名
});
wx.error(function(res){
// alert("签名失败");
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
wx.ready(function(res){
console.log('签名成功');
})
// console.log(this.sellq)
}
}).catch(error=>{
console.log(error);
})
},
签名成功之后就可以调相机了。下面分为俩段,一段是拍照上传,另一段是相册中选取,都做的有注释
// 拍照
upcame(){
let that = this;
that.changeimage = false;
wx.ready(function(){ // 成功
wx.chooseImage({
count: 1, // 最多可以选择的图片张数,默认9
sizeType: ['compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['camera'], // album 从相册选图,camera 使用相机,默认二者都有
success: function (res) {
var localId = res.localIds.pop(); // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
if(window.wxjs_is_wkwebview){
if(window.wxjs_is_wkwebview == true){
wx.getLocalImgData({
localId: localId, // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
var box = document.getElementById("stroeImg");
box.innerHTML = "";
var img = document.createElement("img");
img.src = localData;
that.storeImage = localData;
img.setAttribute("class","imgSize")
box.appendChild(img);
}
});
}else{
var box = document.getElementById("stroeImg");
box.innerHTML = "";
var img = document.createElement("img");
img.src = localId;
that.storeImage = localId;
img.setAttribute("class","imgSize")
box.appendChild(img);
}
}else{
var box = document.getElementById("stroeImg");
box.innerHTML = "";
var img = document.createElement("img");
img.src = localId;
that.storeImage = localId;
img.setAttribute("class","imgSize")
box.appendChild(img);
}
wx.uploadImage({
localId:localId, // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
let serverId = res.serverId; // 返回图片的服务器端ID
// 可以将serverId传给后台,用于存放在自己服务器上
let data = {
"data":{
"type":2,
"serverID":serverId,
"key":that.userId,
},
"token": that.token,
};
// 可以将serverId传给后台,用于存放在自己服务器上
that.axios.post(that.basURL.votUrl+'/ReportOrder/saveServerID',data).then(res=>{
if(res.data.errorinfo == null){
Toast("更换头像成功!");
that.getData();
}else{
Toast(res.data.errorinfo.errormessage);
}
})
}
});
},
fail: function(res) { // 失败
Toast(res)
},
complete: function() {
} //接口调用完成时执行的回调函数,无论成功或失败都会执行。
});
})
},
//相册选取
upimage(){
let that = this;
that.changeimage = false; // 点击查看头像关闭选项
wx.ready(function(){
wx.chooseImage({
count: 1, // 最多可以选择的图片张数,默认9
sizeType: ['compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['album'], // album 从相册选图,camera 使用相机,默认二者都有
success: function (res) {
var localId = res.localIds.pop(); // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
if(window.wxjs_is_wkwebview == true){
wx.getLocalImgData({
localId: localId, // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
var box = document.getElementById("stroeImg");
box.innerHTML = "";
var img = document.createElement("img");
img.src = localData;
that.storeImage = localData;
img.setAttribute("class","imgSize")
box.appendChild(img);
}
});
}else{
var box = document.getElementById("stroeImg");
box.innerHTML = "";
var img = document.createElement("img");
img.src = localId;
that.storeImage = localId;
img.setAttribute("class","imgSize")
box.appendChild(img);
}
wx.uploadImage({
localId: localId, // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
let serverId = res.serverId; // 返回图片的服务器端ID
// 可以将serverId传给后台,用于存放在自己服务器上
that.axios.post(that.basURL.votUrl+'/ReportOrder/saveServerID',{
"data":{
"type":2,
"serverID":serverId,
"key":that.userId,
},
"token":that.token,
}).then(res=>{
if(res.data.errorinfo == null){
Toast("更换头像成功!");
that.getData();
}else{
Toast(res.data.errorinfo.errormessage);
}
})
}
});
},
fail: function(res) {
Toast(res)
},
complete: function() {}
});
})
},
具体的逻辑就是这些,根据自己需求而定。加油。