vue中调用微信扫一扫功能（兼容IOS）

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);
	});
},