第一步：在自己在项目中引入res.wx.qq.com/open/js/jwe…; 具体引入看环境，我对接在内网环境中，所以只能下载到本地，从本地项目中引入。 第二步：通过config接口注入权限验证配置，只有config配置成功了才能使用js-sdk中所有在js接口; 第三步：如何配置config;通过后台，前端获取url作为参数传给后台；具体代码如图 此代码是以图像接口为列；
getWxLoction() {
let _this = this;
let url = window.location.href.split("#")[0]; //获取#前面的部分 例如："http://172.16.6.32:8882/ffms-h5/"
let prourl = window.proxyUrl(url);//window.proxyUrl是内网环境特有的一个方法;其作用是将url进行转义;此方法看情况使用
let params = {
url: prourl,
};
_this.$api.getSignature(params).then((res) => {
//此处是调用后台是获取signature签名接口，注意的是请求方式是个坑;开始我使用get请求，下面的signature签名一直不对，config也就配置不成功;
//会alert出40093的错误;
//此处是使用get请求时才报的40093错误；所以不同情况报的错误不一样，一旦报错config必然是没配置成功，下面的接口都无法使用；
//后面使用post请求，就成功了。成功alert出config:ok!下面的接口就可以直接使用;
//总结config配置报错原因：1、url有问题；2、请求方式的问题（建议get，post两者都试试）
if (res) {
let resVal = res.data;//直接进行配置config;就是把后台返回在数据对应填入即可。
wx.config({
beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: false, // true为开启调试模式,调用的所有api的返回值会在客户端alert出来;false则关闭。如果是H5页面建议装Vconsole
appId: "wwc28b204e78cab51f", // 必填，应用的corpID；这个去自己的后台应用中找
timestamp: resVal.timestamp, // 必填，生成签名的时间戳 后台返回的
nonceStr: resVal.nonceStr, // 必填，生成签名的随机串 后台返回的
signature: resVal.signature, // 必填，签名 后台返回的
jsApiList: ["chooseImage"], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来；
});
wx.ready(() => {
wx.chooseImage({//拍照或从手机相册中选图接口
count: 1,
sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
defaultCameraMode: "normal", //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值，其中front表示默认为前置摄像头单拍模式，batch_front表示默认为前置摄像头连拍模式。（注：用户进入拍照界面仍然可自由切换两种模式）
isSaveToAlbum: 1, //整型值，0表示拍照时不保存到系统相册，1表示自动保存，默认值是1
success: function (res) {
console.log('chooseImage',res)
var localIds = res.localIds[0]; // 返回选定照片的本地ID列表，
console.log('localIds',localIds)
wx.getLocalImgData({//获取图片为base64的数据
localId: res.localIds[0], // 图片的localID
success: function(res) {
const localData = res.localData;// localData是图片的base64数据，可以用img标签显示
let imageBase64 = '';
if (localData.indexOf('data:image') == 0) {
//苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
imageBase64 = localData;
} else {
//此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
//此时一个正常的base64图片路径就完美生成赋值到img的src中了
imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
}
_this.insPhoto = imageBase64
//dataURLtoBlob方法是将base64图片转为file类型,直接传入即可使用;
//upLoaderImg方法是图片上传的接口
_this.upLoaderImg(_this.dataURLtoBlob(imageBase64));
}
});
},
});
});
wx.error((err) => {
alert("验证出错了", err.errMsg);
});
}
});
},
dataURLtoBlob(dataurl) {//dataURLtoBlob方法是将base64图片转为file类型,直接传入即可使用
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
},
upLoaderImg(file) {//此方法不可直接使用，根据个人的上传文件接口
let params = new FormData();
params.append("file", file);
params.append("uploadType", 3);
this.showOverlay = true;
setTimeout(()=>{
this.$api.uploaderFile(params).then((res) => {
console.log('上传图片返回',res)
if (res.code == 200) {
this.fileUrl.push(axios.defaults.baseURL + res.data);
this.showOverlay = false;
this.$toast('上传成功');
} else {
this.$toast(res.msg);
}
});
},3000)
},
总结：
- 获取url
- 请求后台接口，后台数据返回生成签名的时间戳、生成签名的随机串、签名
- 配置config
- wx.ready方法中直接使用js-sdk的所有接口 问题排查：
- 首先确认url是否需要转义
- 检查前端传入的url与后台获取前端传入的url是否一致；如果不一致，那就是请求方式的问题。
可以参观企业微信api 链接为open.work.weixin.qq.com/api/doc/900…
