Recently, I used React to do the project development of wechat H5. When configuring wechat sharing, I encountered a problem. It can be shared normally on Android phones, but it cannot be shared properly on ios. So I spent two hours solving the problem and researching the root cause of the problem…

Problem description

Sharing works on Android, but not on ios. However, if you refresh the current page where wechat sharing is configured (click on the top right corner of wechat), sharing can work on ios. And after entering this page through the route can also be shared normally!! If ios sharing fails, the debug dialog box of wechat sharing displays a wechat signature error

Solution 1:

After a while speechless, feeling incredibly still have this kind of operation. But in fact operation to this, I can be very clever to solve the problem, is the first time to enter the sharing function of the page, let the page automatically refresh once. So how do you make sure that you only refresh once, and not cause it to refresh every time you come in? The answer is very simple, in the cache to set the logo, I choose sessionStorage, because every time close wechat H5, sessionStorage will be automatically cleared, which is a good guarantee that I will open the project to enter the sharing page will refresh once

javascript
const _not_first_invite = sessionStorage.getItem('not_first_invite');
if ( !_not_first_invite ) {
    sessionStorage.setItem('not_first_invite'.'1');
    window.location.reload();
}
Copy the code

This is tricky, of course, but it doesn’t get to the bottom of the problem

Solution 2:

Before getting into the second method, my colleague told me that there was no problem with ios sharing when he used PHP. The first thing that came to my mind was the feature of traditional front-end page jumps, that is, every jump refreshes. Then I thought about my current project. It is a single-page application made by React. The jump of single-page application is driven by routes, such as React-Router and Vue-Router. I was still at a loss, so I used an ios and an Android for testing. Because obtaining wechat signature requires the front end to provide the URL of the current page, at this time I put forward a guess that the signature URL shared by wechat must be the URL of the first page refreshed after entering the project!! Because I tried, I clicked the “get” link in the upper right corner of ios wechat, which is not the link of my sharing page, but the link of entering the first page of the project for the first time. What I get and sign with window.location.href is the link to the current shared page. No!! The current link in the upper right corner is also the link to share the page, of course, I also get the same link, so it is no problem. Obviously, iOS needs to get the signature using the URL that enters the first page of the project!! I managed to save the URL that entered the first page of the project and get the signature, and sure enough, iOS was ready to share. But when I look at Android, I can’t share it, and there is no problem in the original. So is it not that Android reconfigits signature every time the route is switched? So what’s the phone type anyway

javascript
const current_url = iosMobile() ? sessionStorage.getItem('first_enter_url') : window.location.href;
Copy the code

Then there is no problem on both ends!!