企业微信文档https://work.weixin.qq.com/api/doc/90000/90136/90512 1.引入JS文件
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>2.获取 wx.config要用到的配置参数
- 参考文档：通过config接口注入权限验证配
https://work.weixin.qq.com/api/doc/90000/90136/90514
getWxConfig() {
const params = {
url: window.location.href.split('#')[0],
};
getJsapi(params).then((res) => {
if (res.code == 1) {
this.config = {
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
};
wx.config({
beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: false, // true开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: this.config.appId, // 必填，企业微信的corpID
timestamp: this.config.timestamp, // 必填，生成签名的时间戳
nonceStr: this.config.nonceStr, // 必填，生成签名的随机串
signature: this.config.signature, // 必填，签名，见附录1
jsApiList: ['uploadImage', 'getLocalImgData', 'scanQRCode', 'chooseImage'], //必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
}
});
},3.点击拍照按钮，调用手机照相机，拿到本地照片，上传到微信服务器，区分苹果安卓
- 参考文档：获取本地图片接口，拍照或从手机相册中选图接口，上传图片接口https://work.weixin.qq.com/api/doc/90000/90136/90495
//拍照
takePhoto() {
let that = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有'album', 'camera'
defaultCameraMode: 'front', //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。（注：用户进入拍照界面仍然可自由切换两种模式）
isSaveToAlbum: 0, //整型值，0表示拍照时不保存到系统相册，1表示自动保存，默认值是1
success: function (res) {
var androidId = res.localIds[res.localIds.length - 1];
var iosId;
var localId = res.localIds[res.localIds.length - 1];
if (window.__wxjs_is_wkwebview) {
//判断ios是不是用的 wkwebview 内核
wx.getLocalImgData({
//循环调用 getLocalImgData
localId: localId,
// 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
localData = localData.replace('jgp', 'jpeg'); //iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
iosId = localData;
that.pic = iosId;
that.noPic = false;
},
fail: function (res) {
alert('res');
},
});
} else {
//如果不是用的wkwebview内核或者是用的安卓系统
that.pic = androidId;
that.noPic = false;
}
//上传图片到微信服务器
wx.uploadImage({
localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
//因这里只保存一张所以直接赋值，多张请自行处理为字符串
that.serverId = res.serverId; // 返回图片的服务器端ID,即素材的media_id
},
});
},
error: function (res) {
if (res.errMsg.indexOf('function_not_exist') > 0) {
this.$message.error('版本过低请升级', '1', 'error.gif');
return false;
}
},
});
},完整代码：
<template>
<div class="faceBox">
<!-- 图片 -->
<div class="facePhotoBox" v-if="noPic">
<div class="facePhoto">
<div class="photoBg"><div class="photoIcon" @click="takePhoto"></div></div>
<div class="photoPeople"></div>
</div>
</div>
<div class="facePicture" v-else>
<el-image style="width: 285px" :src="pic" :fit="contain" @click="takePhoto"></el-image>
</div>
<!-- 文字 -->
<div class="faceInfo">
<div class="infoText">
<p class="tips">
<i></i>
说明
</p>
<p>1、请保持正面拍照，勿戴口罩、帽子，平视摄像头拍摄，保持半身在框内。</p>
<p>2、请保持面部充足的光线，背景光线不要过亮。</p>
<p>3、照片背景最好为纯色，灰色墙最佳，背景内最好不要出现其他人像。</p>
<p>4、不要开美颜，以免影响识别</p>
</div>
<el-button type="primary" @click="submit">提交</el-button>
</div>
</div>
</template>
<script>
import { getJsapi, faceUpload } from '@a/hr.js';
import { delCookie, setCookie } from '@/assets/js/cookie.js';
import axios from 'axios';
export default {
data() {
return {
config: {
appId: '',
timestamp: '',
nonceStr: '',
signature: '',
},
pic: '',
noPic: true,
serverId: '',
};
},
mounted() {
this.getWxConfig();
},
methods: {
getWxConfig() {
const params = {
url: window.location.href.split('#')[0],
};
getJsapi(params).then((res) => {
if (res.code == 1) {
this.config = {
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
};
wx.config({
beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: false, // true开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: this.config.appId, // 必填，企业微信的corpID
timestamp: this.config.timestamp, // 必填，生成签名的时间戳
nonceStr: this.config.nonceStr, // 必填，生成签名的随机串
signature: this.config.signature, // 必填，签名，见附录1
jsApiList: ['uploadImage', 'getLocalImgData', 'scanQRCode', 'chooseImage'], //必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
}
});
},
//拍照
takePhoto() {
let that = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有'album', 'camera'
defaultCameraMode: 'front', //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。（注：用户进入拍照界面仍然可自由切换两种模式）
isSaveToAlbum: 0, //整型值，0表示拍照时不保存到系统相册，1表示自动保存，默认值是1
success: function (res) {
var androidId = res.localIds[res.localIds.length - 1];
var iosId;
var localId = res.localIds[res.localIds.length - 1];
if (window.__wxjs_is_wkwebview) {
//判断ios是不是用的 wkwebview 内核
wx.getLocalImgData({
//循环调用 getLocalImgData
localId: localId,
// 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
localData = localData.replace('jgp', 'jpeg'); //iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
iosId = localData;
that.pic = iosId;
that.noPic = false;
},
fail: function (res) {
alert('res');
},
});
} else {
//如果不是用的wkwebview内核或者是用的安卓系统
that.pic = androidId;
that.noPic = false;
}
//上传图片到微信服务器
wx.uploadImage({
localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
//因这里只保存一张所以直接赋值，多张请自行处理为字符串
that.serverId = res.serverId; // 返回图片的服务器端ID,即素材的media_id
},
});
},
error: function (res) {
if (res.errMsg.indexOf('function_not_exist') > 0) {
this.$message.error('版本过低请升级', '1', 'error.gif');
return false;
}
},
});
},
//提交
submit() {
if (this.serverId == '') {
this.$message.error('请拍完照再提交');
}
if (this.serverId) {
const params = {
server_id: this.serverId,
};
faceUpload(params).then((res) => {
if (res.code == 1) {
WeixinJSBridge.call('closeWindow');
}
});
}
},
},
};
</script>
<style scoped lang="scss">
.faceBox {
width: 100%;
min-height: 100%;
background: url(../../../assets/img/attendancePhoto.jpg) no-repeat #4671f3;
background-size: 100%;
.facePhotoBox {
padding-top: 85px;
box-sizing: border-box;
}
.facePhoto {
width: 390px;
height: 390px;
background: url(../../../assets/img/attendancePhoneBorder.png) no-repeat;
background-size: 100%;
margin: 0 auto;
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 90px;
.photoBg {
background: #fff;
width: 292px;
height: 292px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
.photoIcon {
width: 173px;
height: 140px;
background: url(../../../assets/img/attendancePhotoIcon.png) no-repeat;
background-size: 100%;
}
}
.photoPeople {
position: absolute;
left: -60px;
bottom: -80px;
width: 158px;
height: 215px;
background: url(../../../assets/img/attendancePhotoPelple.png) no-repeat;
background-size: 100%;
}
}
.faceInfo {
width: 571px;
height: 433px;
background: url(../../../assets/img/attendanceInfo.png) no-repeat;
background-size: 100%;
margin: 0 auto;
padding: 17px;
box-sizing: border-box;
font-size: 20px;
line-height: 35px;
color: #2f405e;
.infoText {
margin-bottom: 20px;
.tips {
display: flex;
align-items: center;
i {
width: 32px;
height: 32px;
background: url(../../../assets/img/attendanceTips.png) no-repeat;
background-size: 100%;
margin-right: 10px;
}
}
}
.el-button {
width: 100%;
height: 75px;
border-radius: 10px;
background: #268bff;
font-size: 24px;
}
}
.facePicture {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
.el-image {
margin: 20px auto;
border-radius: 10px;
}
}
}
</style>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
