h5中如何调起微信的扫一扫功能？

您所在的位置：网站首页 › 公众号扫一扫失败怎么办 › h5中如何调起微信的扫一扫功能？

h5中如何调起微信的扫一扫功能？

2024-03-11 21:36| 来源: 网络整理| 查看: 265

看到这个需求的时候有点懵，第一反应就是去找文档，最后在微信官方文档-公众号-微信网页开发中-js-sdk文档说明中找到了这个调起微信扫一扫接口的功能。接下来记录下是如何实现的吧。首先我们肯定是要引入微信的js文件的

其次要调用微信内置的方法，那么我们就得配置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项目中如何调用微信扫一扫

JS-SDK说明文档官方链接地址

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) } }) } 使用点击扫码 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 } }, }

【本文地址】

h5中如何调起微信的扫一扫功能？

h5中如何调起微信的扫一扫功能？

今日新闻

推荐新闻