vue使用微信扫一扫

admin管理员组

文章数量:1516870

vue使用微信扫一扫

vue使用微信扫一扫

第一步： 安装weixin-js-sdk 和 jquery 包 npm install weixin-js-sdk jquery
第二部： 配置wx.config （配置都是后端返回来的，菜鸟前端只需要按需传值过去就可）

代码如下

import wx from “weixin-js-sdk”;
import $ from “jquery”;
goSao() {

  //这里【url参数一定是去参的本网址】，请求后端接口换取signature//(兼容安卓和ios)let url = "传值";let ua = navigator.userAgent.toLowerCase();if (/iphone|ipad|ipod/.test(ua)) {this.newUrl = window.location.href.split("#")[0];} else if (/android/.test(ua)) {this.newUrl = window.location.href;}//传值为了去掉#$.get(`后台需要的路径=${this.newUrl}`,function(response) {wx.config({// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。debug: false,// 必填，公众号的唯一标识appId: response.data.appId,// 必填，生成签名的时间戳timestamp: response.data.timestamp,// 必填，生成签名的随机串nonceStr: response.data.nonceStr,// 必填，签名signature: response.data.signature,// 必填，需要使用的JS接口列表，所有JS接口列表jsApiList: ["scanQRCode"]});console.log(response)});wx.error(function(res) {alert("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。});let _t = thiswx.ready(function () {wx.checkJsApi({jsApiList: ['scanQRCode'],success: function (res) {}});wx.scanQRCode({needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有success: async (res)=>{var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果alert（result ）}});});
},

已测，可以使用

注：只能微信浏览器使用，其他浏览器不可

本文标签： vue使用微信扫一扫