线上项目亲测无bug,附上官方文档 js-sdk说明文档
环境准备
首先打开终端执行命令npm install weixin-js-sdk
可以在main.js文件中将其挂载到Vue原型上
Vue.prototype.wx=require('weixin-js-sdk')
或者可以直接在组件中使用
let wx = require('weixin-js-sdk')
以下示例是组件中单独引入请知悉
开始
第一步
首先搭建基本的ui结构,这边就直接上代码了(只做示例,比较简单)
html部分如下(使用了两个vant组件,不懂的话可以查看vant官网)
<template>
<div class="container">
<h2>身份证照片</h2>
<p>请上传本人有效身份证照片,拍摄时请保证身份证边框完整</p>
<div class="img_box">
<div class="left_box" @click="boxClick('1')">
<van-image width="150" height="75" :src="img1" />
<div class="title_text">身份证正面照</div>
</div>
<div class="right_box" @click="boxClick('2')">
<van-image width="150" height="75" :src="img2" />
<div class="title_text">身份证反面照</div>
</div>
</div>
<van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
<div class="clickBtn" @click="goToFilm('camera')">拍摄</div>
<div class="clickBtn" @click="goToFilm('album')">从相册选择</div>
<div class="clickBtn" @click="show=false">取消</div>
</van-popup>
</div>
</template>
css部分如下
h2 {
line-height: 60px;
margin-left: 30px;
}
p {
text-align: center;
}
.img_box {
display: flex;
justify-content: space-evenly;
margin: 10px 0;
}
.title_text {
text-align: center;
margin-top: 15px;
color: #87ceeb;
font-size: 16px;
}
.clickBtn {
height: 20%;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #ccc;
}
效果图如下
ui效果图
第二步
首先通过官方文档的描述准备必要的数据如下:
wx.config({
debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的 JS 接口列表
});
我这边是和后端配合请求接口获得
注意wx.config需要写到created声明周期钩子函数中,页面被创建的时候调用,然后依次调用wx.ready和wx.error
代码片段如下:
configWxApi () {
let myUrl = window.location.href.split("#")[0];
this.wechatParamsByRequestComm(myUrl, 'getWxData', {}, (res) => {
console.log('wechatData', res);
wx.config({
debug: false,
appId: res.appId, //公众号的唯一标识
timestamp: res.timestamp, //生产签名时间戳
nonceStr: res.noncestr, //生成签名随机串
signature: res.signature, //签名
jsApiList: ['chooseImage', 'uploadImage', 'downloadImage', 'getLocalImgData'] //需要使用的接口列表
});
//config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
wx.ready(function () {
console.log("ready")
})
wx.error(function (res) {
console.log("失败了", res);
// alert(res.errMsg); // 正式环境记得关闭啊！！！！
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
})
},
将configWxApi方法写入cerated中即可
wechatParamsByRequestComm方法为获取wx.config中参数的方法,可以配合后端完成
注意事项：
ios系统调用api的时候会有系统默认弹窗,安卓则没有,所以需要做好兼容处理
首先附上data代码块的数据
data () {
return {
show: false,//是否弹窗
img1: 'https://img01.yzcdn.cn/vant/cat.jpeg',
img2: 'https://img01.yzcdn.cn/vant/cat.jpeg',
imgFlag: '',//点击的是哪张图片
timer: null
}
},
当点击上传图片时,ios不需要调用咋自己的弹窗,Android则需要先调用咋自己写的弹窗,兼容代码如下
点击安卓首先调用弹窗,然后再调用wx的api,苹果直接调用wx的api(详情见goToFilm方法)
this.isMobile()方法为判断当前是ios还是Android,安卓为1,ios为2
boxClick (flag) {
console.log('flag: ', flag);
console.log(this.isMobile());
this.imgFlag = flag
if (this.isMobile() == '1') {//安卓系统时候才会调用自己的弹窗,ios有默认弹窗
this.show = true
} else if (this.isMobile() == '2') {//苹果系统就直接调用方法,会有默认弹窗
this.goToFilm(['camera', 'album'])
}
},
重点来了,如下为调用wx api的方法
定时器可以加也可以不加
goToFilm (sourceType) {
this.show = false
console.log(sourceType);
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有 ['original', 'compressed']
sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有 ['album', 'camera']
success: (res) => {
let localIds = res.localIds;
let localId = localIds[0]
console.log('success成功回调res', res);
this.timer = window.setTimeout(() => {
wx.uploadImage({
localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: (res) => {
let serverId = res.serverId; // 返回图片的服务器端ID
wx.downloadImage({
serverId: serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: (res) => {
let localId = res.localId; // 返回图片下载后的本地ID
wx.getLocalImgData({
localId: localId,
success: (result) => {
console.log('result: ', result);
if (this.isMobile() == '2') {//苹果系统
console.log('ios');
let imgSrc = result.localData;
if (this.imgFlag == '1') {
this.img1 = imgSrc
} else if (this.imgFlag == '2') {
this.img2 = imgSrc
}
} else if (this.isMobile() == '1') {//安卓系统
console.log('android');
let imgSrc = 'data:image/jpeg/png;base64,' + result.localData; // localData是图片的base64数据，可以用img标签显示
if (this.imgFlag == '1') {
this.img1 = imgSrc
} else if (this.imgFlag == '2') {
this.img2 = imgSrc
}
}
},
fail: (err) => {
console.log('getLocalImgData失败', err);
},
complete: () => {
window.clearTimeout(this.timer)
console.log('getLocalImgData接口调用完成');
}
});
}
})
}
})
}, 100);
},
fail: (err) => {
console.log('chooseImage失败', err);
},
complete: () => {
console.log('chooseImage接口调用完成');
}
});
},
制作不易,如果觉得用得上或者觉得我写的还不错的可以点个赞谢谢
