Vue develops WeChat H5 and solves the problem of WeChat sharing signature failure

Regarding the use of history mode in Vue routing, when developing WeChat H5 page sharing, the signature is successful on Android, but the signature is invalid on IOS devices.

Problem description: During Vue development, the route uses History mode. When using WeChat sharing, everything is normal on WeChat developer tools. Everything is normal on Android. But!!! Signature errors are repeatedly reported on iOS.

The following are screenshots of real device testing. The black line is crossed out from my personal IOS device. It has always been a service account when shared. The custom content shared below is normal for Android sharing. Without further ado, here are the pictures!!!!

My code:

Requirement description: You need to enter the activity details page from the home page, and then share the details page content on the details page. Therefore, you need to pass parameters. Usually, Vue passes parameters through params, query, and string concatenation.

Problem analysis: The reason why the signature cannot be retrieved when sharing on Apple is that: Apple's browser mechanism in WeChat is different from that of Android, there are IOS cache issues, and IOS single-page optimization issues. In layman's terms, Android will refresh the current URL when sharing a page, but Apple will not. Apple comes in through the history record and will not refresh the URL, so the signature fails (the explanation here may not be detailed enough, you can go to Baidu).

Because the requirement is to only share the current page with customized content, it doesn’t matter if other pages are shared with public accounts, the main purpose is activities, so the following solution is used!!!!

Because vue's history will not refresh when sharing on IOS WeChat, but we need to do custom sharing. I have also read a lot on the Internet, such as the route judgment of beforeerouteEnter, or the prototype chain written in Vue.prototype.Wxshare(), etc., which seem too troublesome and not simple and crude enough, but these methods seem to be able to judge the custom content of each shared page. And I only need to share a specific single page at present, so when we jump from page A to page B (the page that needs to be shared), we don’t need vue’s history push to jump and pass parameters. We use! We use! We use! window.location.href="...." to jump and pass parameters. Important things are said three times!!!!

Use: window.location.href="...."!!! window.location.href="...."!!! window.location.href="...."!!!Below is the code!!!

The commented out part is that I used params to pass parameters at the beginning, so there will be the problem I mentioned above that the SPA page on IOS will not refresh the URL, but the native window.location.href can solve this problem!!! In this way, in the sub-page, we intercept the string in the URL during the create life cycle and intercept the required parameters, and assign them to data to use them. The following is the sub-page receiving the data interception string (the interception string here is directly copied and found. If you are in a hurry, you can write it yourself and intercept 3 strings at a time)!!!

In this way, our IOS sharing needs are realized, and there is no need to change the WeChat sharing configuration code above!! However, this method is only suitable for sharing specific pages. If users need to share different custom content for each page, they can go online to find other routing guards to judge, or use Hash mode to develop (I am not sure whether Hash mode is really possible. If you are interested, you can try it. Welcome to leave a message after trying it!!)

The following is a real machine test success!