집 >웹 프론트엔드 >JS 튜토리얼 >WeChat 미니 프로그램에서 iPhone X에 하단 흡입 버튼을 적용하는 방법(자세한 튜토리얼)

WeChat 미니 프로그램에서 iPhone X에 하단 흡입 버튼을 적용하는 방법(자세한 튜토리얼)

亚连원래의: 2018-06-23 15:35:212206검색

이 글에서는 아이폰 하단 버튼을 적용하는 솔루션을 주로 소개합니다. 아이폰 때문에 부자들이 잇달아 사용하기 시작했습니다. 경험이 좋지 않은 가장 큰 단점은 상품 상세 페이지 하단의 버튼바와 쇼핑입니다. 카트는 홈 표시 막대와 겹쳐서 아래와 같이 아래 버튼을 클릭하면 실수로 제스처 작업이 실행되기 쉽습니다.

스크린샷은 인터넷에서 가져온 것입니다. 삭제가 버그인 경우에는 삭제해야 합니다. 경험상의 문제라면 최적화가 필요해서 바로 아이폰X를 구입해서 조사를 시작했습니다.

뷰포트 메타 태그와 다음 처리 솔루션을 사용하여 웹 페이지의 적응이 좋습니다. 자세한 내용은 여기를 참고해주세요

{
 position: fixed;
 bottom: 0;
 width: 100%;
 height: constant(safe-area-inset-bottom);
 background-color: #fff;
}

그런데 네 모서리가 잘린 모습을 보면 미니 프로그램의 뷰포트 핏이 기본적으로 커버되는 것을 유추할 수 있지만(성능을 기준으로 추측) 이를 변경할 수 있는 인터페이스가 없으므로 웹 페이지 측이 통과합니다. 상수(safe-area-inset-bottom)와 결합된 viewport-fix=cover의 적응 솔루션은 소규모 프로그램에는 적합하지 않습니다. 현재 iPhone X 및 기타 특수한 모양의 화면을 위한 특수 인터페이스나 필드가 있는 미니 프로그램을 본 적이 없습니다. 미니 프로그램 자체의 하단 탭 바를 아이폰 X에 적용한 것은 단순히 흰색 하단 바를 추가한 것인데, 이는 원래 탭 바의 위치를 향상시키는 것입니다. 이는 우리 장바구니 페이지에서 볼 수 있기 때문에 장바구니 페이지의 하단 흡입 동작은 position:fixed;bottom:0;을 통해 구현되지 않고, 상단 값은 windowHeight-자신의 높이를 기준으로 계산되어 시뮬레이션됩니다. The Bottom sucking, in a small 새 버전의 프로그램이 iPhone X에 적용된 후, 장바구니 하단의 버튼이 반쯤 가려져 위와 같은 결론이 나왔습니다.

본론으로 돌아가서, 이 값을 얻을 수 있는 특별한 솔루션이 없기 때문에 wx.getSystemInfo 인터페이스를 통해서만 장치 정보를 얻을 수 있습니다. 이 인터페이스를 사용하는 방법은 다음과 같습니다.

wx.getSystemInfo({
 success: function(res) {
  console.log(res.model)
  console.log(res.pixelRatio)
  console.log(res.windowWidth)
  console.log(res.windowHeight)
  console.log(res.language)
  console.log(res.version)
  console.log(res.platform)
 }
})

모델은 모델이고 모델에 iPhone X가 포함된 경우 해당 장치는 iPhone X로 간주될 수 있습니다. 항목 파일 app.js에서 이를 감지한 다음 isIpx 필드를 전역적으로 추가하고 결과를 isIpx에 할당합니다.

값은 하위 페이지(예: 제품 세부 정보 페이지)에서 읽을 수 있습니다.

<!-- goods.wxml -->
<view class="button-group {{isIpx?&#39;fix-iphonex-button&#39;:&#39;&#39;}}">这是一个吸底按钮区域</view>
// goods.js
let app = getApp();
Page({
  data: {
    isIpx: app.globalData.isIpx?true:false
  }
})
/* app.wxss */
.fix-iphonex-button {
  bottom:68rpx!important;
}
.fix-iphonex-button::after {
  content: &#39; &#39;;
  position: fixed;
  bottom: 0!important;
  height: 68rpx!important;
  width: 100%;
  background: #fff;
}

이로써 iPhone X 하단의 둥근 모서리에 적응하는 간단한 솔루션이 완성되었습니다.

68rpx를 사용하는 이유는 iPhone의 화면 너비 때문입니다

스크린샷은 인터넷에서 가져온 것이므로 삭제하고 삭제합니다

위 내용은 모두를 위해 정리한 내용입니다. 미래.

WeChat 미니 프로그램에서 iPhone X에 하단 흡입 버튼을 적용하는 방법(자세한 튜토리얼)

관련 기사