Picture and text explanation of PC wide screen adaptation scheme based on uni app

Time:2021-4-23

It has been a long time since the world suffered from the fragmentation of the platform.

Before the mobile Internet, developers only had to face the web happily. In the era of mobile Internet, IOS, Android, H5 and a variety of small app fast applications emerge in endlessly, and developers can no longer be happy.

  • Learn n techniques
  • Develop n versions
  • The iterations of various versions are chaotic, unable to be aligned, and the users are at a loss and suffer from internal pain
  • The cost of development and testing soared n times

The result is that the engineers keep working overtime until they are bald, but the demand for products is still endless, and the boss’s budget has not been able to go down.

uni-appPreviously, it has achieved full coverage of the mobile terminal, supporting IOS, Android, H5, wechat applet, Ali applet, baidu applet, byte skipping applet, QQ applet, fast app and 360 applet, and has excellent running performance at all terminals.

From version 2.9,uni-appFurthermore, it provides the adaptation scheme of wide screen such as PC, and completes the great unification.

Developers can finally use a framework to roll out all projects at once.

Picture and text explanation of PC wide screen adaptation scheme based on uni app

Let’s start with a practical example

The following is based onuni-appOfDcloud communityFor the display effect on the mobile end, the list and details are divided into two pages. Click the post in the list to open the details page:

Picture and text explanation of PC wide screen adaptation scheme based on uni app

The following is based onuni-appOfDcloud communityThe same set of code, after a little configuration, displays the effect on the PC side. The list and details are displayed in the left and right columns of the same page. Click the post in the list on the left to refresh the content of the details window on the right. This UI is more suitable for the PC wide screen and has the experience of PC desktop app.

Picture and text explanation of PC wide screen adaptation scheme based on uni app

Tips: ClickDcloud community demonstration system, feel the adaptability of PC and mobile.

What about? Is it cool?

Now let’s talk about it in detailuni-appIn general, it includes three aspects

  • Window level adaptation: leftwindow, rightwindow, topwindow, etc
  • Component level adaptation: match media component
  • Wide screen response of rpx

1. Window level adaptation: leftwindow column

The design of mobile phone screen and PC monitor is different. In order to hold and answer the phone conveniently, the height of most mobile phones is larger than the width of the device (that is, the narrow screen design), so the mobile app is mostly vertical / narrow screen UI.

The PC display is mostly wide screen design, that is, the width of the device is greater than the height of the device. Many desktop applications on PC will adopt the UI design of left and right columns.

uni-appWith the current mobile phone screen as the main window, in theLeft / right / upThree directions, new expansionleftWindowrightWindowtopWindowThree forms, which can be set to automatically appear when the screen width is greater than a certain threshold (to show the wide screen design of columns), and automatically disappear when the screen width is less than a certain threshold (to restore the narrow screen design of single window).

uni-appThe main form and the extended three forms are independent and support mutual communication. When you click the link and switch the page, you can refresh in the corresponding form instead of the whole screen.

We begin with this articleDcloud communityFor example, explain how touni-appFast implementation of widescreen adaptation.

We take the list page of the community as the main form to expand the details torightWindowThe schematic diagram is as follows:

Picture and text explanation of PC wide screen adaptation scheme based on uni app

Next, explain step by step how touni-appIn the project, column implementation is completed.

step 1:New right- window.vue Show post details

of course,rightWindowIt doesn’t need to rewrite the news details page. It can reuse the original code and support the existing details page as a componentrightWindowPage, as follows:

<!-- responsive/right-window.vue -->
<template>
  <view>
    <! -- change the original details page (/ pages / detail)/ detail.vue ), as a component (pages detail detail) - >
    <pages-detail-detail ref="detailPage"></pages-detail-detail>
  </view>
</template>

<script>
  export default {
    created(e) {
      //Listen for custom events, which are triggered by clicking on the list page on the left
      uni.$on('updateDetail', (e) => {
        //Execute the detailpage component, that is, / pages / detail/ detail.vue  Page load method
        this.$refs.detailPage.load(e.detail);
      })
    }
  }
</script>

step 2:On the list page, handle the logic of interactive communication with rightwindow after clicking the list.

//Transformation of list page
goDetail(detail) {
    if (this._isWidescreen) { 
        //If the screen is wide, the user-defined event on the right column details page will be triggered to inform the right window to refresh the news details
        uni.$emit('updateDetail', {
            detail: encodeURIComponent(JSON.stringify(detail))
        })
    } else { 
        //If it is narrow, open a new form and open the details page in the new form
        uni.navigateTo({
            url: '/pages/detail/detail?query=' + encodeURIComponent(JSON.stringify(detail))
        });
    }
},

step 3:staypages.jsonRegistered inrightWindow, as follows:

{
  "rightWindow": {
    "path": "responsive/right- window.vue ", // specify the rightwindow page file
    "style": {
      "Width": "Calc (100vw - 400px)" // page width
    },
    "matchMedia": {
      "Minwidth": 768 // effective condition, displayed when the window width is greater than 768px
    }
  }
}

We can see that without too much work, we can quickly adapt an application developed for mobile phone narrow screen to PC wide screen application. And the code maintenance in the future is still the same set, and there is no need for multiple upgrades when the business iterations.

The implementation of this scheme has the following characteristics:

  • The code originally developed for the narrow screen of mobile phone basically needs no modification and can be fully adapted to the wide screen of PC. the newly added business module is also a set of code, which is compatible with the narrow screen.
  • After adding the PC wide screen adaptation, the narrow screen implementation of the original mobile terminal will not be affected, and the extended windows such as leftwindow / rightwindow will be automatically hidden on the narrow screen.
  • The pages in rightwindow are reusable, and there is no need to rewrite the news details page. It supports putting the existing details page into the rightwindow page as a component.

For more configuration details, see the document:https://uniapp.dcloud.net.cn/collocation/pages?id=topwindow

The leftwindow scheme is not only suitable for adapting the original mobile app to the large screen display, but also suitable for newly developed PC applications, especially PC admin management console.

The following is based onleftwindowtopwindowClassic of constructionpc adminLayout:

Picture and text explanation of PC wide screen adaptation scheme based on uni app

2. Component level adaptation: match media component

leftWindowAnd so on is the page form level adaptation scheme, which is suitable for multi page combination column display.

Can components be adapted to different screen widths in the same page? Of course, you can use the component level adaptation scheme.

In addition to the traditional CSS media query,uni-appIt also provides full platform compatibleMatch media componentAnd supportinguni.createMediaQueryObservermethod.

match-mediaIs a media query adaptation component, can be more simple for dynamic screen adaptation.

staymatch-mediaComponent, and specify a set of media query rules for the component, such as screen width. At runtime, if the screen width meets the query conditions, the component will be displayed, otherwise it will be hidden.

match-mediaThe advantages of the component include:

  1. Developers can use media query capabilities more easily and explicitly, rather than being coupled in CSS files, which is difficult to reuse.
  2. It can be used dynamically in combination with data binding in template, which can not only show or hide components, but also has higher plasticity in procedural API.
  3. It can use media query components nested, that is, it can meet the change of layout style of local components.
  4. After componentization, it has stronger encapsulation, can isolate styles, templates and interaction events bound on templates, and can also provide higher reusability.

uni-appIt is recommended to adopt the solution of dynamic adaptation at run time instead of writing conditional compilation for PC Version (although you can also implement PC version by customizing conditional compilation). The advantage of this design is that you can easily switch between horizontal and vertical screens in the browser of iPad and other devices.

3. Wide screen response of rpx

DesignMobile AppDesigners often use iPhone 6 as the standard of visual draft, that is, drawing according to 750px screen width; programmers use 750px as the benchmark, and dynamically convert (zoom) the element width and height suitable for the current device screen according to the actual size of the device.

This is the implementation idea of rpx (responsive pixel), but rpx dynamically converts the element size by the framework engine, without the programmer’s code intervention.

When facing the mobile end, rpx is an ideal solution, because the screen width of various mobile devices is not very different. Compared with 750px, fine-tuning the zoom effect can maximize the restoration of the designer’s design.

However, once separated from the mobile device, in the PC screen or pad horizontal screen state, because the screen width is much larger than 750. At this time, the result of rpx changes according to the screen width is seriously out of expectation, which is very miserable.

Suppose a graphic list is displayed. For the left thumbnail, we define CSS as follows:

.uni-media-list-logo {
    width: 180rpx;
    height: 140rpx;411*(180/750)411*(180/750)411*(180/750)
}

On the mobile terminal, the display effect is ideal, as follows:

Picture and text explanation of PC wide screen adaptation scheme based on uni app

Current selectionpixel 2As an analog device, the screen width is 411px, so the width of the thumbnail is changed to:180*(411/750) = 98pxThe height becomes:140*(411/750) = 76pxThe theoretical calculation is in accordance with the actual operation and the effect is better.

The same code, if run to the PC side, assuming the screen width is 1920px, then the size of the thumbnail will change to:180*(1920/750) = 460pxThe height becomes:140*(1920/750) = 358pxIt’s a terrible big one1920*1080The effect is as follows:

Picture and text explanation of PC wide screen adaptation scheme based on uni app

To this end, in theuni-app 2.9+From now on, the effective range control of rpx based on 750px is added, that is, when the screen width exceeds a certain threshold value (960px by default), the element width and height will no longer be converted from the actual screen width, but will be calculated from the fixed screen width (375px by default).

Taking the above graphic list as an example, when the screen width is 1920px (greater than 960px), the fixed screen width (default 375px) will be used to calculate the width and height of the thumbnail, that is:180*(375/750) = 90pxThe height becomes:140*(375/750) = 70pxAccording to this mechanism, the running effect of the PC side is as follows, which is more ideal and elegant than the above image.

Picture and text explanation of PC wide screen adaptation scheme based on uni app

Tips:

  • The screen width threshold of 750px and the fixed screen width used for wide screen calculation all support custom configuration
{
  "globalStyle": {
    "Rpxcalcmaxdevicewidth": 960, // rpx calculates the maximum supported device width in PX. The default value is 960
    "Rpxcalcbasedevicewidth": 375, // when the actual width of the device exceeds the maximum width supported by rpx calculation, the fixed screen width used by rpx calculation, in PX, is 375 by default
  }
}
  • On the basis of rpx width control, developers can make minor adjustments to achieve better PC wide screen effect. For example, when the screen is wide, the list width is fixed and displayed in the center, as shown in the following figure. Of course, this is only to demonstrate the out of control management of rpx in the wide screen. In practical application, the column window can be used to display the list in the left column, as shown in the example screenshot at the beginning of this article.

Picture and text explanation of PC wide screen adaptation scheme based on uni app

4. Supplement

4.1 package as windows, MAC and Linux clients through electronic

With the wide screen adaptation, the application of uni app can be passed easilyelectronPackaged as computer client applications, windows, MAC, Linux support.

Developers can call it at willelectronAPI to call more operating systems (to facilitate multi terminal compatibility, these special APIs can be written in custom conditional compilation)

There are some packaged plug-ins in the uni app plug-in markethttps://ext.dcloud.net.cn/search?q=electron

4.2 a scheme to make mobile web pages temporarily available for PC browser

If your H5 version has been developed and you haven’t had time to adapt to PC, but you want to use it on PC first. Then you can use iframe in the PC web page, agree the width, and apply the narrow screen version of uni app in it.

Of course, you can also place a QR code next to the iframe to provide the mobile version of the code scanning address. The following is an implementation example:

Picture and text explanation of PC wide screen adaptation scheme based on uni app

5. Conclusion

The uni app team will keep running, continue to improve the better adaptation of uni app on PC, pad and other widescreen devices, and will focus on SSR and serverless to provide more efficient cloud integrated solutions (seeuniCloud), help enterprises more efficient, help developers more relaxed!

Welcome tohttps://github.com/dcloudio/uni-appGive us star encouragement