Solutions to the problem of WeChat jssdk failure in iframe pages_javascript skills

Project requirements

The page for adding lots on WeChat has a photo upload function. When uploading, an iframe is opened. The page uses canvas to load the pictures selected using the picture selection interface of WeChat jssdk (Here WeChat will return a localid in the shape of weixin://xxxx , can be directly placed in the src of img for preview), you can zoom in, move, rotate and other operations, click the OK button to send the edited picture to the server and save it as a picture

Problems encountered

After the development of the sub-page function is completed, if the sub-page is opened through an iframe on the main page, the image selection interface in the WeChat jssdk interface cannot be called, and the interfaces in other jssdk also cannot work properly. However, opening the sub-page alone can work normally, and WeChat sharing on the main page is also normal.

Solution ideas

First of all, the signature information of jssdk is injected into the main page and sub-page at the same time. Is there a possible conflict? After testing, this possibility has been ruled out. Through Internet searches, some netizens described problems similar to mine in this post, but there is no solution http://www.weixin.com/thread-8022-1-1.html

After testing, signature verification can be performed on the main page, and the signature information of jssdk is not added to the sub-page. When you need to call the jssdk interface, such as the image selection interface, add parent. before the jssdk function, that is, call this function of the parent page. After testing, the function can be called normally.

parent.wx.chooseImage({
success: function (res) {
//upload_success(res.localIds);
}

It is worth mentioning that WeChat jssdk seems to be powerful, but it has many bugs and cannot withstand scrutiny when it is actually used in projects. Although this problem has been solved, a new problem has arisen. Canvas exported images cannot cross domains. . . In the end, WeChat's interface was not used to realize the needs.

The above is the solution to the problem of WeChat jssdk failure in iframe pages introduced by the editor. I hope it will be helpful to everyone!