快捷導(dǎo)航

微信小程序中吸底按鈕適配iPhone X方案

更新時(shí)間：2017年11月29日 17:29:15 作者：稀土掘金

這篇文章主要介紹了微信小程序中吸底按鈕適配iPhone X方案,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

隨著第二三批iPhone X的陸續(xù)到貨，身邊的土豪們紛紛用了起來(lái)，因?yàn)閕Phone X的齊劉海導(dǎo)致的適配問(wèn)題很多，所以這群土豪更沉浸在各種找bug中，不出所料，豌豆公主小程序在一些地方也出現(xiàn)了一丟丟體驗(yàn)不好的地方，主要是商品詳情頁(yè)和購(gòu)物車的吸底按鈕欄，會(huì)與 Home Indicator 橫條重疊，這樣在點(diǎn)擊下方按鈕時(shí)很容易誤觸發(fā)手勢(shì)操作，如下圖：

截圖來(lái)自網(wǎng)絡(luò)，侵刪

是bug就得修，是體驗(yàn)問(wèn)題就得優(yōu)化，于是立馬搞了一臺(tái)iPhone X開始研究。

網(wǎng)頁(yè)端的適配還好，有 viewport meta 標(biāo)簽以及下面的方案進(jìn)行處理。具體可參看這里

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

但比較尷尬了，從四個(gè)角被裁掉的表現(xiàn)上可以推測(cè)小程序里的 viewport-fit 默認(rèn)為 cover （根據(jù)表現(xiàn)猜測(cè)），但是沒(méi)有接口去更改，所以網(wǎng)頁(yè)端通過(guò) viewport-fix=cover 結(jié)合 constant(safe-area-inset-bottom); 的適配方案不適合小程序。目前也沒(méi)有看到小程序有對(duì)iPhone X等異形屏有特殊的接口或字段。小程序本身的底部tab欄對(duì)iPhone X的適配也只是簡(jiǎn)單的加了一個(gè)白色底欄，提高了原有tab欄的位置，為什么這么說(shuō)呢？因?yàn)檫@一點(diǎn)可以從我們購(gòu)物車頁(yè)面看出，購(gòu)物車頁(yè)吸底操作并非通過(guò) position:fixed;bottom:0; 實(shí)現(xiàn)的，而是根據(jù) windowHeight-自身高度計(jì)算 top 值，從而模擬的吸底，在小程序新版本適配iPhone X后，導(dǎo)致購(gòu)物車底部按鈕被蓋住了一半，由此得出上面的結(jié)論。

言歸正傳，既然沒(méi)有特殊的方案獲取該值，我們只能通過(guò) wx.getSystemInfo 接口取獲取設(shè)備信息，該接口使用方法如下：

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)
 }
})

其中 model 便是設(shè)備的型號(hào)等信息，如果 model 中包含 iPhone X ，便可認(rèn)為該設(shè)備為iPhone X，我們?cè)谌肟谖募?app.js 中去進(jìn)行檢測(cè)，然在全局增加一個(gè) isIpx 字段，將結(jié)果賦予 isIpx 。

在子頁(yè)面中可以讀取該值，舉個(gè)商品詳情頁(yè)的栗子：

<!-- goods.wxml -->
<view class="button-group {{isIpx?'fix-iphonex-button':''}}">這是一個(gè)吸底按鈕區(qū)域</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: ' ';
  position: fixed;
  bottom: 0!important;
  height: 68rpx!important;
  width: 100%;
  background: #fff;
}

于是，一個(gè)簡(jiǎn)單的適配iPhone X底部圓角的方案就完成了。

至于為什么采用 68rpx ，因?yàn)閕Phone X和iPhone 6的屏幕寬度都是375px，小程序中 750rpx = 375px = 750物理像素，結(jié)合下面兩圖能解釋原因：