The reason

When the wechat public account references the wechat SDK API, it is found that Android can normally use the API functions (photo taking, preview, positioning, etc.), but IOS always reports SDK invalid signature, which leads to call failure. Basically, it indicates that configuration abnormalities are caused by URL

Analysis of the

First of all, we know that the SDK initialization needs to take our current URL as the signature URL, then exchange the information to obtain wx.config, and call the WXSDK API again to verify whether the signature address is consistent with the signature address

However, the signature path of the call is the same as the current path, and there is no problem

It was later discovered that this phenomenon only occurs when there is a route switch: under SPA

Open A, then jump to B, the signature is implemented in B, can not be used

Open B directly for normal use

Then I found out the problem. In IOS, the router switching is always the browser history record, so the URL is actually the url entered at the beginning. Each signature can only use the URL of SPA opening for the first time, that is, when you open A for the first time and then jump to B, you can only use A to sign

To solve

Of course, there are many solutions. Around this idea, we can just use the difference between Ping An Zhuo and IOS SPA. Here is what I did (I used React).

Encapsulation examples:

class wxTools { url = ''; isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1; SetWxSignUrl () {if (this.url === "") {// Use # split because it is used for sharing. WeChat can add parameters influence the outcome of the url in the redirect this. Url = document. The location. The href. Split (' # ') [0]}} / / real interface to get the url for the signature, such as android is used directly, GetWxSignUrl () {return this.isandroid? document.location.href.split('#')[0] : this.url } } export default new wxTools();Copy the code

Entry initialization:

import wxTools from './wxTools';

useEffect(() => {
	wxTools.setWxSignUrl();
}, [])
Copy the code

Call examples:

import wxTools from './wxTools'; wxSignInit(){ const signUrl = wxTools.getWxSignUrl(); // TODO takes signUrl to sign action}Copy the code

done!!!