How to adapt the bottom suction button to iPhone X in WeChat mini program (detailed tutorial)

This article mainly introduces the solution for adapting the bottom button of the WeChat applet to iPhone are arriving one after another, and the tycoons around them are using them one after another. Because the iPhone There are also a few places where the user experience is not good, mainly on the product details page and the bottom button bar of the shopping cart, which overlap with the Home Indicator bar. This makes it easy to accidentally trigger gesture operations when clicking the button below, as shown below. ：

The screenshots are from the Internet. If the infringement or deletion is

, it must be fixed if it is a bug, and it must be optimized if it is an experience problem, so I immediately bought an iPhone X and started Research.

The adaptation on the web page is good, with the viewport meta tag and the following solution for processing. For details, please see here

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

But it’s quite embarrassing. From the appearance of the four corners being cut off, it can be inferred that the viewport-fit in the mini program defaults to cover (guessed based on the performance), but there is no interface to change it. Therefore, the adaptation solution on the web page through viewport-fix=cover combined with constant(safe-area-inset-bottom); is not suitable for small programs. At present, we have not seen any mini programs with special interfaces or fields for iPhone X and other special-shaped screens. The adaptation of the bottom tab bar of the applet itself to the iPhone X simply adds a white bottom bar, which improves the position of the original tab bar. Why do you say this? Because this can be seen from our shopping cart page, the bottom sucking operation of the shopping cart page is not implemented through position:fixed;bottom:0;, but the top value is calculated based on the windowHeight-its own height, thereby simulating the bottom sucking, in a small After the new version of the program was adapted to the iPhone X, the button at the bottom of the shopping cart was half covered, which led to the above conclusion.

Getting back to the subject, since there is no special solution to obtain this value, we can only obtain device information through the wx.getSystemInfo interface. The method of using this interface is as follows:

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

where model is the model of the device. If the model contains iPhone

The value can be read in the sub-page, for example, on the product details page:

<!-- 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;
}

So, a simple solution to adapt to the rounded corners at the bottom of iPhone X is completed.

As for why 68rpx is used, because the screen width of iPhone

##Screenshots are from the Internet, and they have been deleted

Screenshots are from the Internet, and they have been deleted

The above is what I compiled for everyone, I hope It will be helpful to everyone in the future.

Related articles:

How to implement two queues to represent a stack in JS

How to implement the front and back ends of the vue project in node Separation

How to build a vue application through vue-cli

How to implement dynamic search using Angularjs filters

The above is the detailed content of How to adapt the bottom suction button to iPhone X in WeChat mini program (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!