Front-end JS calls WeChat scan QR code, front-end js calls Scan

The front-end JS calls scan the QR code, and the front-end js calls

Source:

I recently created a project, H5 page, which is opened in the middle. There is a function in it, that is, click the button to pop up the QR code scan.

Project:

There is no graph at the moment, and I will add it again next time. Click the button on the page to pop up the QR code scanning window.

I am only responsible for the front-end, so only the front-end code is available. The back-end code is java.

HTML code (as follows): I am using the jQuery WeUI framework for rapid development (jQuery WeUI address: http://jqweui.com/), so a tag has a style

1 <a class = "weui-btn weui-btn_primary submit-btn" id = "scanQRCode" type = "button"> scan </a>

JS Code (as shown below): the code can be directly copied and copied, and the red font can be changed according to your project requirements. There is a disadvantage in this writing. After loading the page, it takes several seconds for the button to be effective. Because you need to request data to configure wx. config. However, you can avoid this disadvantage in the background. That is, the background requests the data. After the configuration is successful, we will jump into this page.

<Script src = ".. /.. /.. /js/plugins/jquery-2.1.4/jquery. min. js "> </script> // The following is the JS-SDK file, must introduce <script src = ".. /.. /.. /js/plugins/jweixin-1.0.0.js "> </script> <script> $. ajax ({type: "post", url: "", // enter the request address data :{}, success: function (result) {wx. config ({// enable the debugging mode. The returned values of all called APIs are displayed in the alert client. To view the input parameters, you can open them on the pc side, the parameter information is output through log and printed only on the pc end. Debug: false, // required. The unique ID of the public account, appId: result. appId, // required. The timestamp for generating the signature: "" + result. timestamp, // required. The random string nonceStr: result. noncestr, // required, signature. For details, see Appendix 1 signature: result. signature, // required. List of JS interfaces to be used. For the list of all JS interfaces, see Appendix 2 jsApiList: ['checkjsapi ', 'scanqrcode']}) ;}}) wx. error (function (res) {alert ("error:" + res. errMsg); // the benefit of this place is wx. config configuration error. The window will pop up where the error occurs, and then you can query it according to the document. }); Wx. ready (function () {wx. checkJsApi ({jsApiList: ['scanqrcode'], success: function (res) {}}); // click the button to scan the QR code document. querySelector ('# scanQRCode '). onclick = function () {wx. scanQRCode ({needResult: 1, // The default value is 0. The scan result is processed. 1 directly returns the scan result. scanType: ["qrCode"], // you can specify whether to scan the QR code or a QR code. By default, both of them have success: function (res) {var result = res. resultStr; // when the needResult is 1, the return result window is scanned. location. href = result; // because I have a link after scanning, and then jump to this page}) ;}}); </script>

 

Error: Because ajax is requested for page loading, the wx. config configuration error will pop up. Find the corresponding solution based on the error, which is generally caused by incorrect background request parameters. (Link will be attached at the end)

 

 

Door: https://mp.weixin.qq.com/wiki? T = resource/res_main & id = mp1421141115

For more information, see the above link. Official documents are the most reliable. If you do not check it, copy and paste the above Code to achieve the effect.

Generally, the following figure shows the page: