解决Vue调用微信扫描不能连续扫描的问题

野性酷女 2022-05-28 10:44 407阅读 0赞

# 解决Vue调用微信扫描不能连续扫描的问题 #

### 问题描述 ###

*  在Vue中调用微信的扫码功能，第一次请求可以正常访问，但是在该界面再次访问时，回调函数不能执行

### 问题核心代码 ###

#  #

<template>
        <div>
            <div style="padding-left:40px;padding-right:40px;padding-top:8px;padding-bottom:8px">
                <mt-button type="primary" style="width:100%" v-on:click="addUserBtn(user.mall.id)">添加店员</mt-button>
            </div>
            <mt-popup
                v-model="popupAddUser"
                popup-transition="popup-fade"
                modal=true
                @touchmove.prevent>
                <div v-bind:style="getPopupCssSize()">
                    <div style="padding:16px">
                        <h2>添加</h2>
                        <mt-button type="primary" style="margin-top:16px;width:100%" v-on:click="clickAddUser(select_mall_id)">扫一扫</mt-button>
                    </div>
                </div>
            </mt-popup>
        </div>
    </template>
    
    <script>
        import URL from '../../../url/url.js'
        import wx from 'weixin-js-sdk'
        import $ from 'jquery'
    
    export default {
        data() {
            return {
                popupAddUser:false,
                user_list:null,
                select_mall_id:-1
            };
        },
    
        components: {
        },
    
        methods: {
            back: function(){
                this.$router.go(-1)
            },
            addUserBtn: function(mall_id){
                console.log(mall_id);
                this.select_mall_id = mall_id;
                this.popupAddUser = true;
            },    
            clickAddUser: function(mall_id){
            var _this = this;
            //这里【url参数一定是去参的本网址】
            $.get("访问的网址?本页所在的地址", function(data){
            var jsondata=$.parseJSON(data);
            wx.config({
                    // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    debug: false,
                    // 必填，公众号的唯一标识
                    appId: jsondata.model.appId,
                    // 必填，生成签名的时间戳
                    timestamp: "" + jsondata.model.timestamp,
                    // 必填，生成签名的随机串
                    nonceStr: jsondata.model.nonceStr,
                    // 必填，签名
                    signature: jsondata.model.signature,
                    // 必填，需要使用的JS接口列表
                    jsApiList: ['checkJsApi', 'scanQRCode']
                });
            });
            wx.error(function (res) {
                alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
            });
    
            wx.ready(function () {
                wx.checkJsApi({
                    jsApiList: ['scanQRCode'],
                    success: function (res) {
    
                    }
                });
                wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: function (res) {
                        alert("success！");
                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        var token_add_user=JSON.parse(result).token;
                        //查询token对应的用户的id
                        var _this2=_this;
                        var params_temp = 
                        {
                            token:token_add_user,
                            mall_id: _this.select_mall_id
                        }
                        new _this.$http().post(
                            URL.API.add_new_mall_user,
                            params_temp,
                            function(data){
                                if(data.code == 200){
                                        if(data.code == 200){
                                            alert("添加成功"); 
                                            _this2.getMyUsers();
                                            _this2.location.reload();
                                        }else{
                                            alert("添加失败");
                                        }
                                }else{
                                    alert("查找失败");
                                    return;
                                }
                            }
                        );
                    }
                });
    
            }); 
                this.popupAddUser = false;
            },
            transformRequest: function (data) {
                let ret = ''
                for (let it in data) {
                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                }
                return ret
            },
    
            getPopupCssSize: function() {
                var w = document.documentElement.clientWidth || document.body.clientWidth;
                var h = document.documentElement.clientHeight || document.body.clientHeight;
    
                var popup_w = w * 0.9;
                var popup_h = h * 0.9;
    
                var css = "width:" + popup_w + "px;";
                //css += "height:" + popup_h + "px;";
                css += "overflow-y: scroll";
                return css;
            },
    
            getMyUsers: function(){
                var _this = this;
                var params = 
                {
                    token:sessionStorage.getItem("BIG_MALL_SESSION_ID")
                }
                new this.$http().get(
                    URL.API.get_my_user,
                    params,
                    function(data){
                        console.log(data);
                        if(data.code == 200){
                            _this.user_list = data.model;
                        }
                    }
                );
            }
        },
    
        mounted: function(){
            this.getMyUsers();
            //Config
            wx.ready(
                function(){
    
                }
            );
        },
    }
    </script>
    
    <style>
    </style>

### 问题原因 ###

*  微信的配置：应该是放到全局配置（即配置的工作只进行一次），再次点击时，只需要调用ready函数即可

### 问题解决思路 ###

*  将微信的配置（config）放到挂载函数中，只调用一次，按钮点击只调用ready函数即可

### 问题解决后的代码 ###

#  #

<template>
        <div>
            <div style="padding-left:40px;padding-right:40px;padding-top:8px;padding-bottom:8px">
                <mt-button type="primary" style="width:100%" v-on:click="addUserBtn(user.mall.id)">添加</mt-button>
            </div>
            <mt-popup
                v-model="popupAddUser"
                popup-transition="popup-fade"
                modal=true
                @touchmove.prevent>
                <div v-bind:style="getPopupCssSize()">
                    <div style="padding:16px">
                        <h2>添加</h2>
                        <mt-button type="primary" style="margin-top:16px;width:100%" v-on:click="clickAddUser(select_mall_id)">扫一扫</mt-button>
                    </div>
                </div>
            </mt-popup>
        </div>
    </template>
    
    <script>
        import URL from '../../../url/url.js'
        import wx from 'weixin-js-sdk'
        import $ from 'jquery'
    
    export default {
        data() {
            return {
                popupAddUser:false,
                user_list:null,
                select_mall_id:-1
            };
        },
    
        components: {
        },
    
        methods: {
            back: function(){
                this.$router.go(-1)
            },
            addUserBtn: function(mall_id){
                console.log(mall_id);
                this.select_mall_id = mall_id;
                this.popupAddUser = true;
            }, 
            initWX:function(){
                //这里【url参数一定是去参的本网址】
                $.get("目标地址?本网页所在地址", function(data){
                var jsondata=$.parseJSON(data);
                wx.config({
                        // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        debug: false,
                        // 必填，公众号的唯一标识
                        appId: jsondata.model.appId,
                        // 必填，生成签名的时间戳
                        timestamp: "" + jsondata.model.timestamp,
                        // 必填，生成签名的随机串
                        nonceStr: jsondata.model.nonceStr,
                        // 必填，签名
                        signature: jsondata.model.signature,
                        // 必填，需要使用的JS接口列表
                        jsApiList: ['checkJsApi', 'scanQRCode']
                    });
                });
    
                wx.error(function (res) {
                    alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
                });
    
    
    
            },
            clickAddUser: function(mall_id){
            var _this = this;
    
            wx.ready(function () {
                wx.checkJsApi({
                    jsApiList: ['scanQRCode'],
                    success: function (res) {
    
                    }
                });
                wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: function (res) {
                        alert("success！");
                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        var token_add_user=JSON.parse(result).token;
                        //查询token对应的用户的id
                        var _this2=_this;
                        var params_temp = 
                        {
                            token:token_add_user,
                            mall_id: _this.select_mall_id
                        }
                        new _this.$http().post(
                            URL.API.add_new_mall_user,
                            params_temp,
                            function(data){
                                if(data.code == 200){
                                        if(data.code == 200){
                                            alert(data.obj.msg); 
                                            _this.getMyUsers();
                                        }else{
                                            alert("添加失败");
                                        }
                                }else{
                                    alert("查找失败");
                                    return;
                                }
                            }
                        );
                    }
                });
    
            }); 
                this.popupAddUser = false;
            },
            transformRequest: function (data) {
                let ret = ''
                for (let it in data) {
                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                }
                return ret
            },
    
            getPopupCssSize: function() {
                var w = document.documentElement.clientWidth || document.body.clientWidth;
                var h = document.documentElement.clientHeight || document.body.clientHeight;
    
                var popup_w = w * 0.9;
                var popup_h = h * 0.9;
    
                var css = "width:" + popup_w + "px;";
                //css += "height:" + popup_h + "px;";
                css += "overflow-y: scroll";
                return css;
            },
    
            getMyUsers: function(){
                var _this = this;
                var params = 
                {
                    token:sessionStorage.getItem("BIG_MALL_SESSION_ID")
                }
                new this.$http().get(
                    URL.API.get_my_user,
                    params,
                    function(data){
                        console.log(data);
                        if(data.code == 200){
                            _this.user_list = data.model;
                        }
                    }
                );
            }
        },
    
        mounted: function(){
            this.getMyUsers();
            this.initWX();
        },
    }
    </script>
    
    <style>
    </style>