Today, there is a new requirement in the project, which requires adding the function of WeChat scanning. After reading the official document, it is too simple, so just pull it up and start working. According to the document, [Official account binding JS interface security domain name ok] - [Check scan interface permissions ok] - [Project import jsapi ok] - [Call ok] - [Call ok] - [Call wx.config()scan wx.ready()failedwx.scanQRCode() ! 】.
Let me talk about the problem that was finally solved. The problem is JS接口安全域名不允许携带端口号that the backend deployed the project to another domain name with a port, which resulted in this problem.
The main text begins, according to the document flow, all the steps that should be written are written. When the button is called to call wx.scanQRCode()the method there is no response. The first reaction is to print out the output at each key position, and other methods can be entered. Only 扫一扫the callback method of is not called. The problem There it is. At the beginning, I was not sure whether it was the local environment that caused the scan to fail to take effect, so I communicated with the back-end colleagues to send the project to the test environment first, and the result was still the same.
At this point, I'm reminded of a parameter wx.config()in debug, set it to trueto get more details. After it is turned on, run it again, and scan the pop-up information scanQRCode:fail, the permission value is offline verifying. After Baidu roughly said the following solutions:
- Is the background setting of the official account correct?
安全域名 - Confirm that it is passed
wx.config()correctly , checkjsApiListwhether the corresponding JSAPI is added - If the JSAPI is called when the page is loaded, it must be written
wx.ready()in the callback of
The first one, regarding the security domain name, I even logged in to the backstage of the official account to have a look, but I only compared whether the security domain name is consistent with the interface domain name (the address of the front-end project should also be consistent with them!!!), after finding the same, I will Never thought about it again.
The second item, because the goal is to use the function of the WeChat official account, so debug directly on the WeChat developer tool, and you can see the detailed problem after turning on the debug mode: First, you can see that the api is indeed passed in jsApiList, but at the
end But it is lost, and it is clearly shown in the JSSDK permission obtained below that it has not been obtained . At one time, I thought that the official account did not have this interface permission, but I found that it did have permission. After that, I was stuck here for a long time, because the document is really simple, and Baidu didn’t see this problem (someone posted the same problem as me in the WeChat open community, but they couldn’t get jsapi permission, but he solved the problem with the signature related). I even followed the backend's advice and hard-coded the parameters on the page (useless of course).scanQRCodeconfigscanQRCodeconfig
The third one, this one doesn't really have much impact, but because there is no direction to solve it, I just dealt with it. At first, click the button to start the execution of [Adjustments, Query Signature and other parameters] - [Tune wx.config] - [Tune wx.ready] - [Tune wx.scanQRCode()], and then changed to other steps to be executed when the project is initialized, and the scan is executed separately when the button is clicked. Of course it didn't solve the problem.
In the end, the problem was discovered with the help of the supervisor. Record it here to avoid forgetting to step on the pit again next time.