1.index.html引入
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"><\/script>
2.在公众号!!!里 前端配置js接口安全域名 后台地址需要配置白名单
3.可以全局使用window.wx
//先配置
config(){
const {configValue} =this.state
window.wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: configValue.appId, // 必填,公众号的唯一标识公众号公众号公众号
timestamp: configValue.timestamp, // 必填,生成签名的时间戳
nonceStr: configValue.noncestr, // 必填,生成签名的随机串
signature: configValue.signature, // 必填,签名,见附录1n
jsApiList: ['chooseImage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
window.wx.ready(()=> {
console.log("配置成功")
this.chooseImage()
});
window.wx.error((res)=> {
console.log("配置失败",res)
})
}
//微信摄像头
chooseImage=()=>{
window.wx.chooseImage({
count: 1, //默认9
sizeType: ['compressed','original'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['camera','album'], //从相册选择
success: req=> {
console.log('img',req.localIds[0].toString())
//转64
window.wx.getLocalImgData({
localId: req.localIds[0].toString(),
success: res=> {
const localData = res.localData;
let imageBase64 = '';
if (localData.indexOf('data:image') == 0) {
//苹果的直接赋值,默认生成'data:image/jpeg;base64,'的头部拼接
imageBase64 = localData;
} else {
//安卓的坑!在拼接前需要对localData进行换行符的全局替换
imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
}
this.setState({
loading: true,
englishEnd: false,
})
this.uploadImage(this.base64ToBlob(imageBase64))
}
});
// imgToBase64(res)
}
})
}
//转formdata格式
base64ToBlob=(dataurl)=> {
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 });
}
//上传
uploadImage = (file) => {
const formData = new FormData()
formData.append('file', file)
//再调后台接口上传就行
}