Uni-app supports PC edition!

The platform has been fragmented for a long time.

Before the mobile Internet, developers just had to be happy with the Web. In the era of mobile Internet, iOS, Android, H5 and all kinds of small programs are rapidly emerging, and developers are no longer happy.

• Learn n techniques
• Develop n versions
• Each version iteration chaos, unable to pull qi, users at a loss, internal pain
• Development and testing costs have skyrocketed by a factor of n

The result is that engineers work overtime, but the demand for products is still unmet, and the boss’s budget is always under pressure, all suffering.

Uni-app has previously achieved full coverage on mobile devices, supporting iOS, Android, H5, wechat Mini Program, Ali Mini program, Baidu Mini program, Bytedance mini program, QQ mini program, Kuaiapp and 360 mini program, and providing excellent performance on all devices.

Uni-app also offers PC and other widescreen adaptation solutions starting from version 2.9.

Developers are finally able to use a framework that removes all projects at once.

Don’t say empty, let’s have a practical example first, we feel intuitively:

The following is the display effect of DCloud community based on Uni-App in mobile terminal. The list and details are divided into two pages. Click the post in the list to open the details page:

The following is the same set of code for the DCloud community based on UNI-App. After a little configuration, the display effect on PC is displayed. The list and details are displayed in left and right columns on the same page.

Tips: click on theDCloud community demo systemFeel the adaptability of PC and Mobile.

How’s that？ Have you ever been cool?

Here we will talk about uni-App’s PC widescreen adaptation in detail. In general, it includes three aspects:

• Form level adaptation: Leftwindow, Rightwindow, TopWindow and other columns
• Component-level adaptation: the match-media component
• Widescreen response of RPX

1. Form-level adaptation: Leftwindow column

Mobile phone screens and PC monitors are designed differently. In order to facilitate holding and answering calls, the height of most mobile phones is greater than the width of the device (i.e. the narrow screen design), so mobile apps mostly display UI in portrait or narrow screen.

And THE PC monitor for widescreen design, that is, the width of the device is greater than the height of the device, desktop applications on the PC, many will use the left and right columns of UI design.

Uni-app uses the current mobile screen as the main window, and extends the three Windows leftWindow, rightWindow and topWindow in the three directions of left/right/top. These three Windows can be set to automatically appear when the screen width is greater than a certain threshold (display the widescreen design of columns). When the screen width is smaller than a certain threshold, it disappears automatically (restore the narrow screen design with single window).

Uni-app’s three separate forms, the main form and the extended form, communicate with each other, and refresh within the corresponding form when clicking a link or switching pages, rather than the whole screen.

We’ll use the DCloud community at the beginning of this article as an example of how to quickly implement widescreen adaptation in UNI-App.

Using the community list page as the main form, we extended the details to rightWindow, as shown below:

The next steps explain how to complete the column implementation in the UNI-app project.

Step 1: Create a right-window.vue to display the details of the post

You don’t need to rewrite the news details page in rightWindow. You can reuse the original code in rightWindow. You can use the existing details page as a component in rightWindow, as follows:

<! -- responsive/right-window.vue -->
<template>
  <view>
    <! -- Use the original detail 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 triggered by a click on the left list page
      uni.$on('updateDetail'.(e) = > {
        // Execute the detailPage component, that is, the load method of the page: /pages/detail/detail.vue
        this.$refs.detailPage.load(e.detail); }}})</script>
Copy the code

Step 2: On the list page, handle the logic of clicking on the list and communicating with rightWindow.

// List page modification
goDetail(detail) {
	if (this._isWidescreen) { 
		// If it is widescreen, the custom event on the right pane details page will be triggered to inform the right pane 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)) }); }},Copy the code

Step 3: Register rightWindow in pages. Json as follows:

{
  "rightWindow": {
    "path": "responsive/right-window.vue".// Specify the rightWindow page file
    "style": {
      "width": "calc(100vw - 400px)" // Page width
    },
    "matchMedia": {
      "minWidth": 768 // When the window width is larger than 768px}}}Copy the code

As you can see, you can quickly adapt an application developed for a narrow screen on a phone to a widescreen application on a PC without too much work. And later code maintenance, still the same set, when the business iteration does not need multiple upgrades.

The implementation of this scheme has the following characteristics:

• The code originally developed for the narrow screen of mobile phone, basically need not modify, can be fully adapted to PC widescreen; The newly added business module is also a set of code, compatible with narrow screen.
• After the PC widescreen adaptation is added, the original narrow screen implementation of mobile terminal will not be affected, and the narrow screen will automatically hide the leftWindow/rightWindow and other extended forms.
• The page in rightWindow is reusable, there is no need to rewrite the news details page, you can use the existing details page as a component in rightWindow page.

More configuration details, see the documentation: uniapp.dcloud.net.cn/collocation…

LeftWindow scheme is not only suitable for adapting original Mobile App to large-screen display, but also suitable for newly developed PC applications, especially PC Admin management console.

Here is a classic PC Admin layout based on Leftwindow and TopWindow:

2. Component-level adaptation: the match-media component

LeftWindow and other schemes are page-form level adaptation schemes, which are suitable for multi-page combination column display.

Can components fit different screen sizes on the same page? Of course, you can use component-level adaptation.

In addition to the traditional CSS media queries, uni – app also provides a full platform compatible match – media components and matching uni. CreateMediaQueryObserver method.

Match-media is a media query adaptation component that can be easily used for dynamic screen adaptation.

Places content in the match-Media component and specifies a set of media Query media query rules, such as screen width, for the component. At runtime, this component is displayed if the screen width meets the query criteria, and hidden otherwise.

The advantages of the match-Media component include:

1. Developers can use Media Query capabilities more easily and explicitly, rather than coupling them to CSS files that are difficult to reuse.
2. The ability to use it dynamically in templates with data binding not only allows components to be shown or hidden, but also allows for greater flexibility in procedural apis.
3. The ability to use Media Query components in a nested manner allows for changes in local component layout styles.
4. Componentization provides greater encapsulation, isolation of styles, templates, and interaction events bound to templates, and greater reusability.

Uni-app recommends dynamic adaptation at runtime rather than writing a separate conditional compilation for PC (although you can also customize conditional compilation for PC). The advantage of this design is that it is easy to switch between vertical and horizontal screens on the browser of devices like the iPad.

3. Widescreen response of RPX

When designing Mobile apps, designers often take iPhone6 as the standard for visual draft, that is, drawing the picture according to the 750px screen width; Using 750px as a benchmark, the programmer dynamically converts (scales) the width and height of elements suitable for the current device screen based on the actual size of the device.

This is how the RPX (Responsive Pixel) is implemented, but RPX dynamically converts element sizes by the framework engine, without the intervention of programmers writing code.

For mobile, RPX is an ideal solution, because the screen width of various mobile devices is not very different, compared to 750px fine zoom effect, can be maximally restored to the designer’s design.

But once you’re off the mobile device, on a PC screen, or a pad landscape, because the screen width is much wider than 750. At this point, the results of RPX depending on the screen width are seriously out of line with expectations, and it is a terrible thing to see.

Assuming a list of images to display, we define the following CSS for the left thumbnail:

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

On the mobile end, this display effect is relatively ideal, as follows:

Currently, pixel 2 is selected as the simulation device and the screen width is 411px, so the thumbnail width is 180*(411/750) = 98px and the height is 140*(411/750) = 76px. This theoretical calculation is consistent with the actual operation and the effect is good.

The same code, if you run it on the PC and assume a screen width of 1920px, will change the thumbnail size to 180*(1920/750) = 460px and the height to: 140*(1920/750) = 358px, this is a horrible size, a 1920*1080 monitor can only display 2 records (mainly due to thumbnail height enlargement), the effect is as follows:

For this reason, in UNI-App 2.9+, a new effective range control of RPX as the base screen width of 750px has been added, that is, when the screen width exceeds a certain threshold (default: 960px), the element width and height will be calculated using a fixed screen width (default: 375px) instead of the actual screen width.

For example, when the screen width is 1920px (greater than 960px), a fixed screen width (375px by default) will be used to calculate the width and height of the thumbnail, i.e. 180*(375/750) = 90px, and the height becomes: 140*(375/750) = 70px, according to this mechanism, the PC side of the operation effect is as follows, compared to the above enlarged ugly, more ideal elegant.

Tips:

• Custom configurations are supported for the 750px screen width threshold in effect and for the fixed screen width used in widescreen calculations

{
  "globalStyle": {
    "rpxCalcMaxDeviceWidth": 960.// RPX calculates the maximum supported device width, in px. The default value is 960
    "rpxCalcBaseDeviceWidth": 375.// The fixed screen width used in RPX calculations when the actual width of the device exceeds the maximum width supported by RPX calculations. The default is 375}}Copy the code

• Developers can make some adjustments on the basis of RPX width control to achieve better PC widescreen effect. For example, in widescreen, the list width is fixed and displayed in the center, as shown in the picture below. Of course, this is only intended to demonstrate RPX control in widescreen. In practice, you can use a column window to display the list in the left column, as shown in the sample screenshot at the beginning of this article.

Added 4.

4.1 Use Electron to pack Windows, MAC, and Linux clients

With widescreen adaptation, Uni-App applications can be easily packaged into PC clients via Electron for Windows, MAC, and Linux.

Developers are free to call the Electron API in order to call more operating system capabilities (these special apis can be written in custom conditional compilations for multi-end compatibility)

The uni-app plugin market has some plugins that are already packaged. See ext.dcloud.net.cn/search?q=el…

4.2 A solution to make the mobile version of the web temporarily available in PC browsers

If your H5 version has been developed and has not been adapted for PC, but you want to use it on PC first. You can use iframe in PC web pages, specify the width, and apply the narrow-screen version of Uni-App inside.

Of course, you can also place the QR code next to the IFrame to provide the mobile version of the scan code address, as follows is an example of implementation:

5. Conclusion

Uni-app team will keep running and continue to improve uni-App’s better adaptation on widescreen devices such as PC and pad, and will focus on SSR and serverless to provide more efficient solutions integrated with cloud (see uniCloud for details) to help enterprises become more efficient. Make it easier for developers!

Welcome to github.com/dcloudio/un… Give us star encouragement at 😄