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

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

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
1

其次要调用微信内置的方法，那么我们就得配置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)
	}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

然后判断下当前客户端版本是否支持指定JS接口

wx.ready(function () {
	wx.checkJsApi({
		jsApiList: ['scanQRCode'],
		success: function (res) {
		},
		fail: function (e) {
		    layer.msg('当前登录环境不支持扫码,请切换微信环境')
		}
	});
}); 
1
2
3
4
5
6
7
8
9
10

最后就可以在需要实现扫一扫的地方调用接口了：

wx.scanQRCode({
  needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
  success: function (res) {
    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
  }
});
1
2
3
4
5
6
7

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

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

1.项目中引入微信js-sdk

npm install weixin-jsapi --save 或者 yarn add weixin-jsapi --save
1

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)
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

3. 使用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22