下载微信jdk，并在页面中引入

npm i weixin-js-sdk

// 按需引入
import wx from 'weixin-js-sdk';

初始化wx.config

注意：url需要前端传入，一定是网页的域名，window.location.href.split(‘#’)[0]，不可让后端写死，也不需要用encodeURIComponent()转译

var _that = this
			_that.$api.baseRequest('/h5/api/wx/get-sign', 'GET', {
				url: window.location.href.split('#')[0]
			}).then(res => {
				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: res.data.appId, // 必填，公众号的唯一标识
					timestamp: Number(res.data.timestamp), // 必填，生成签名的时间戳
					nonceStr: res.data.noncestr, // 必填，生成签名的随机串
					signature: res.data.sign, // 必填，签名
					jsApiList: ['checkJsApi', 'scanQRCode'] // 必填，需要使用的JS接口列表
				})
				wx.ready(() => {
			        console.log('配置完成，扫码前准备完成')
			     })
				wx.error(function(res) {
					alert("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
				});
			})

点击按钮调用扫一扫

wx.ready(function() {
					// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
					wx.checkJsApi({
						jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
						success: function(res) {

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

注意

  1. 如果前端一直提示签名失败，务必让后端把jsapi_ticket字段也返回，然后在微信 JS 接口签名校验工具（https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign）中校验一下签名是否正确，如果不一致那就是后端生成的问题
  2. timestamp是有字符限制的，timestamp是10位
  3. 在本地测试如果提示“config:fail,invalid url domain”，说明签名验证成功了，是本地域名跟微信公众号配置的js安全域名不一致，这个时候就需要放到测试，测一下