Wechat mini program to generate two-dimensional code step pit

Wechat mini program to generate two-dimensional code step pit

First, the writing time is September 24, 2019, valid at this time

1. Because from the view of wechat open community, now (201909) small program chrysanthemum code is no experience version, so the chrysanthemum code generated by generating small program code is online environment, so when testing the mobile phone to identify this TWO-DIMENSIONAL code into the online small program, it is not convenient to test; Now we know the indirect test method, but ultimately need to go directly to the online environment test:

• Development tools, compilation mode selection through two-dimensional code compilation to test the generated chrysanthemum code
• Development tools, add compile mode, add parameters to debug, note that some interface parameters needencodeURIComponent
• Development tools, add compilation mode, through the preview or real machine debugging generated with time limit two-dimensional code, scan the two-dimensional code for testing

2. In the background management page of wechat public platform, on the upper right, tools > Generate applets can generate applets in the specified path, but the current version seems to have a hole with parameters, refer to the applets background “generate applets” how to take parameters

3. Generate the TWO-DIMENSIONAL code with specified parameters through the grass two-dimensional code, sesame two-dimensional code, but these third-party applications need authorization or small program secret key;

4. Small program TWO-DIMENSIONAL code back end and front end can generate, I here is the front generation method to generate small program code, the following content is the first method to generate two-dimensional code some introduction;

Second, the use ofGenerate small program codeInterface Preparation

1. According to the document, there are three interfaces to generate two-dimensional code, do not copy the document, each interface can be through HTTPS call and cloud call to obtain small program code, I introduce is through HTTPS call;

2. All of the above methods require the access_token parameter to make a background request. For example:

Request the address

POST https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN

3. generateaccess_token

• access_tokenIt’s changing, so it needs to go throughInterface invokes the credential interfaceTo obtain, this interface request is required for two key parametersAppIdandAppSecret

4. To obtainAppIdandAppSecret

• AppIdIn the small program management background can be seen, andAppSecretIs hidden and cannot be reset easily, resetting will cause the original background to use thisAppSecretAll need to be changed, andAppSecretGeneral background code will be written, so you can find the background colleagues to;

5. To obtainAppIdandAppSecretAfter the parameter is written through the front-end code in the HTTP request orpostManSuch tools, request the following address, to obtainWith agingtheAppSecret

Request the address

GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

Third, toGets the small program codeInterface call considerations

1. Because the generated TWO-DIMENSIONAL code is permanent effective, the main difference is the request interface generated two-dimensional code number is limited, but if only need to generate a small amount of two-dimensional code, used in other scenarios to scan two-dimensional code into the small program, three kinds of interface can;
2. Different interfaces call many pits of –.
3. The second method suggests referring to JS generate small program a page TWO-DIMENSIONAL code (generate small program two-dimensional code), pro test available (so post the article, later have time to arrange again ==). ;
4. The second method is to place the parameters insceneSo get this parameter, which is recognized when onloadoptions.scene;
5. Generated by the above link method, in the network of the small programpreviewYou can view the QR code, or transfer the picture information tobase64Format after inimgAdd a reference to the tag;

    success(res) {
        console.log(res)
        let src = wx.arrayBufferToBase64(res.data);  // Convert the data
    }
Copy the code

    <img src="data:image/png; base64,{{src}}"/>
Copy the code

In the above way, in the web page or small program to generate available download copy of the TWO-DIMENSIONAL code picture;