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

看到这个需求的时候有点懵，第一反应就是去找文档，最后在微信官方文档-公众号-微信网页开发中-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项目中如何调用微信扫一扫

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.datawx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来appId: 'wxbec32ae3d8b95af4', // 必填，公众号的唯一标识timestamp: wxinfo.timestamp, // 必填，生成签名的时间戳nonceStr: wxinfo.nonceStr, // 必填，生成签名的随机串signature: wxinfo.signature, // 必填，签名，见附录1jsApiList: ['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 } from '@/utils/common'
export default {setup(props: any, ctx: any) {/*.................................onMounted............................*/onMounted(() => {requestWxConfig ()//获取微信签名，注入权限验证配置})const onScan = () => {onScanQRCode()}return {...toRefs(data),onScan }},
}
</script>

h5中如何调起微信的扫一扫功能？相关推荐

微信浏览器iframe嵌套h5，h5页面不能调起微信支付问题处理
微信浏览器iframe嵌套h5,h5页面不能调起微信支付问题处理第一步: 微信公众号配置网页授权域名,拿用户openid 第二步: h5页面跳转后端微信静默授权,拿到用户的openid 第三步: 微 ...
uni-app H5中使用wx-open-launch-weapp打开微信小程序
项目场景: 最近最H5开发,项目需要发起支付,因为原来我们app走的一套是小程序的支付,所以这边需要H5打开小程序实现支付: 微信文档地址:https://developers.weixin.qq.c ...
商户接入微信支付方法（扫码支付、刷卡、app）
微信支付的几种方式解读: 微信支付商户平台的付款方式有以下几种: 公众号支付:在微信内的商家页面上完成公众号支付 APP支付:在APP中,调起微信进行APP支付扫码支付:扫描二维码(包含PC网站)进 ...
微信中h5中的视频无法播放,提示视频解析失败的根本原因。
提示: 如果你的视频文件所放的服务器装的是apache2.4,那就对了,否则不需要往下看了微信中的h5中的视频在微信中无法播放,但是你用浏览器打开这个h5地址,却可以播放,原因就是apache没有配 ...
android 微信功能,安卓版微信悄悄更新，这项功能彻底消失！
微信作为我们日常生活中接触较多的软件,每一次版本的更新和功能的变化都会带来不小影响,近日微信安卓版推送了7.0.4测试版,有几点变化值得注意.在这一个小版本更新中,微信彻底移除了"漂流瓶&q ...
前端怎么从H5调起微信扫描二维码?小程序使用扫码功能.
小程序如何使用扫码的功能呢? wx.scanCode(Object object) 参数属性类型默认值必填说明最低版本 onlyFromCamera boolean false 否是否只 ...
微信环境中h5调用微信扫一扫api
需求:支持微信公众号的h5页面内调用微信扫一扫api,实现产品的扫码签到功能技术栈:vue, ts 参考资料:微信官方文档步骤: 项目引入js 文件,有两种引入方式, 全局引入全局引入,在全局h ...
微信H5网页调用扫一扫功能（vue）中遇到的问题
微信H5网页使用扫一扫时遇到的问题首次进入界面调用失败首次进入界面调用失败问题:进入页面,点击扫一扫按钮调用微信扫一扫功能失效,但是刷新当前页调用就正常了解决方法: // 使用扫一扫按钮的页面 ...
UNI-APP 开发微信公众号（H5）JSSDK的使用、微信扫一扫
UNI-APP 开发微信公众号(H5)JSSDK的使用.微信扫一扫自己做了一个h5端调起微信扫一扫的功能,上网一找,没有说得很详细的,依样画葫芦,结果出了很多问题.下面给大家讲一下做的方法,用这个方 ...

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

vue3开发的h5项目中如何调用微信扫一扫

h5中如何调起微信的扫一扫功能？相关推荐

最新文章

热门文章