집 >웹 프론트엔드 >JS 튜토리얼 >WeChat 미니 프로그램을 IOS 및 Android와 호환되게 만드는 방법

WeChat 미니 프로그램을 IOS 및 Android와 호환되게 만드는 방법

小云云원래의: 2018-01-31 13:31:342678검색

이 글은 주로 WeChat 애플릿 개발 시 IOS 및 Android 호환성 문제에 대한 관련 정보를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

WeChat 미니 프로그램 개발 시 IOS 및 Android 호환성 문제

1. 시간 변환 문제:

이것은 미니 프로그램만의 문제가 아니라 iOS 시스템의 문제이기도 합니다

입니다. new Date("2017-06-16") NAN은 IOS에서 발생하므로 시간 변환을 별도로 캡슐화해야 합니다. 해결 방법은 다음과 같습니다

1. "-"를 "/"로 바꿉니다

2. "." 뒤에 (밀리초에도 문제가 있습니다)

코드는 다음과 같습니다:

 /**
   * 字符串转换为时间
   * @param {String} src 字符串
   */
  strToDate(dateObj){
   dateObj = dateObj.replace(/T/g, &#39; &#39;).replace(/\.[\d]{3}Z/, &#39;&#39;).replace(/(-)/g, &#39;/&#39;)
   dateObj = dateObj.slice(0, dateObj.indexOf("."))
   return new Date(dateObj)
  }

2. 위치 지정 문제 수정

iOS에서 아래로 당기면 오류가 발생하는 문제가 해결되었습니다. 드롭다운 이벤트가 있지만 애니메이션 효과가 없습니다. Android는 정상적으로 실행될 수 있습니다.

Flex에서는 절대 위치 지정이 사용됩니다. iOS는 심각한 정렬 불량으로 인해 상위 요소가 절대 위치 지정이 됩니다. Android는 원하는 효과를 얻을 수 있습니다.

간단히 말하면 절대 위치 지정을 사용하지 마세요.

3. 문제

1. 절대 위치 지정을 사용하고 대역폭을 100%로 설정하고 패딩을 설정하면 화면 너비가 오버플로되고 페이지가 좌우로 이동할 수 있는 버그가 나타납니다. 시뮬레이터에서는 문제가 없습니다. , 그러나 이 문제는 실제 시스템에 존재합니다. 이 문제로 인해 오랫동안 디버깅이 고통스러워졌습니다

2. 절대값을 사용하고 현재 요소가 플렉스 컨테이너인 경우 Ios에서는 레이아웃이 영향을 받지 않으며 텍스트가 잘못 정렬됩니다.

3. 간단히 말해서 절대값을 사용하지 마세요

4. 버튼의 단어 간격 문제

때때로 큰 버튼을 사용할 때 두 단어 사이에 공백을 두고 싶은데 이를 위한 자리 표시자를 찾지 못했습니다. 를 사용하기 때문에 공백을 추가하는 단어 간격 방법을 사용하여 텍스트의 간격을 설정하지만 iPhone 6s에서는 두 단어 사이에 공백이 있으면 전체가 오른쪽으로 기울어집니다. 제대로 작동하려면!

WeChat 미니 프로그램을 IOS 및 Android와 호환되게 만드는 방법

관련 기사