vue如何实现微信扫一扫功能

  介绍

这篇文章主要讲解了vue如何实现微信扫一扫功能,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

第一步:安装weixin-js-sdk和jquery包<代码> npm安装weixin-js-sdk jquery代码

第二部:配置<代码>天气。配置>

代码如下

从“进口wx weixin-js-sdk”;
  从“进口美元jquery”;
  goSao () {//这里【url参数一定是去参的本网址】,请求后端接口换取签名//(兼容安卓和ios)
  让url=按怠?
  让ua=navigator.userAgent.toLowerCase ();
  如果(ipod/iphone ipad | |/test (ua)) {
  这一点。newUrl=window.location.href.split (“#”) [0];
  }else if (/android/test (ua)) {
  这一点。newUrl=window.location.href;
  }//传值为了去掉#
  
  $ . get(“后台需要的路径=$ {this.newUrl}’,
  函数(响应){
  wx.config ({//开启调试模式,调用的所有api的返回值会在客户端提醒出来,若要查看传入的参数,可以在pc端打开,参数信息会通过日志打出,仅在pc端时才会打印。
  调试:假的,//必填,公众号的唯一标识
  appId: response.data.appId,//必填,生成签名的时间戳
  时间戳:response.data.timestamp,//必填,生成签名的随机串
  nonceStr: response.data.nonceStr,//必填,签名
  签名:response.data.signature,//必填,需要使用的JS接口列表,所有JS接口列表
  jsApiList (“scanQRCode"):
  });
  console.log(响应)
  }
  );
  wx.error(函数(res) {
  alert(“出错了:“+ res.errMsg);//这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
  });
  让_t=这
  wx。准备好(函数(){
  wx.checkJsApi ({
  jsApiList: [& # 39; scanQRCode& # 39;],
  成功:函数(res) {
  
  }
  });
  wx.scanQRCode ({
  needResult: 1、//默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  scanType: [“qrCode"]//可以指定扫二维码还是一维码,默认二者都有
  成功:异步(res)=祝辞{
  结果var=res.resultStr;//当needResult为1时,扫码返回的结果
  alert(结果)
  }
  });
  });
  },

已测,可以使用

注:只能微信浏览器使用,其他浏览器不可

看完上述内容,是不是对vue如何实现微信扫一扫功能有进一步的了解,如果还想学习更多内容,欢迎关注行业资讯频道。

vue如何实现微信扫一扫功能