Solve the problem that Vue cannot scan continuously when calling WeChat scan

Solve the problem that Vue cannot scan continuously when calling WeChat scan

Problem Description

• When calling WeChat's scan code function in Vue, the first request can be accessed normally, but when the interface is accessed again, the callback function cannot be executed

problem core code

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

problem causes

• WeChat configuration: It should be placed in the global configuration (that is, the configuration work is only performed once), and when you click again, you only need to call the ready function.

problem solving ideas

• Put the WeChat configuration (config) into the mount function, call it only once, and only call the ready function when the button is clicked

Problem solved code

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