vue微信公众号扫码功能

npm install weixin-js-sdk --save

import wx from 'weixin-js-sdk'

2 开始调用

getcode() {  // 点击扫码开始执行函数
			this.http("/wx/sign", {  // 向后台请求appid
				url: window.location.href.split("#")[0]  // url必须是本页面的地址
			}).then(res => {
				let data = res.data.data;
				var tiem = data.timestamp;
				wx.config({
					debug: false,
					appId: data.appId, // 必填,公众号的唯一标识
					timestamp: tiem, // 必填,生成签名的时间戳
					nonceStr: data.nonceStr, // 必填,生成签名的随机串
					signature: data.signature, // 必填,签名
					jsApiList: ["scanQRCode", "checkJsApi"] // 必填,需要使用的JS接口列表
				});
				wx.error(function(res) {
					alert("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
				});

				wx.ready(function() {
					// config信息验证成功后会执行ready方法,所有接口调用都必须在config接口获得结果之后
					// config 是一个客户端的异步操作,所以如果需要在页面加载时调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发是才调用的接口,则可以直接调用,不需要放在ready函数中
					wx.checkJsApi({
						// 判断当前客户端版本是否支持指定JS接口
						jsApiList: ["scanQRCode"],
						success: function(res) {
							// 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
							if (res.checkResult.scanQRCode === true) {
								wx.scanQRCode({
									// 微信扫一扫接口
									desc: "scanQRCode desc",
									needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
									scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
									success: function(res) {
										
										this.$toast("扫码成功");
									}
								});
							} else {
								alert("抱歉，当前客户端版本不支持扫一扫");
							}
						},
						fail: function(res) {
							// 检测getNetworkType该功能失败时处理
							alert("检测getNetworkType该功能失败" + res);
						}
					});
				});
				/* 处理失败验证 */
				wx.error(function(res) {
					// config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
					alert("配置验证失败: " + res.errMsg);
				});
			});
		},