모바일 H5 개발에서 직면한 문제점과 해결책

이 기사의 내용은 모바일 H5 개발에서 발생하는 문제와 해결 방법에 관한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

WeChat 공유 서명 오류 잘못된 서명

Vue 단일 페이지 애플리케이션 기록 모드 WeChat 공유 시 항상 서명 오류 잘못된 서명이 표시됩니다

WeChat 공식 웹사이트 문서에 따르면 jssdk가 도입되었으며 js 보안 도메인 이름이 올바르게 구성되었습니다. 백그라운드 개발자가 생성한 서명도 WeChat 서명 도구로 확인되었지만 프런트엔드 사용자 정의 공유에서 계속 서명 오류가 보고되며 공유를 사용자 정의할 수 있는 방법이 없습니다. 기본 구성에는 문제가 없으며 서명도 WeChat 서명 도구 확인을 통과한 경우 프런트 엔드에서 액세스한 URL일 수 있으며 백그라운드에서 생성된 서명 URL의 불일치로 인한 서명 오류일 수 있습니다

만약 프런트 엔드는 ajax를 통해 백엔드에 URL을 전달하여 서명을 얻은 다음 현재 페이지의 '#' 해시 부분 링크를 제거하고 encodeURIComponent

let url = location.href.split('#')[0]
encodeURIComponent(url)

일반적으로 이런 방식으로 WeChat 사용자 정의 공유가 가능합니다. 인식했지만 단일 페이지 애플리케이션 라우팅이 전환된 후에도 IOS 측에서는 여전히 서명 오류가 발생하며 Android 측에서는 문제가 없습니다. 이는 기록 모드에서 pushState를 통해 보기가 전환되지만 IOS WeChat 클라이언트( Android 클라이언트 수정) pushState의 새로운 H5 기능이 지원되지 않아 라우팅이 변경되었지만 WeChat 브라우저에서 얻은 URL은 변경되지 않았습니다. 오른쪽 상단의 링크를 복사하면 WeChat에서 기록한 URL이 여전히 유지되는 것으로 나타났습니다. 수동으로 새로고침하거나 window.location과 같은 페이지 이동 방법을 사용하여 새로 고치지 않으면 최신 URL을 얻을 수 있습니다

페이지에 들어갈 때 URL을 기록하는 것이 해결책입니다. 그런 다음 이 URL을 사용하여 WeChat 서명을 얻으세요

router.afterEach(to => {
  sessionStorage.setItem('currentUrl',window.location.href)
})
let url = encodeURIComponent(location.href.split('#')[0])
if(system == "iOS" && sessionStorage.getItem('currentUrl')) {
  url = encodeURIComponent(sessionStorage.getItem('currentUrl').split('#')[0])
}

현재 이 URL을 사용하여 WeChat 서명을 얻는 것이 옳습니다. 이 방법은 서명된 URL이 IOS 장치에만 적합합니다. WeChat에 기록된 URL, 서명이 정확합니다

왕복 캐시 문제

브라우저에서 앞으로 클릭하고 돌아가기 가끔 js가 자동으로 실행되지 않습니다. 특히 Safari에서 이는 왕복 캐시(bfcache)와 관련이 있습니다.

해결책: window.onunload = function(){};

Vue 단일 페이지 애플리케이션이고 연결 유지를 사용하는 경우 페이지가 새로 고쳐지지 않습니다. 이때 일부 인터페이스 요청은 beforeRouteEnter 메소드

IOS는 new Date("2019-01-01 00:00:00") 형식을 지원하지 않습니다.

이 작성 방법 new Date("2019-01-01 00:00:00")는 다음에서 지원됩니다. Android 네, 하지만 IOS 측에서는 지원되지 않으며 NAN 오류가 보고되므로 new Date("2019-01-01 00:00:00")를 new Date("2019/01/)로 변경해야 합니다. 01 00:00:00" )이 양식

let date = '2019-01-01 00:00:00'
date.replace(/\-/g, '/')

WeChat QR code

한 페이지에 여러 개의 QR 코드가 있을 수 있지만 길게 눌러 QR 코드를 식별하면 마지막 QR 코드만 식별할 수 있습니다. 이때 제어해야 할 사항은 다음과 같습니다. 페이지의 보이는 영역의 마지막 QR 코드만 나타날 수 있습니다.

IOS에서는 클릭할 수 없습니다

span,p 및 기타 IOS에서는 클릭 이벤트 및 클릭을 모니터링합니다. 잘못된

솔루션, 커서 추가: 포인터;

오디오 오디오를 재생할 수 없습니다

audio.play() 메서드는 Android 기기에서는 정상적으로 재생할 수 있지만 IOS 클라이언트에서는 재생할 수 없습니다. 오디오를 로드하려면

audio.load() 코드 줄을 추가하세요

loadeddata 메소드를 들을 수 있습니다. Android가 오디오가 로드된 후 재생을 시작하도록 설정되어 있는지 확인하세요. 이때 audio.currentTime을 통해 오디오 재생이 시작되었는지 확인할 수 있습니다. 이 값이 0보다 크면 재생이 시작되었음을 의미합니다.

클릭 이벤트에 대한 응답이 300ms 지연되었습니다. IOS 모바일 단말기

수정된 문제

ios8 이하 시스템에서는 작은 키보드가 활성화되면 위치 부동 문제가 발생합니다. 해결 방법: 중간 부분 스타일

position:fixed;top에 CSS를 추가하면 됩니다. 50px; 하단:50px;overflow:scroll;

이 기사는 여기까지입니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의

HTML5 비디오 튜토리얼

칼럼을 참조하세요!

위 내용은 모바일 H5 개발에서 직면한 문제점과 해결책의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!