wxsdk的添加

//使用yarn进行添加

yarn add weixin-js-sdk

//使用npm进行添加

npm install weixin-js-sdk

1、在APP.vue中获取页面的url

//在APP.vue中获取页面的url//其原因：是为兼用IOS中获取页面进行签名，导致签名失败的问题created () {    window.localStorage.setItem('scanUrl',location.href.split('#')[0])}

2、vue前端，获取微信签名信息，为使用微信扫一扫功能做准备

import wx from 'weixin-js-sdk'/** * 获取微信签名信息 */getSign() {  //解决ios第一次无法调用微信扫一扫的功能，如果直接使用location.href.split('#')[0]进行获取链接的话，在IOS系统中第一次可能会无法进行正常的签名操作。  //原因：微信会对IOS页面链接做处理，虽然使用location.href.split('#')[0]获取输出的链接，为当前的页面，但是实际上，在IOS页面的链接，并不是这一个链接，所以会导致签名失败的情况  let purl = /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.localStorage.getItem('scanUrl');  let dataForm = {     'url': purl   }  this.showLoadding('正在加载配置文件，请稍后');  //请求后端，获取微信签名信息  getWxSign(dataForm).then((res) => {      if (res.success == true) {         let configData = {           debug: false,           appId: res.result.appId, // 必填，公众号的唯一标识           timestamp: "" + res.result.timestamp, // 必填，生成签名的时间戳           nonceStr: res.result.nonceStr, // 必填，生成签名的随机串           signature: res.result.signature,// 必填，签名           jsApiList: ['scanQRCode', 'checkJsApi']          }         wx.config(configData);      } else {         failedTip("获取签名信息失败，请刷新页面重新获取");      }      this.clearLoadding();   }); },

3、vue前端，调用微信扫一扫功能

/** * 调用微信扫一扫功能 */scan() {	let _that = this;	wx.ready(function () {	  wx.checkJsApi({		jsApiList: ['scanQRCode'],		success: function (res) {		  if (res.checkResult.scanQRCode === true) {			wx.scanQRCode({ // 微信扫一扫接口			  needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，			  scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有			  success: function (res) {				let url = res.resultStr // 当needResult 为 1 时，扫码返回的结果				console.log(url)//url为扫码后返回的信息			  }			})		  } else {			failedTip("抱歉，当前客户端版本不支持扫一扫");		  }		},		fail: function (res) { // 检测getNetworkType该功能失败时处理		  failedTip('fail' + res)		}	  });	});    //错误信息	wx.error(function (res) {	  failedTip("出错了：" + res.errMsg);	});},