Vue h5 调用微信扫码接口

需求

调用微信扫码接口，然后获取扫码返回结果的url中的参数，携参跳转到其他页面

1. 安装微信js-sdk

通过yarn安装 yarn add weixin-js-sdk
通过npm安装 npm i weixin-js-sdk

2. 引用

import wx from 'weixin-js-sdk'

3. 代码

methods:{
	sysClick(val){
        localStorage.setItem("clickType", val); // 产品需求的问题，多个按钮点击都会调用扫码，这里记录一下点击的是哪个按钮
        
        // 判断是否是微信浏览器
        function isWeiXin(){
	　　　　var ua = window.navigator.userAgent.toLowerCase();
	　　　　if(ua.match(/MicroMessenger/i) == 'micromessenger'){
	　　　　　　return true;
	　　　　}
	　　　　else{
	　　　　　　return false;
	　　　　}
	　　}
        
        
        // 兼容安卓和ios
        if (/iphone|ipad|ipod/.test(ua)) {
            this.newUrl = window.location.href.split('#')[0];
        }else if(/android/.test(ua)){
            this.newUrl = window.location.href;
        }
        
        //这里传给后台请求接口的参数url一定是去参的本网址，请求后端接口换取signature
        getConfigParameter({
            url: "https://m.baidu.com/index.html" // 我这里是写死的，正常要按上边那样对url进行处理，取 去参的this.newUrl
        }).then((res)=>{
            wx.config({
                // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                debug: false,
                // 必填，公众号的唯一标识
                appId: res.data.appId,
                // 必填，生成签名的时间戳
                timestamp: "" + res.data.timestamp,
                // 必填，生成签名的随机串
                nonceStr: "" + res.data.nonceStr,
                // 必填，签名
                signature: res.data.signature,
                // 必填，需要使用的JS接口列表，所有JS接口列表
                jsApiList: ['checkJsApi', 'scanQRCode'] 
            });
            wx.error(function (res) {
                // alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
            });
            wx.ready(function () { // 通过ready接口处理成功验证
                wx.checkJsApi({ // 检测接口可用性
                    jsApiList: ['scanQRCode'],
                    success: function (res) {
                        wx.scanQRCode({
                            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                            scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
                            success: function (res) {
                                var result = res.resultStr; // 当needResult 为 1 时，如果二维码的内容是url，这里会返回url
                                window.location.href = "https://m.baidu.com/index.html#/record?" + result.split("?")[1] // 跳转到页面
                        		// 扫码回调是异步的，这里代码写多了，后边是来不及执行的
                            },
                            error: function(res) {
                            }
                        });
                    }
                });
            });
        });
    },
}

遇到的问题总结

调试一定要在手机上线上进行，本地不可以
请求获取微信配置信息时，传给后台的url一定是去参的本网址,且不可以带 #
微信扫码成功后的回调函数式异步的！！！所以如果回调函数代码内容多了的话，会还没来得及执行完就又跳回了上一页！
我这里就遇到了这个情况，因为产品需求，要根据点击的不同按钮，判断扫码成功后跳到哪个页面。最初在扫码成功的回调函数里写的，结果发现只执行了前两行代码，后边的还没来得及执行，就自动跳回了上一页，这就很烦。最后只好直接让它携参跳到一个页，然后在那个页再获取点击的按钮的数据，进行判断跳转到真正要跳转的页面。

相关代码

created(){
	this.judge();
},
methods:{
	// 扫码返回后执行判断
    judge() {
        var clickType = localStorage.getItem("clickType");
        if(clickType==3 && this.user_type == 2) {  // 企业-确认收货
            localStorage.removeItem("clickType");
            this.$router.replace({
                path:'/confirmReceipt?id=' + this.id,
            })
        } else if(clickType==2 && this.user_type == 1) {  // 商家-扫码查询商品
            localStorage.removeItem("clickType");
            this.$router.replace({
                path:'/productShowB?id=' + this.id,
            })
        }else if(clickType==4 && this.user_type == 2) {  // 企业-物资信息录入
            localStorage.removeItem("clickType");
            this.$router.replace({
                path:'/product?id=' + this.id,
            })
        } else if(clickType==5 && this.user_type == 2) {  // 企业-扫码查询商品
            localStorage.removeItem("clickType");
            this.$router.replace({
                path:'/productShow?id=' + this.id,
            })
        }
    },
}

Vue h5 调用微信扫码接口

Guess you like