1.引入微信sdk
import wx from 'weixin-js-sdk'
2.初始化微信sdk,构建扫一扫所需要的参数
async initWxConfig() {
//首先获取当前url地址
let url = await getSignUrl()
let params = {
appid: this.$route.query.appid,
url: url,
}
//调用后端接口获取公众号参数
const resp = await apiGet(apiGetSignature, params)
if (resp.code == 200) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: resp.data.appid, // 必填，公众号的唯一标识
timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
nonceStr: resp.data.nonceStr, // 必填，生成签名的随机串
signature: resp.data.signature, // 必填，签名
jsApiList: ['checkJsApi', 'scanQRCode'],
openTagList: ['wx-open-launch-weapp'],
success: function () {
console.log('调用成功')
},
fail: function (error) {
console.log(error)
},
})
} else {
console.log('auth wx url error')
}
},
getSignUrl获取当前项目链接(此处封装的公用方法,便于后续其他页面调用):
export function getSignUrl(){
var signLink = ''
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
signLink =window.entryUrl;
if(!signLink)signLink = location.href
} else {
signLink = location.href
}
return signLink;
}
3.点击页面按钮调用微信提供的扫一扫方法:
handleClick() {
wx.ready(function () {
wx.checkJsApi({
//判断当前客户端版本是否支持指定JS接口
jsApiList: ['scanQRCode'],
success: function (res) {
// 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
if (res.checkResult.scanQRCode != true) {
console.log('抱歉，当前客户端版本不支持扫一扫')
}
},
fail: function (res) {
//检测getNetworkType该功能失败时处理
alert('checkJsApi error')
},
}) //wx.checkJsApi结束
// 调起企业微信扫一扫接口
wx.scanQRCode({
desc: 'scanQRCode desc',
needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
console.log('调用扫描成功', res)
var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
$('#codeValue').val(result) //显示结果
// alert("扫码结果为：" + result);
},
error: function (res) {
console.log(res)
if (res.errMsg.indexOf('function_not_exist') > 0) {
alert('版本过低请升级')
}
},
}) //wx.scanQRcode结束
}) //wx.ready结束
},
全部完整代码:
<!-- 微信扫一扫 -->
<template><div class="collaborative_page common_page"><van-button type="primary" @click="handleClick">点击扫一扫</van-button></div>
</template><script>
import { apiGetSignature } from '@/api/common.js'
import { getSignUrl } from '@/utils/share.js'
import wx from 'weixin-js-sdk'
export default {data() {return {}},created() {this.LoginInfo = mySessionStorage.getItem('LoginInfo')? JSON.parse(mySessionStorage.getItem('LoginInfo')): {}this.initWxConfig()},mounted() {},methods: {//点击按钮扫一扫handleClick() {wx.ready(function () {wx.checkJsApi({//判断当前客户端版本是否支持指定JS接口jsApiList: ['scanQRCode'],success: function (res) {// 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}if (res.checkResult.scanQRCode != true) {console.log('抱歉，当前客户端版本不支持扫一扫')}},fail: function (res) {//检测getNetworkType该功能失败时处理alert('checkJsApi error')},}) //wx.checkJsApi结束// 调起企业微信扫一扫接口wx.scanQRCode({desc: 'scanQRCode desc',needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有success: function (res) {console.log('调用扫描成功', res)var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果$('#codeValue').val(result) //显示结果// alert("扫码结果为：" + result);},error: function (res) {console.log(res)if (res.errMsg.indexOf('function_not_exist') > 0) {alert('版本过低请升级')}},}) //wx.scanQRcode结束}) //wx.ready结束},async initWxConfig() {//首先获取当前url地址let url = await getSignUrl()let params = {appid: this.$route.query.appid,url: url,}//调用后端接口获取公众号参数const resp = await apiGetSignature(params)if (resp.code == 200) {wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: resp.data.appid, // 必填，公众号的唯一标识timestamp: resp.data.timestamp, // 必填，生成签名的时间戳nonceStr: resp.data.nonceStr, // 必填，生成签名的随机串signature: resp.data.signature, // 必填，签名jsApiList: ['checkJsApi', 'scanQRCode'],openTagList: ['wx-open-launch-weapp'],success: function () {console.log('调用成功')},fail: function (error) {console.log(error)},})} else {console.log('auth wx url error')}},},
}
</script>官方文档提供的扫一扫方法:
概述 | 微信开放文档
