Background: a recent small program project has such a requirement: after entering my home page, if the user has not paid attention to our public number, then show a guide to the public number component, click to jump to a public number article, guide the user to pay attention to the user to hide the component.

Method 1 (front and back end participation) : Due to a little knowledge of wechat’s UnionID mechanism (knowing that users have a unified UnionID in different applications under the same open platform), the initial thinking is as follows:

  1. In the small program and public number bound to the same wechat development platform;
  2. When the user logs on in the small program, the back end uses code to get the user’s unionID at the same time;
  3. The back end obtains the user basic information through the interface of the public number (obtains the user basic information), uses the unionID to query the user information, where the SUBSCRIBE field represents whether the user has paid attention to the public number. Provide interface to the front end for inquiry;
  4. The front end calls this interface after going to my home page to determine whether to show the bootstring-focused component

The result was soon confronted by the reality: in the third step, the user information of the public account can only be queried through the openID of the public account, not through unionID, and the unionID can not reverse the openID, which is embarrassing.

So we had to first try to get the openID of the user’s public account. How do you do that? Nature is like public number web development, through wechat web page authorization to obtain (wechat web page authorization). Since our purpose is only to obtain the user’s openID, scope is snSAPi_base. This authorization mode is silent. But web authorization requires providing a Web page to receive authorization callback parameters, which means we have to jump from a widget to a web page.

So what is the jump time? In order to reduce the user’s perception, I use the method is to the page as a springboard page, before the user jumps to the public number to go to the springboard page, authorized back to report to the server, and then jump to the public number article page (in fact, the beginning of the plan to open the public number article through iframe label in the page, It turns out that because the anti-theft mechanism of wechat can not be realized, we have to redirect it). The process is as follows:

  1. First deploy a blank springboard page to receive wechat web page authorization back and report to the server, and then redirect to the original need to jump to the public account article page;
  2. Configure the authorization callback domain (that is, the blank page deployed in the first step) and the server IP whitelist in the public account management background, and configure the domain name of the page as the small program service domain name;
  3. Guide the attention on it in the small program components, first through the webview component open WeChat provide authorization to web link (remember to through the state parameters, the user’s uid uid and the mapping relationship between the openid) to create a user, the link will automatically and redirected to our page deployment of springboard, after reporting authorization back to participate in the springboard page, Redirect to the official account article page;
  4. After the code reported by the backend obtains the OpenID, it binds the OpenID to the user UID, and provides an interface for querying the user information of the public account, so as to know whether the user has paid attention to the public hobby (SUBSCRIBE field).
  5. The front end calls this interface after returning to my home page to determine whether the user has paid attention to it, OK√

The springboard page code is as follows:

    <script>
        const href = window.location.href
        let code = getUrlKey('code', href)
        let state = JSON.parse(getUrlKey('state'The href))// Reports the authorization callback parameter and redirects the page
        callback().then(() = >{
        	window.location.replace('Article Page of official Account'))// Get the authorization callback parameter
        function getUrlKey(key, href) {
            return decodeURIComponent((new RegExp("[? | &]" + key + "= (/ ^ &; +? (& # | |; | $)").exec(href) || [, ""[])1]
                .replace(/\+/g."% 20")) || null
        }

    </script>
Copy the code

The benefit of this way is less impact on the user experience, in the eyes of the user just jump public number article load time a little longer, perception is not big. However, the disadvantage is also obvious, that is, the user must go through a springboard page to get openID. If the user follows the public account from other channels, he will still show the guide to follow the component after entering the small program, because we do not know his openID at this time, so we cannot judge whether he has followed it.

But at this time, our product students are not willing to, asked us to find a way to optimize. So in order to solve this problem, we use the second method: by the back end to maintain a public account has been concerned about the user table, through unionID query whether the user is in the table.

Mode 2 (back-end only) : Details are as follows:

  1. In the small program and public number bound to the same wechat development platform;
  2. The backend pulls the list of concerned users of the public account (to obtain the list of users), obtains the unionID of each user, and establishes the table of concerned users;
  3. The back-end monitors the following/unfollowing events (following/unfollowing events) of public account users and updates the table;
  4. When the user logs in and registers in the small program, the back end gets the user’s unionID with code and saves it;
  5. When the front end requests query, the back end looks up the table according to the unionID of the user who initiates the request to judge whether the user has been concerned.

If the public account is new and has no followers, you can omit the second step. Compared with the first method, this method does not require users to go through the springboard page, and the public account concerned from other channels can also be queried, and does not require front-end participation, the back-end can be realized, the disadvantage is a little more troublesome, I suggest front-end students to use this method. (Laughter)

END

The first time to write an article to share, code word is not easy, please light spray 😛