Product Background:

Product brother to develop a page in wechat to open the need to obtain the user’s current geographical location function, so they began to wechat JSSDK fly and shit story.

Technical Background:

Vue is the flagship, the router uses the history mode, plus wechat JSSDK package, to achieve positioning function.

Body:

Wx.config () : —- invalid signature () : invalid signature () : invalid signature () : invalid signature () : invalid signature () : invalid signature (

“Invalid signature” is used on ios. The current URL printed out is clearly the same as the signature URL. Why is there a signature problem? ?????

The page structure is as follows:

SPA:

  • A page
  • Page B

It is very simple, the whole application enters from A, then jumps to B, B needs to obtain the location, I just configure wechat JSSDK in B, and then encountered the aforementioned problem. Then!!!!! Here comes the key!! At one point during debugging, I simply refreshed the page from B and was done with ！！！！！ What the fuk? !!!!!

The reload from B is so smooth every time, and from A to B, every time was shot, so with this problem in mind, I came to this new world —- about the html5-history mode in the wechat browser

So, is that pickles? !!!!!

IOS: wechat IOS version, wechat Android version, each route switch, SPA URL will not change, the url parameter to initiate the signature request must be the current page URL is the original page URL

Android: wechat Android version, the URL of SPA will change every time the route is switched. The URL parameter for initiating the signature request must be the URL of the current page (not the one when entering the page initially).

Pit dad! Href (location. Href);

Solution:

EntryUrl (window.entryUrl) is used to retrieve the current page url. On Android, it is still used to retrieve the current page URL.

If (window.entryurl === ") {window.entryurl = location.hsp.split ('#')[0]}} isAndroid() ? location.href.split('#')[0] : window.entryUrlCopy the code

Off-topic: It seems that some people have similar problems when dealing with wechat sharing, you can study it carefully when you have time