看到这个需求的时候有点懵,第一反应就是去找文档,最后在微信官方文档-公众号-微信网页开发中-js-sdk文档说明中找到了这个调起微信扫一扫接口的功能。
接下来记录下是如何实现的吧。
首先我们肯定是要引入微信的js文件的
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
其次要调用微信内置的方法,那么我们就得配置wx.config
$.ajax({
type: "post",
url: '',//后台提供的接口
data: {
type: "signature",
url: window.location.href.split("#")[0],
weixinidx: 1
},
cache: false,
dataType: 'json',
success: function (res) {
if (res.s) {
var con = res.d;
wx.config(
{
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数
appId: con.appid,
timestamp: con.timestamp, // 必填,生成签名的时间戳
nonceStr: con.noncestr, // 必填,生成签名的随机串
signature: con.signature,// 必填,签名
jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表
});
}
},
fail: function (e) {
layer.msg(e.msg)
}
});
然后判断下当前客户端版本是否支持指定JS接口
wx.ready(function () {
wx.checkJsApi({
jsApiList: ['scanQRCode'],
success: function (res) {
},
fail: function (e) {
layer.msg('当前登录环境不支持扫码,请切换微信环境')
}
});
});
最后就可以在需要实现扫一扫的地方调用接口了:
wx.scanQRCode({
needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
}
});
vue3开发的h5项目中如何调用微信扫一扫
1.项目中引入微信js-sdk
npm install weixin-jsapi --save 或者 yarn add weixin-jsapi --save
2.封装微信校验和扫码方法
import { Toast } from 'vant' //引入vant框架提示方法
import wx from "weixin-jsapi"; // 引入微信js-sdk
import { getSign } from '@/api/common' // api
/**
1. 获取微信签名,注入权限验证配置
2. @returns
*/
export function requestWxConfig () {
// 获取当前扫码界面的url,url后面不能携带任何参数及#号,所以在此进行分割
const url = window.location.href.split("#")[0]
getSign({ url }).then((res: any) => {
if (res.code == 0) {
let wxinfo = res.data
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId: 'wxbec32ae3d8b95af4', // 必填,公众号的唯一标识
timestamp: wxinfo.timestamp, // 必填,生成签名的时间戳
nonceStr: wxinfo.nonceStr, // 必填,生成签名的随机串
signature: wxinfo.signature, // 必填,签名,见附录1
jsApiList: ['checkJsApi', 'scanQRCode'], // 必填,需要使用的JS接口列表,
})
/**wx.error可以返回微信config配置是否成功*/
wx.error(function (res) {
Toast(res.errMsg)
console.log('微信config配置失败res', res)
})
}else{
console.log('api接口报错==>', res)
}
})
}
/**
点击扫描按钮的时候执行onScanQRCode方法
*/
export function onScanQRCode () {
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
success:(res:any)=>{
// 当needResult 为 1 时,扫码返回的结果
console.log('wx.scanQRCode成功res==>', res)
},
fail: (err:any) => {
Toast(err.errMsg)
console.log('wx.scanQRCode失败===>', err)
}
})
}
- 使用
<template>
<div @click="onScan">点击扫码</div>
</template>
<script lang="ts">
import { onMounted } from 'vue';
import { onScanQRCode ,requestWxConfig } from '@/utils/common'
export default {
setup(props: any, ctx: any) {
/*.................................onMounted............................*/
onMounted(() => {
requestWxConfig ()//获取微信签名,注入权限验证配置
})
const onScan = () => {
onScanQRCode()
}
return {
...toRefs(data),
onScan
}
},
}
</script>