iframe 페이지_javascript 기술에서 WeChat jssdk 오류 문제에 대한 솔루션

프로젝트 요구사항

WeChat에 상품을 추가하는 페이지에는 사진 업로드 기능이 있습니다. 업로드 시 iframe이 열립니다. 이 페이지는 WeChat jssdk의 사진 선택 인터페이스를 사용하여 선택한 사진을 로드합니다(여기서 WeChat은 weixin://xxxx 모양, 미리보기를 위해 img의 src에 직접 배치할 수 있음), 확대, 이동, 회전 및 기타 작업이 가능하며 확인 버튼을 클릭하여 편집된 사진을 서버로 전송하고 다른 이름으로 저장 사진

문제 발생

서브 페이지 기능 개발 완료 후, 메인 페이지에서 iframe을 통해 서브 페이지를 열면 위챗 jssdk 인터페이스의 이미지 선택 인터페이스를 호출할 수 없고, 다른 jssdk의 인터페이스도 호출할 수 없습니다. 제대로 작동할 수 없습니다. 다만, 서브페이지만 열어도 정상적으로 작동할 수 있으며, 메인페이지에서 위챗 공유도 정상입니다.

솔루션 아이디어

먼저 jssdk의 서명 정보가 메인 페이지와 서브 페이지에 동시에 주입되는 경우 충돌이 발생할 수 있나요? 테스트 후 이 가능성은 배제되었습니다. 인터넷 검색을 통해 일부 네티즌들이 이 게시물에서 나와 비슷한 문제를 언급했지만 해결책이 없다 http://www.weixin.com/thread-8022-1-1.html

테스트 후 메인 페이지에서 서명 검증이 가능하며, 서브 페이지에는 jssdk의 서명 정보가 추가되지 않습니다. 이미지 선택 인터페이스와 같은 jssdk 인터페이스를 호출해야 하는 경우 jssdk 함수 앞에 부모를 추가합니다. 즉, 부모 페이지의 이 함수를 호출하면 함수를 정상적으로 호출할 수 있습니다.

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

WeChat jssdk는 강력해 보이지만 버그가 많고 실제로 프로젝트에 사용될 때 면밀한 조사를 견딜 수 없다는 점은 언급할 가치가 있습니다. 이 문제는 해결되었지만 새로운 문제가 발생했습니다. 캔버스로 내보낸 이미지는 도메인을 넘을 수 없습니다. . . 결국 WeChat의 인터페이스는 요구 사항을 실현하는 데 사용되지 않았습니다.

위 내용은 편집자가 소개한 iframe 페이지의 WeChat jssdk 실패 문제에 대한 해결 방법입니다. 모든 분들께 도움이 되길 바랍니다!