WeChat H5 development wx.config authorization invalid signature

During the development of WeChat H5 (official account), wx.config encountered a failure. The reason is recorded here, and I will also remind you.

Open the debug option of wx.config, and a box will pop up to prompt the configuration result after configuration. If it prompts errMsg: config ok, this is correct. Some colleagues think that errMsg is wrong, but it is not correct. The key is to see the prompts below.

1. Generally speaking, " invalid signature " occurs in many situations, and there are many factors that will affect it. The official website also gives a solution. Refer to the official website

Overview | WeChat Open Documentation

I will summarize with my own understanding:

1. You need to set the js interface security domain name under the developer account of the official account, just fill in the domain name, without http:// or https://.
2. The best way to generate the signature is to provide an interface by the background, and the url parameter needs to be passed. If the front-end routing is in hash mode, you need to pass the content before "#". If it is in history mode, you can pass the full path of the current path. encodeURIComponent(location.href.split('#')[0]) will suffice. Note that if the front-end transcodes, the interface must be decoded. wx.config can be executed only once after entering the system, and there is no need to configure each page.
3. Individual attributes in wx.config should pay attention to capitalization, such as nonceStr, timestamp, etc.
4. Make sure that the url in 2 is obtained dynamically. The official website is also mentioned in [6]. When a colleague configures everything correctly, even if the config url is fixed and hard-coded, the configuration will fail.
5. For functions such as operating menu items, you must run the check in the test environment, not in the development environment, and you must send the test address to the (casual) official account, and you can only see it by clicking the address test under the official account Effect.
6. If all the above are correct, try to verify whether the signature is correct, and check whether the logic of the interface is wrong.

2. In the case of " permission denied ", it is best to check whether the jsApiList parameter under config is consistent with the api name provided by the official website.

If the permission denied is prompted after invalid signature, it means that the configuration has not been successful, and you can refer to the idea in [1] to check.