Summary of WeChat Mini Programs Adapted to iPhone X

This article mainly introduces some problems and summaries of our Knowledge Collection applet when adapting to the iPhone X screen. I hope it will be helpful for your applet development.

iPhone X screen data

After the official release of iPhone X in September last year, it triggered a wave of iOS App adaptation and technical articles. Here we briefly summarize the basic data of iPhone X screen to facilitate subsequent adaptation in mini program development.

• Screen size: 5.8 inches (diagonal)
• Screen physical resolution: 1125px × 2436px, 458 ppi
• The actual development adaptation size: 375pt × 812pt, @3x

In addition, since there is a "bangs" in the status bar area at the top of the iPhone X screen, and an "operation bar" is added at the bottom of the screen, as shown in the figure below, we need to pay attention to the issue of safe area during development.

According to Apple's official documentation, the height of the adaptation safety area of ​​the top status bar of iPhone X is 44pt, and the height of the bottom operation bar area is 34pt. In addition, in iPhone X, the default height of some system bars has also changed compared to previous devices, as shown in the following table.

Therefore, in iOS App development, if we use the default UINavigationController and UITabBarController, there is no need for additional adaptation, as the iOS system will automatically adapt the safety area of ​​the relevant bars. If we use a custom navigation bar and tab bar, we need to set the different heights of these bars according to the device type.

Size units of mini programs

In order to solve the problem of adapting to different screen sizes, the mini program has set its own size unit: rpx (responsive pixel), which can adapt to the screen width. The mini program stipulates that the screen width of all devices is 750rpx. Depending on the actual width of the device screen, the actual pixel value represented by 1rpx is also different.

According to WeChat development documentation, on a 4.7-inch iPhone device (iPhone 6/7/8), the screen width is 375px (here it should be understood as 375 points), with a total of 750 physical pixels, then 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.

How to identify the device as iPhone X in the applet

Above we briefly introduced the screen data of iPhone X and the size units in the mini program as a prelude. Now we are finally going to get to the point. To adapt the iPhone X screen in the mini program, we first need to know how to determine the device type.

WeChat's mini program API provides a wx.getSystemInfo(OBJECT) method to obtain the system information and device information of the user's phone, including the following data:

The meaning of each of the above fields is detailed in the document, and we will not go into details one by one.

Therefore, we can determine whether the device is an iPhone X based on whether the phone model field model returned by this method contains the iPhone X string, or we can determine whether the screenHeight is equal to 812.

NOTE: There is a small pitfall here that needs to be noted. In the simulator of WeChat developer tools, if iPhone X is selected, the model value obtained at this time is iPhone X, which makes me think that the real machine also has this value, so I directly use if (model == 'iPhone X') to judge, but in fact the model value of the real machine is in this format: iPhone X (GSM+CDMA), so we need to use string search matching to make a judgment.

In summary, we can add a field isIPX in globalData of app.js to identify whether the current device is iPhone X, and then call the wx.getSystemInfo(OBJECT) method in onLaunch when the applet is started and read the model field in its success callback for analysis. The code is as follows:

 App({
 // Global data
 globalData: {
 // Other data definitions ... 
     
 isIPX: false , // Is the current device an iPhone X?
 }, 
   
 // Mini program startup entry
  onLaunch: function (options) {
 // Other startup code... 
     
 // Determine if the device is an iPhone X
 this.checkIsIPhoneX()
 }, 
   
  checkIsIPhoneX: function () {
 const self = this
 wx.getSystemInfo({
      success: function (res) {
 //Judge based on the model
        if (res.model.search( 'iPhone X' ) != -1) {
          self.globalData.isIPX = true  
 }
 // Or judge according to screenHeight
        // if (res.screenHeight == 812) {
        // self.globalData.isIPX = true  
 // }
 }
 })
 },
 }

If you need to obtain device-related information immediately when the applet is started, you can also call the wx.getSystemInfoSync() method, which will synchronously obtain data and return immediately.

Page adaptation practice

In the development of mini program pages, the main areas that need to be adapted to iPhone X are: Navigation Bar, Tab Bar, and the bottom-sucking button at the bottom of the page.

Navigation bar and tab bar adaptation

If we use the official WeChat Mini Program components for development without customization, set the tabBar page in the app.json file, and set the window navigationStyle value to default, then we do not need to adapt the navigation bar and tab bar on iPhone X, WeChat will automatically adapt them for us. The following figure shows the homepage of the Knowledge Collection Mini Program:

However, if we customize the navigation bar (set the window navigationStyle to custom in the app.json file, only keep the capsule button in the upper right corner, and the developer needs to draw the navigation bar style by himself) and the tab bar, we need to determine the device type on each page, lay out the layout within the safe area for the iPhone X screen, and modify the height value of the relevant bar (see the table above).

Taking custom navigation bar adaptation as an example, the steps are as follows:

(1) In page.js of each page, first read the isIPX value in app.js, as follows:

 const app = getApp() 
 
 Page({
 data: {
 // Other data on the page... 
     
    isIPX: app.globalData.isIPX,
 }, 
   
 // Other code
 }

(2) Then in the page.wxss style file, write two styles for a view, one for the normal screen and the other for the iPhone X screen, as follows:

 .navi-bar- view {
 height: 64px;
 /* Other style values ​​*/
 }
 .navi-bar -view -IPX {
 height: 88px;
 /* Other style values ​​*/
 }

(3)***In the page.wxml page structure layout, set different class styles for View according to the value of isIPX, as follows:

 < view class= "{{isIPX ? 'navi-bar-view-IPX' : 'navi-bar-view'}}" >
 </ view >

In addition, for custom navigation bars and tab bars, I recommend following the design specifications of the iPhone UI. The styles can refer to Apple's official renderings:

Adaptation of bottom button

In the mini program page, bottom-sucking buttons are a very common design. We usually put some important buttons at the bottom of the page and let them float. For example, the "Collect" and "Forward" buttons at the bottom of the "Small Collection Details Page" of our Knowledge Collection mini program:

In iPhone X, we need to offset the bottom button 34 pixels upwards. This can be achieved by setting padding-bottom to 34px in the CSS style. The reference code is as follows:

 .feed-bottom- view {
 width: 100%;
 height: 48px; /* Height of the bottom button */
 bottom: 0;
 opacity: 0.95;
 position: fixed;
 border- top -style: solid;
 border- top -width: 0.5px; /* Height of dividing line */
 border-color: lightgrey;
 background-color: #F8F8F8;
 }
 .feed-bottom- view -IPX {
 /* iPhone X content is offset 34px up */
 padding-bottom: 34px;
 } 
 
 < view class= "{{isIPX ? 'feed-bottom-view feed-bottom-view-IPX' : 'feed-bottom-view'}}" >
 <! -- Bottom suction by area -->  
 </ view >

Note: As mentioned above, the actual pixel value represented by 1rpx is different for different device widths. In iPhone devices of different sizes (3.5/4.0/4.7/5.5 inches), although their widths are different, the height of the navigation bar + status bar is 64pt (88pt for iPhone X), and the height of the tab bar is 49pt (83pt for iPhone X). Therefore, in mini-program development, when we need to customize the navigation bar, tab bar, or adapt to the top and bottom safe areas of iPhone X, I suggest that the unit here is directly px (corresponding to pt in iOS development in mini-programs) instead of rpx (of course, it is recommended to use rpx for the size description of other elements on the page) to ensure that the height of the final rendering display is consistent with the default iOS system.

Summarize

This article briefly introduces how to adapt to the iPhone X screen in mini-program development. For more details, please refer to the code of the knowledge collection mini-program open sourced on GitHub: awesome-tips-wx-app