微信公衆號 掃一掃

使用 weixin-java-tools 完成公衆端喚起微信掃一掃

若是沒有引入相關的jar 能夠查看以前的文章 點我

Java代碼 使用 wxMpService 很方便獲取一些微信須要的參數

@Autowired
    private WxMpService wxMpService;
    
    @GetMapping(path = "scannerQrcode")
    public Result scannerQrcode(HttpServletRequest request) {
        try {
            String url = request.getHeader("referer");
            WxJsapiSignature jsapiSignature = wxMpService.createJsapiSignature(url);
            return Result.success(jsapiSignature);
        } catch (Exception e) {
            e.printStackTrace();
            return Result.error("獲取微信配置失敗");
        }
    }

前端拿到對象後直接塞到配置中

// 這裏是加載事件，加載的時候取獲取參數
var data = {};
$.ajax({
            type : "get",
            url : globalUrl+"/wechatScanne/scannerQrcode",
            data : {},
            dataType : "json",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("token", $.cookie("token"));
            },
            crossDomain: true,
            success:function (res) {
                data=res.data;
            }
        })

//點擊事件時 填充config 而且調用掃一掃
        $("#item1 ul").on("tap",".border-orange",function(){

// 這裏是個坑 ，config 必定是在參數存在後才加載，否則會出錯。這裏把config 放在點擊事件裏 而獲取參數是在加載時完成的
            wx.config({
                debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
                appId: data.appId, // 必填，公衆號的惟一標識
                timestamp: data.timestamp, // 必填，生成簽名的時間戳
                nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
                signature: data.signature,// 必填，簽名，見附錄1
                jsApiList: [
                    'checkJsApi',
                    'startRecord',
                    'stopRecord',
                    'translateVoice',
                    'scanQRCode',// 微信掃一掃接口
                    'openCard'
                ] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
            });
            
            //這裏是喚醒掃一掃的代碼
            wx.ready(function() {
                wx.scanQRCode({
                    needResult : 1, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果，
                    scanType : [ "qrCode","barCode"], // 能夠指定掃二維碼仍是一維碼，默認兩者都有
                    success : function(res) {
                        var result = res.resultStr; 
                       // result 爲掃描結果 
                        alert(result);
                    },
                    error : function(){
                        //console.log('123');
                        alert("錯誤")
                    }
                });
            });

        })

掃一掃完成。
好記性不如爛筆頭記錄下代碼和坑...