解决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>