Нижняя кнопка всасывания в апплете адаптирована под решение iPhone X

С появлением второй и третьей партий iPhone X окружающие их местные тираны использовали их один за другим.Из-за множества проблем с адаптацией, вызванных челкой iPhone X, эти местные тираны более погружены во всевозможные ошибки и не выходят.Согласно материалу, апплет Princess Pea также имеет некоторые места, где опыт не очень хороший, в основном на странице сведений о продукте и на нижней панели кнопок всасывания корзины.Home IndicatorГоризонтальные полосы накладываются друг на друга, поэтому при нажатии кнопки ниже легко запустить операцию жеста по ошибке, как показано ниже:

Если это ошибка, ее нужно исправить, а если это проблема опыта, ее нужно оптимизировать, поэтому я сразу же купил iPhone X и начал исследования.

Адаптация на веб-странице хорошая, естьviewport metaЭтикетки обрабатываются так же по следующей схеме. Для получения подробной информации см.здесь

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

Но это смущает.По производительности срезанных четырех углов можно сделать вывод, что в апплетеviewport-fitПо умолчаниюcover(догадка на основе производительности), но нет интерфейса для изменения, поэтому веб-страница проходитviewport-fix=coverкомбинироватьconstant(safe-area-inset-bottom);Схема адаптации не подходит для Мини-программ. На данный момент я не видел в апплете никаких специальных интерфейсов или полей для экранов особой формы, таких как iPhone X. Нижняя панель вкладок самого апплета адаптирована для iPhone X простым добавлением белой нижней панели, которая улучшает положение исходной панели вкладок Почему вы так говорите? Поскольку это видно на странице нашей корзины, операция всасывания снизу на странице корзины не выполняется.position:fixed;bottom:0;понял, но согласноwindowHeight-自身高度рассчитатьtopзначения, таким образом имитируя всасывание снизу, после того, как новая версия апплета адаптируется к 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)
  }
})

вmodelэто модель и другая информация об устройстве, еслиmodelсодержитiPhone X, можно считать, что аппарат iPhone X, мы в файле записиapp.jsПроверьте это, затем добавьте один глобальноisIpxполе, назначьте результатisIpx.

Это значение можно прочитать на подстранице, например, каштан на странице сведений о продукте:

<!-- goods.wxml -->

<view class="button-group {{isIpx?'fix-iphonex-button':''}}">这是一个吸底按钮区域</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;
}

Таким образом, простое решение, позволяющее подогнать закругленные углы в нижней части iPhone X, выполнено.
Что касается того, почему68rpx, так как ширина экрана iPhone X и iPhone 6 составляет 375 пикселей, в апплете750rpx = 375px = 750物理像素, в сочетании со следующими двумя рисунками, чтобы объяснить, почему: