关于vue调用微信扫描二维码的功能采坑总结。引入js-sdk的一个大坑。
什么都不说,先上一个坑点图。
大家都知道,调用微信的功能需要配置js-sdk,我昨天看了一天的文档,还是没能在vue项目里调起微信扫一扫的功能。查了半天才发现,针对vue项目,官方推出了一个名为"weixin-jsapi"的插件。而在官网上只说了让我们引入一个“weixin-js-sdk”的插件,然鹅···这个插件在vue项目里是各种报错。一般会报"wx of undefinde"~~~然后就是"config of undefined"~~~
记住!!!记住!!!记住!!!
如果你的项目是vue项目,请安装:"weixin-jsapi"
// 下载安装命令
npm install weixin-jsapi --save
// 在man.js中引入 weixin-jsapi
import wx from "weixin-jsapi";
// 在man.js中注册 weixin-jsapi
Vue.prototype.wx = wx
具体业务代码:
<script>
// vue 专用版本JS-SDK
import wx from "weixin-jsapi";
export default {
data() {
return {};
},
mounted() {
// 页面加载完成唤醒微信扫一扫
this.wxScanCode();
},
methods: {
wxScanCode() {
$.ajax({
type: "POST",
url: "后端提供的接口",
data: {
url: window.location.href.split("#")[0] // 获取当前扫码界面的url,url后面不能携带任何参数及#号,所以在此进行分割
},
dataType: "json",
success: function(result) {
console.log("result", result);
// 后端返回的参数
var timestamp = result.timestamp;
var noncestr = result.nonceStr;
var signature = result.signature;
var appId = result.appId;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
// debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: noncestr, // 必填,生成签名的随机串
signature: signature, // 必填,签名,见附录1
jsApiList: [
"checkJsApi",
"onMenuShareTimeline",
"onMenuShareAppMessage",
"onMenuShareQQ",
"onMenuShareWeibo",
"hideMenuItems",
"showMenuItems",
"hideAllNonBaseMenuItem",
"showAllNonBaseMenuItem",
"translateVoice",
"startRecord",
"stopRecord",
"onRecordEnd",
"playVoice",
"pauseVoice",
"stopVoice",
"uploadVoice",
"downloadVoice",
"chooseImage",
"previewImage",
"uploadImage",
"downloadImage",
"getNetworkType",
"openLocation",
"getLocation",
"hideOptionMenu",
"showOptionMenu",
"closeWindow",
"scanQRCode",
"chooseWXPay",
"openProductSpecificView",
"addCard",
"chooseCard",
"openCard"
] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function() {
wx.scanQRCode({
needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function(res) {
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
// location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
// alert(result);
// location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
// sessionStorage.setItem('saomiao_result',result);
//其它网页调用二维码扫描结果:
// var result = sessionStorage.getItem("saomiao_result");
console.log(result);
},
error: function(res) {
console.log(res);
}
});
});
}
});
}
}
};
</script>
我的扫码界面比较简单,当用户进入到这个界面就立即打开扫码,扫码完成立即跳转到商品详情页面。
最后,真心再怼一次微信公众平台的文档····文档真心不详细,坑很多!!!!