Current location - Quotes Website - Signature design - Js handles wechat sharing configuration
Js handles wechat sharing configuration
Sort out the relevant configuration of sharing WeChat through h5.

Log in to WeChat official account, get AppID, configure whitelist, and then configure JS interface security domain name.

After logging into the official WeChat account, select: Development => Basic Configuration, and just copy the developer ID(AppID) directly:

Pay attention to using public IP.

Select from the menu bar on the left: Settings => WeChat official account settings:

Web page authorization is mainly used to obtain WeChat openId. You can skip this step if you only use the sharing operation.

Introduction to webpage authorization

The general steps are:

After configuring the previous AppId, whitelist and secure domain name, start to process the authorization of web pages.

The content of web page authorization is mainly that the back end needs to deal with more content, and the front end is still very simple. Just jump to the WeChat link. Why take this step? Because some operations, such as WeChat payment, playing WeChat recording, obtaining WeChat address, WeChat card coupons, goods, stores and many other functions, must be summarized and opened in WeChat browser, so it is necessary to jump to WeChat browser and WeChat link to handle the follow-up operations. When configuring, the link will not take effect until it is opened in WeChat browser, otherwise it will prompt:

The link is as follows:

/connect/oauth2/authorize? Appid = {$ appid} & redirect _ uri = {$ URL} & code & ampscope = snsapi _ base # wechat _ redirect.

Parameter decomposition

You can see that there are two variables to be filled in, one is the AppId returned earlier, and the other is the url. What needs to be written is the url under the domain name corresponding to the configuration domain name, which needs to be coded.

After obtaining the above complete link, you can authorize the webpage through window.location.href = ${url}. After the authorization is successful, the page will be redirected to the url page set by itself, and then there will be a code value on the connection. Take it out:

Just pass the obtained code value to the back end, and it depends on the specific situation to decide whether the front end uses openId. If it is not necessary, it will not be stored in the front end or encrypted in the back end and transmitted to the front end for use.

It is roughly divided into five steps:

It has been configured in step 1.3.

The page that needs to call the JS interface introduces the following JS file:/open/js/jweixin-1.6.0.js.

Remarks: AMD/CMD standard module loading mode is supported.

Configuration requires the following parameters:

So where do these parameters come from? Don't worry about it, or leave it to the back end, and the back end will return the timestamp, random string and signature, and the rest can be configured by itself.

Getting through to the back end requires little interaction, and the link address (window.location.href) can be transmitted to the back end.

So you have all the above parameters except the last one. The last jsApiList is the write shared interface. If we want to share it with friends, QQ and Tencent Weibo, then write:

It can be found that we have actually configured an additional checkJsApi, which is a judgment configuration to judge whether the current client version supports the specified JS interface.

Signature algorithm

List of all JS interfaces

Then, you can write the shared information configuration. Configuration information is usually processed through wx.ready:

For example, if we want to share it with friends, the configuration is as follows:

Note: Do not induce sharing.

Similarly, information related to failures is usually handled through wx.

In fact, WeChat sharing (geographic location, scanning, card coupons and other WeChat interfaces) is configured through the above steps, which can be extrapolated. In the face of different needs, more complicated operations can be carried out by developing documents through WeChat.