Wechat JS-SDK documentation address

Necessary preparation

1. Wechat authenticated public number must be authenticated, not authenticated or expired. 2. A domain name must be registered. 3. AppId and signature required by the front-end page of a server must be transmitted from the background. The official default daemon has PHP, Python, Node, and Java versions

The configuration process

Binding domain

First, log in the wechat public platform, enter the “function Setting” of the “public Account setting”, and fill in the “JS interface security domain name” (the domain name used for publishing).

Get access_token

This part of the work belongs to background development, and the main function is to obtain the corresponding Access_token from wechat server by using the public accounts APPID and APPSECRET.

Front-end permission authentication configuration

Step 1: Import the JS file

Need to call in JS interface pages to introduce the following JS files, support (HTTPS) : http://res.wx.qq.com/open/js/jweixin-1.2.0.js

Step 2: Obtain the permission authentication configuration information from the background

Encapsulate permission validation configuration information functions

/** * wechat authorization js-sdk * @param {*} param0 */export const wxConfig = ($appId.$timestamp.$nonceStr.$signature) => {
    wx.config({
        debug: false// If debug mode is enabled, the return value of all API calls will be displayed in the client side alert. To view the passed parameters, you can open it in the PC side and the parameter information will pass throughlogPrint, print only on PC. The mobile terminal will pop up the relevant information. If the share information is incorrectly configured, you can open it to view the corresponding error message appId:$appId,
        timestamp: $timestamp,
        nonceStr: $nonceStr,
        signature: $signature, jsApiList: [// list of JS interfaces that need to be used, share the default ones, if there are other functions such as image uploading, need to add the corresponding API'scanQRCode'// Scan'checkJsApi'.'onMenuShareTimeline'// Share it on wechat moments'onMenuShareAppMessage'// Share with friends'onMenuShareQQ'// Share with QQ friends'onMenuShareWeibo'}); };Copy the code

Encapsulate the function of wechat scan

/** * set the scan code */exportConst wxScanQRCode = (successFun) => {wx.scanqrCode ({needResult: 1, default 0, scan result is handled by wechat, if 1, scanType: ["qrCode"."barCode"], // You can specify whether to scan the two-dimensional code or one-dimensional code, default both have success:function(res) { var result = res.resultStr; // If needResult is 1, successFun && successFun(result); }}); }Copy the code

Encapsulate wechat sharing function

/** * wechat share */export const wxShareConfig = ($imgUrl.$desc.$title.$link,successFun) => {
    wx.ready(function () {
        wx.onMenuShareAppMessage({
            "imgUrl": $imgUrl// Share graph. By default, relative path is used. Therefore, if absolute path is used, the "http://" protocol prefix must be in."desc" : $desc// Summary is not displayed if shared to moments."title" : $title// Share the card title"link": $link,// Share the link, here you can set the link to another page."success":function(Response){// A callback function to share successfullylet onMennuShareId = 1;
                successFun && successFun(response,onMennuShareId);
            },
            'cancel': function() {// callback function executed after user unshares}}); // Share to friends wx.onMenuShareTimeline({"imgUrl": $imgUrl// Share graph. By default, relative path is used. Therefore, if absolute path is used, the "http://" protocol prefix must be in."desc" : $desc// Summary is not displayed if shared to moments."title" : $title// Share the card title"link": $link,// Share the link, here you can set the link to another page."success":function(Response){// A callback function to share successfullylet onMennuShareId = 3;
                successFun && successFun(response,onMennuShareId);
            },
            'cancel': function() {// callback function executed after user unshares}}); // Share to moments}); };Copy the code

Step 3: Obtain the wechat SDK signature, call wechat to scan and share

Obtain wechat SDK signature, problems encountered in the development project

Note the following: 1. The URL used to obtain the signature must be the URL of the current page; otherwise, the signature fails. 2. If you send the current URL without parameters and then send it after encoding, it will fail when you get the signature for the first time in ios, and succeed when you get the signature after refreshing. There is no problem in Android; 3. If the current URL is sent with parameters, it is successful to obtain the signature without encoding. But if it is to share, if you want to adjust the wechat signature on a good page to share, it will fail to sign. In this case, you need to encode before sending the URL, and you can sign successfully for many times

Obtain the usage method of wechat SDK signature

Send the current page url / * * *, from the corresponding background appid, timestamp, nonceStr, signature * / callAxios ({method:'get',
            url: `${APP_CONFIG.getwechatSign}? url=${window.location.href}`,
        })
        .then((response) => {
            wxConfig(response.data.appId, response.data.timestamp, response.data.nonceStr, response.data.signature);
 })
Copy the code

Call the wechat sharing function encapsulated above on the page that needs to be shared

// wxShareConfig($imgUrl.$desc.$title.$link.function(response) {

 });
Copy the code

In the need to use a scan to call the above encapsulated wechat scan function

wxScanQRCode (function(response) {
	let index = response .lastIndexOf("\,"); response = response .substring(index + 1, response.length); // Response is the return value});Copy the code