vue 위 챗 공유 리 셋 iOS 와 안 드 로 이 드 리 셋 오류 해결

제품 수요:위 챗 에서 수 동 으로 설정 해 야 할 공유 주소,이미지 와 내용 설명 을 공유 하고 사용자 가 공유 하도록 유도 하 며 위 챗 공유 성공 리 셋 에서 해당 하 는 작업 을 수행 합 니 다.
우선 프로젝트 에 위 챗 jsSDK 패 키 지 를 도입 한 다음 인 터 페 이 스 를 통 해 배경 서명 을 받 아야 합 니 다.

패 키 징 함수 위 챗 공유 필수 매개 변수 가 져 오기

jsApiList 에는 사용 해 야 할 위 챗 공유 js 인터페이스의 목록 이 적 혀 있 습 니 다.매개 변수 URL 은 기본적으로 location.href 입 니 다.즉,현재 페이지 의 URL 을 공유 합 니 다.
공유 할 페이지 에 패 키 징 함 수 를 도입 합 니 다.

그 다음 에 wxShare 방법 을 통 해 URL 과 설정 한 인 자 를 입력 합 니 다.link 인 자 는 공 유 된 링크 이 므 로 현재 페이지 에 대응 하 는 js 안전 도 메 인 이름과 일치 해 야 합 니 다.

...share Data 는 함수 내 에서 대상 을 전송 하여 할당 es6 를 재 구성 하 는 것 입 니 다.

하지만 테스트 과정 에서 발견:
1.같은 프로그램 에서 andriod 공유 가 정상 적 이 고 ios 공유 신문 의 서명 이 정확 하지 않 습 니 다.주요 원인 은 위 챗 의 ios 와 안 드 로 이 드 처리 방식 이 다 르 기 때 문 입 니 다.ios 는 현재 페이지 주 소 를 새로 고치 지 않 고 history 의 기록 주 소 를 사용 하기 때문에 공 유 된 링크 는 시스템 페이지 에 들 어 가 는 첫 번 째 링크 입 니 다.하위 페이지 로 넘 어 갈 때시스템 은 열 린 url 과 서명 한 url 이 일치 하지 않 아 서명 이 올 바 르 지 않 습 니 다.
2.단일 페이지 의 hash 모드 는 자체 적 으로\#번 호 를 가지 고 있 지만 공유 할 때\#번 뒤의 매개 변 수 를 무효 로 만 들 기 때문에 전달 하고 싶 은 매개 변 수 를 전달 할 수 없습니다.한 페이지 에\#번호 가 없 는 것 을 만 든 다음 에 매개 변 수 를 통일 적 으로 이 페이지 에 공유 한 다음 에 지정 한 vue 페이지 로 다시 설정 할 수 있 습 니 다.
해결 방법:배경 에 위 챗 서명 을 요청 할 때 배경 에 전 달 된 URL 의\#뒤의 매개 변 수 를 차단 합 니 다.배경 은 캡 처 된 URL 에 따라 서명 을 생 성하 면 안 드 로 이 드 와 iOS 가 리 셋 에 성공 한 문 제 를 공유 할 수 있 습 니 다.

위 챗 공유 중 오류 발생
vue.js 를 사용 하여 위 챗 H5 페이지 개발 을 진행 하고 개발 과정 에서 먼저 oAuth 인증 을 진행 합 니 다.이후 JSDK 를 사용 해 위 챗 공 유 를 진행한다.공유 할 때 사용자 정의 공유 인터페이스 가 호출 되 지 않 지만 새로 고침 후 정상적으로 표시 할 수 있 습 니 다.
다음 과 같다.
정상 입장 공유:

리 셋 후 공유:

Vue 와 위 챗 디 버 깅 환경의 문제 로 인해 몇 번 의 고통스러운 시 도 를 거 친 후에 우 리 는 하나의 현상 을 발견 했다.그것 은 바로 이때 Safari 를 사용 하여 열 면 다음 과 같은 현상 이 나타 날 것 이다.

이것 은 우리 가 oAuth 인증 을 사용 할 때 점프 하 는 중간 인터페이스(oauth 에서 리 셋 하 는 페이지)입 니 다.그러나 위 챗 디 버 깅 도 구 를 사용 할 때 표 시 된 url 은 정확 한 페이지 이 고 리 셋 페이지 에서 점프 하 는 페이지 입 니 다.
JSDK 를 사용 하여 위 챗 인증 을 할 때 현재 url 을 사용 하여 wxcofig 를 호출 해 야 한 다 는 것 을 알 고 있 습 니 다.vue 가 페이지 를 돌 릴 때 위 챗 브 라 우 저 는 현재 페이지 가 원래 페이지 에 있다 고 생각 하기 때문에 전 달 된 url 과 위 챗 이 당신 의 url 이 일치 하지 않 는 다 고 생각 하여 인증 오 류 를 초래 할 수 있 습 니 다.
그래서 wxconfig 에 url 을 전달 하려 고 할 때 점프 전 중간 결 과 를 사용 한 url(인증 에 전 달 된 url 과 Safari 로 열 린 url 이 일치 하 는 것 을 유지 하 는 동시에)결 과 를 사용 하면 된다.
그래,위 챗 이 vue 를 호 환 할 때의 구덩이 라 고 할 수 있 으 니 앞으로 빨리 튀 어 나 오 길 바래...
이상 의 vue 위 챗 공유 리 셋 iOS 와 안 드 로 이 드 리 셋 에 오류 가 발생 한 해결 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 가 되 고 많은 응원 부 탁 드 리 겠 습 니 다.