Calling WeChat's scanning two-dimensional code function in js

Calling WeChat's scanning two-dimensional code function in js

critical code

<html>
<head>
    <title>
        js Call wechat scan function test
    </title>
     <!--Citing WeChat JS library-->
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <!--Quote jQuery library-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>

<body>
    <input type="button" value="Scan" id="scanQRCode">
<script type="text/javascript">
    //Here [the url parameter must be the url to be used]
    $.get("Website for obtaining wechat authentication parameters?url=Current web address", function(data){
        var jsondata=$.parseJSON(data);
        wx.config({
            // When debugging mode is turned on, the return values of all the APIs called will be alert ed out on the client side. To view the parameters passed in, you can open them on the pc side, and the parameter information will be printed out through the log, which will only be printed on the pc side.
            debug: false,
            // Required, the only sign of official account.
            appId: jsondata.model.appId,
            // Required, generate signature timestamp
            timestamp: "" + jsondata.model.timestamp,
            // Required, generate random string of signature
            nonceStr: jsondata.model.nonceStr,
            // Required, signature
            signature: jsondata.model.signature,
            // Required, list of JS interfaces to be used
            jsApiList: ['checkJsApi', 'scanQRCode']
        });
    });
    wx.error(function (res) {
        alert("Wrong:" + res.errMsg);//The advantage of this place is that the configuration of wx.config is wrong, a pop-up window will pop up where the error is, and then query according to the wechat document.
    });

    wx.ready(function () {
        wx.checkJsApi({
            jsApiList: ['scanQRCode'],
            success: function (res) {

            }
        });

        //Click button to scan QR code
        document.querySelector('#scanQRCode').onclick = function () {
            wx.scanQRCode({
                needResult: 1, // The default value is 0. The scan result is processed by wechat. 1 will return the scan result directly,
                scanType: ["qrCode"], // You can specify whether to scan 2D code or 1D code, both of which are available by default
                success: function (res) {
                    var result = res.resultStr; // When needResult is 1, the result returned by code scanning
                    alert("Scan results:"+result);
                    window.location.href = result;//Because I have a link after scanning here, and then I jump to the page
                }
            });
        };

    });
</script>
</body>
</html>

matters needing attention:

  • "Get wechat authentication parameters"
    • The premise is that you can have your own wechat development qualification and get the right parameters
      1. The only sign of official account number
      2. Time stamp of signature
      3. Signature random string
  • Common mistakes
    • config:invalid signature
  • Solution
    • "Address of current webpage" ---- haha, it must be the wrong one you wrote. Here must be the address of the webpage you went to participate in
    • It's better to test it on the server

I don't have any other problems for the time being. I hope they will be helpful to those who are destined~~


Keywords: Javascript JQuery QRCode

Added by iupme on Fri, 03 Apr 2020 14:52:29 +0300

Popular Keywords

©2024 Programming VIP