今天在测试微信扫一扫的时候,发现了一个很奇怪的问题。点击扫一扫的时候第一次总是打不开,再点一次就正常了。

后来仔细看代码才发现:获取js-sdk验证和打开扫一扫分成了两个方法。首先调用验证方法,然后调用打开扫一扫。但是居然先打印的扫一扫里面的信息。这就很奇怪了。后来查阅资料发现了:js是异步执行的,导致了还没有验证成功,就执行了打开扫一扫功能。

要想不改原代码,能治寻找其他的办法了,先执行验证方法,再执行扫一扫方法。async+await 可以实现。

由于在saoyisao方法里面调用了JSSDK方法,而JSSDK方法是异步的,所以导致了saoyisao方法整个成了异步的。

解决后的代码如下:

methods: {
        JSSDK: function() {     //获取微信js-sdk验证,这里需要设置为同步请求,验证成功后才可访问
            return new Promise((resolve, reject) => {
                let webUrl = location.href.split('#')[0];
                let params = {
                    'webUrl' : webUrl
                };
                this.$fetch('/WXJSSDK', params).then((data) => {
                    wx.config({
                        debug : false,
                        appId : data.weixin.appId,
                        timestamp : data.weixin.timestamp,
                        nonceStr : data.weixin.nonceStr,
                        signature : data.weixin.signature,
                        jsApiList : [ 'checkJsApi', 'scanQRCode','getLocation','openLocation' ]
                    });
                    this.isLoad = true;
                    resolve(this);
                });
            });
        },
        async saoyisao() {      //扫一扫功能
            if (!this.isLoad) {
                await this.JSSDK();
            }
            this.$dialog.toast({mes: '正在打开摄像头...', timeout: 1500});
            wx.scanQRCode({
                desc : 'scanQRCode desc',
                needResult : 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码,默认二者都有
                success : function(res) {// 回调时可以自己处理返回的结果
                    //console.table(res.needResults);
                },
                error : function(res) {
                    if (res.errMsg.indexOf('function_not_exist') > 0) {
                        this.$dialog.toast({ mes: '版本过低请升级',timeout: 1500,icon: 'error',});
                    }
                },
                cancle : function(res) {
                    this.$dialog.toast({ mes: '已拒绝访问摄像头',timeout: 1500,icon: 'error',});        
                }
            });
        }
        },

如果写的更规范一点,回调单独处理:

JSSDK: function() {     //获取微信js-sdk验证,这里需要设置为同步请求,验证成功后才可访问
            return new Promise((resolve, reject) => {
                let webUrl = location.href.split('#')[0];
                let params = {
                    'webUrl' : webUrl
                };
                this.$fetch('/WXJSSDK', params).then((data) => {
                    resolve(data); // 调用resolve方法时,会调用promise的then回调
                });
            }).then(data => {
                wx.config({
                    debug : false,
                    appId : data.weixin.appId,
                    timestamp : data.weixin.timestamp,
                    nonceStr : data.weixin.nonceStr,
                    signature : data.weixin.signature,
                    jsApiList : [ 'checkJsApi', 'scanQRCode','getLocation','openLocation' ]
                });
                this.isLoad = true;
            }).catch(res => {
                console.log('jssdk error');
            });
        }

 

Logo

前往低代码交流专区

更多推荐