WeChat 공개 계정 개발 시 페이지가 바로 이전 페이지로 돌아가도록 하는 대신, 브라우저 왼쪽 상단의 돌아가기 버튼과 관련된 페이지 로직을 가로채서 처리해야 하는 경우가 있습니다. 이전에는 아주 잘 구현되었습니다. 그런데 JD쇼핑 공식 계정에서 결과가 너무 좋은 걸 보고 직접 시도해보기 시작했어요. JD.com의 효과는 다음과 같습니다.
위 그림의 Jingdong 쇼핑 효과로 판단하면 검색을 클릭하면 검색 인터페이스가 표시되고 왼쪽 상단을 클릭하면 검색 인터페이스가 닫힐 뿐이지만 진행률 표시줄을 다시 읽는 것처럼 페이지가 돌아오지 않습니다. , 내 페이지에는 이 효과가 필요합니다. vue를 사용하여 이 프로세스의 데모를 만들어 보겠습니다.
전제: 위챗 좌측 상단의 반품 버튼은 가로채기가 불가능하지만, 반품 이벤트를 모니터링할 수 있습니다.
아이디어: 반환 이벤트를 실제로 가로채려면 먼저 현재 페이지의 window.history에 레코드를 추가할 수 있습니다(실제로는 기록 스택에 pushState 레코드를 추가하기만 하면 브라우저가 실제로 이 경로를 로드하지 않습니다). return을 클릭하면 return 이벤트를 수신하고 처리하려는 로직을 처리합니다. 어쨌든 WeChat은 return을 실행해야 합니다. 방금 추가한 레코드는 window.history에서 가져오고 이 경로는 현재 페이지 경로를 대체합니다. 참고: 이는 경로를 바꾸는 것일 뿐이며 경로 이름을 변경하는 것일 뿐 실제로 경로를 로드하지는 않습니다.
구현: 데모에서는 두 개의 vue 페이지(첫 번째 및 두 개)가 생성되고 첫 번째 페이지가 두 번째 페이지로 이동합니다. 그런 다음 두 번째 페이지에 마스크 레이어가 팝업되어 돌아오면 첫 번째 페이지로 돌아가지 않고 다시 뒤로 클릭하면 이전 페이지로 돌아갑니다.
효과는 다음과 같습니다.
관련 코드 설명:1 두 번째 페이지의 마운트된 메소드에 추가하고, 반환 이벤트를 수신할 메소드를 추가합니다. 돌아가기 버튼을 클릭하면 팝업 마스크가 숨겨집니다.
Mounted() { let that = this; // 반환 이벤트 리스너 추가 window.addEventListener(popstate, function(e) { that.isShowTestDiv = false; }, false },2. 마스킹 레이어를 모니터링하고 window.history(히스토리 스택)가 표시되면 해당 레코드를 추가합니다.
watch: { isShowTestDiv: function(newVal, oldVal) { if (newVal === true) { this.pushHistory(); } } } pushHistory() { // 기록 수정 var state = { title: , url: /two / / 이 URL은 브라우저에 표시되는 URL 주소가 변경되는 것을 방지하기 위해 임의로 입력할 수 있으며 페이지에는 아무런 영향을 미치지 않습니다.}; },3. 사용자가 마스크된 레이어에서 해당 작업을 클릭하여 마스크된 레이어를 닫는 경우 기록에서 추가한 기록을 수동으로 제거하고 Vue에서 경로를 다시 가져와야 합니다.
helloClick() { // 팝업 hello 마스크를 클릭합니다. this.isShowTestDiv = false.$router.back() // 기록에서 추가된 레코드를 제거합니다.데모 주소
gitHub:https://github.com/LiJinShi/wechat_back_vue
요약위는 에디터가 소개한 위챗 브라우저 좌측상단의 뒤로가기 버튼 차단 기능입니다. 문의사항이 있으시면 메시지를 남겨주시면 에디터가 답변해드리겠습니다. 시간. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!