Mini Program
取消
Development
中文
EN
取消
  • Guide

    • # Large Screen Adapter Guide

    At present, the user equipment on the market can be roughly divided into small screen mobile phone end, medium screen tablet, large screen. PC In these three types of devices, there will be a small size difference, also known as screen fragmentation.

    As Mini Programs can run on more and more device terminals, developers should also adapt to different screen sizes.

    On how to design, user experience to achieve a better multi-terminal adaptation Mini Program, can refer toMini Program Adaptation Design Guide。

    # 1. Adaptation scene

    According to the general principle of adaptation, combined with the characteristics of Mini programs, adaptation is usually required in the following three cases:

    Under the same type of equipment, there are subtle differences in size

    Using the Mini Programs provided by the rpx Unit that scales the page layout with little difference in size.

    In the case of allowing the screen to rotate, it can be divided into horizontal screen and vertical screen

    Mobile phone settings "pageOrientation": "auto" or iPad Set up "resizable": true Will allow the screen to rotate when the Page of onResize Events or wx.onWindowResize Method to monitor the operation and determine whether to use a landscape or portrait layout.

    Different types of devices or the ability to freely drag and drop windows PC Mini Program

    The Mini Program is currently based on Webview Achieve, utilize CSS Media queries can monitor screen sizes in real time, showing different views on different screens. UI Layout, Combining Flex Elastic Layout, Grid The grid layout enables a more responsive adaptation scheme.

    # 2. matchMedia - Abstract media query

    Mini Program base library based on the window.matchMedia API Added a set of procedural and defined interfaces match-media The developer can use the <match-media> and wx.createMediaQueryObserver To explicitly use the media query capability, which has the following advantages for multiterminal adaptations

    1. Developers can more easily and explicitly use Media Query Capabilities, rather than being coupled to the CSS File, difficult to reuse.
    2. Able to work in WXML In combination with the dynamic use of data binding, not only can do the component show or hide, in the procedural API Greater plasticity in, for example, the ability to dynamically add depending on size changes class Class name, change the style.
    3. Can be nested with the Media Query Component, that is, able to accommodate local component layout style changes.
    4. After componentization, encapsulation is stronger, it can isolate styles, templates, and interactive events bound on the template, and it can also provide higher reusability.
    5. Built-in browser API , is able to operate at all levels based on the Webview It is used in Mini programs with good compatibility.

    match-media Specific methods of use can refer to the relevant API file。

    # 3. Adaptive layout

    In order to allow developers to better adapt to the large screen, the Mini Program provides [row/col assembly](/miniprogram/dev/extended/Component-plus /grid.html) For developers to use.

    The main features of adaptive are:

    • The whole line is at most only 24 The extra arrangement will automatically wrap down the line
    • Each size setting does not affect the layout of the other sizes

    Design guidelines and code examples

    We also provide[Multiterminal Adaptation Example](https://github.com/WeChat mini-program /miniprogram-demo), Experience Path:Expanding capacity -> Multi-terminal adaptation (need to experience on the PC side)

    In the example Mini Program, based on the [row/col assembly](/miniprogram/dev/extended/Component-plus /grid.html) Simple implementation of common adaptation scenarios, such as:

    • The larger the screen, the layout is the same, and the module expands left and right

    • The larger the screen, the more content, the module content is lined up

    • The larger the screen, the layout changes, and the module content collapses / To show

    # 4. Column model

    in PC Allows a large scale display of Mini Programs, the Mini Programs are supported withColumn modelDisplay. The column mode can divide the WeChat window into two halves, each showing a page.

    frameset-screenshot