VUE接入微信公众号JSSDK扫一扫
一、准备
- 服务器
- 域名
- 微信公众号
二、开发
-
安装jssdk
npm install weixin-jsapi
-
引入:在main.js加入代码
import wx from "weixin-jsapi"; Vue.prototype.$wx = wx;
-
使用 (data为接口返回的签名信息)
// ***注意:注意:签名需要url url为encodeURIComponent(window.location.href.split("#")[0]) let { appId, debug, jsApiList, nonceStr, signature, timestamp } = data; this.$wx.config({ debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId, // 必填,公众号的唯一标识 timestamp, // 必填,生成签名的时间戳 nonceStr, // 必填,生成签名的随机串 signature, // 必填,签名 jsApiList // 必填,需要使用的JS接口列表 }); this.$wx.ready(() => { this.$wx.scanQRCode({ needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有 success: function(r) { let result = r.resultStr; // 当needResult 为 1 时,扫码返回的结果 console.log("r", result); } }); })