效果:
第一步:
后台配置js接口安全域名
域名规则:例:https://admin.serve.com.cn
;填写:serve.com.cn
;
微信jssdk config:invalid signature 签名错误 ,就是域名没配置好;
没了
代码:
//安装jssdk yarn add weixin-js-sdk
<template>
<div class="ScanQRCode w100">
<van-button type="primary" class="submits posFix" @click="qrCode">扫一扫</van-button>
</div>
</template>
<script>
import Vue from "vue";
import { Button ,Toast ,Dialog } from "vant";
import axios from "axios";
import wx from 'weixin-js-sdk'
const arr = [ Button ,Toast];
arr.map(e => {
//动态生成组件
Vue.use(e);
});
export default {
data() {
return {
};
},
name: "ScanQRCode",
created() {
this.getConfig()
},
methods: {
getConfig(){ //1.获取config参数
//window.location.href在Android上扫码正常,Ios签名失败;换成(window.location.href).split('#')[0]
const url = (window.location.href).split('#')[0] //window.location.href
axios.get(this.$my.api+'/base/wechat/getJSTicket?url=' + encodeURIComponent(url))
.then(res => {
if(res.data&&res.data.code == 200){
console.log(res.data.data)
let data = res.data.data
wx.config({
beta: true,
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appid, // 必填,公众号的唯一标识
timestamp:data.timestamp , // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名
jsApiList: ['checkJsApi','scanQRCode'] // 必填,需要使用的JS接口列表
});
wx.ready(function(){
console.log('成功')
});
wx.error(function(err){
console.log(err)
});
}else{
Toast(res.data.message)
}
}, response => {
console.log("error");
})
},
checkJsApi(api){//检测api是否可用
return new Promise((rel,err)=>{
wx.checkJsApi({
jsApiList: [api], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回,可用的api值true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
if(res.checkResult&&res.checkResult.chooseImage == false){
Toast('微信版本较低,请升级后重试!')
err('版本低')
}else{
rel(true)
}
}
});
})
},
qrCode(){ //扫码
this.checkJsApi('scanQRCode').then((rel)=>{
if(rel){
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
let result = res.resultStr.split(',')[1]; // 当needResult 为 1 时,扫码返回的结果
this.submit(result)
}
});
}
})
},
submit(num){//扫码成功后调用
axios.get(this.$my.api+'/base/express/checkExpress?number='+ num)
.then(res => {
if(res.data&&res.data.code == 200){
console.log(res.data.data)
Dialog.confirm({
title: '扫码结果',
message: `EMS结果:${res.data.data.EmsExpress}<br/>录入结果:${res.data.data.Express}`,
messageAlign:'left',
cancelButtonText:'关闭',
confirmButtonText:'继续扫码'
}).then(() => {
// on confirm
this.qrCode()
}).catch(() => {
// on cancel
});
}else{
Toast(res.data.message)
}
}, response => {
console.log("error");
})
}
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ScanQRCode{
background:url('../assets/images/logo.jpg') no-repeat center center;
height: 100%;
}
.submits{width: calc(100% - .4rem); bottom:.2rem;left:.2rem;}
</style>