微信公衆號開發調用掃碼功能

時間 2019-11-17

標籤微信公衆號開發調用功能简体版

原文原文鏈接

背景：須要在公衆號裏面切入掃碼功能javascript

前端代碼：html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>調用掃一掃</title>
    <style>

    </style>
</head>
<body>
<div>點我調用掃一掃</div>
</body>
<script src='https://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>
<script>
    var div=document.querySelector('div');
    div.onclick=function(){
        getWxConfig();
    }
    function getWxConfig(){

        $.ajax({
            "type" : "POST",
            "url" :"http://wx-proxy-feima.feima666.com/rest/auth/sign",
            "data" : {
                "url" : location.href.split('#')[0]
            },
            "dataType" : "json",
            "success" : function(result) {
                console.log('result',result)
                var timestamp = result.timestamp;;
                var noncestr = result.nonceStr;
                var signature = result.signature;
                var appId=result.appId;
                wx.config({
                    debug : false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
                    //                                debug : true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
                    appId : appId, // 必填，公衆號的惟一標識
                    timestamp : timestamp, // 必填，生成簽名的時間戳
                    nonceStr : noncestr, // 必填，生成簽名的隨機串
                    signature :signature,// 必填，簽名，見附錄1
                    jsApiList: [
                        'checkJsApi',
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'hideMenuItems',
                        'showMenuItems',
                        'hideAllNonBaseMenuItem',
                        'showAllNonBaseMenuItem',
                        'translateVoice',
                        'startRecord',
                        'stopRecord',
                        'onRecordEnd',
                        'playVoice',
                        'pauseVoice',
                        'stopVoice',
                        'uploadVoice',
                        'downloadVoice',
                        'chooseImage',
                        'previewImage',
                        'uploadImage',
                        'downloadImage',
                        'getNetworkType',
                        'openLocation',
                        'getLocation',
                        'hideOptionMenu',
                        'showOptionMenu',
                        'closeWindow',//關閉窗口
                        'scanQRCode',
                        'chooseWXPay',
                        'openProductSpecificView',
                        'addCard',
                        'chooseCard',
                        'openCard'
                    ] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
                });
                wx.ready(function() {
                    wx.scanQRCode({
                        needResult: 1, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果，
                        scanType: ["qrCode","barCode"], // 能夠指定掃二維碼仍是一維碼，默認兩者都有
                        success: function (res) {
                            console.log('res=========>',res);
                            var result = res.resultStr; // 當needResult 爲 1 時，掃碼返回的結果
                            alert(result)
                            sessionStorage.setItem('saomiao_result',result);
                            //其它網頁調用二維碼掃描結果：
                            //var result=sessionStorage.getItem('saomiao_result');
                        }
                    });
                });

            }
        });
    }
</script>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
</html>