MUI Development WebApp (1)

MUI Development considerations

Mui HTML5 Development Framework

MUI is a high-performance HTML5 development framework, from UI to efficiency, in the pursuit of native experience, the framework itself has some rules, just contact with the classmate is not very familiar with, special summary of this article; to learn more about MUI, visit the MUI website.

DOM structure

For the DOM of the MUI page, you need to know the following rules:

Fixed bar front

The so-called fixed bar, which is the node with the. Mui-bar (class selector) attribute, is based on the fixed positioned element; Common components include: Top navigation bar (. Mui-bar-nav), bottom toolbar (. mui-bar-footer), Bottom tab (. mui-bar-tab), these elements are subject to a rule: before the mui-content element is placed, even the bottom and bottom tabs are placed before the. Mui-content, otherwise the fixed bar obscures some of the main content;

# # # Everything is wrapped up in a mui-content

In addition to the fixed bar, everything else is wrapped in. Mui-content, otherwise it may be masked by a fixed bar, because the fixed bar is based on fixed positioning and is not constrained by streaming layout, the normal content will still start from the position of top:0, so it will be masked by the fixed bar, MUI in order to solve this problem, the following CSS code is defined:

. Mui-bar-nav ~. mui-content {

padding-top:44px;

}

. mui-bar-footer ~. mui-content {

padding-bottom:44px;

}

. mui-bar-tab ~. mui-content {

padding-bottom:50px;

}

You can, of course, implement a similar effect by customizing CSS, but for ease of use,

It is recommended that all content except the fixed bar be placed in the. mui-content.

Always add the Type property for button buttons

If the button does not have a Type property, the browser defaults to Type=submit logic, so if you place a button with no type on the form form, clicking the button executes the form submission, the page refreshes, and the user experience is very poor.

Window Management

Page initialization: The Mui.init method must be executed

MUI Initializes a number of parameter configurations when the page is initialized, such as keystroke monitoring, gesture monitoring, and so on, so the MUI page must call a Mui.init () method;

Page jump: Discard href jump

When the browser loads a new page, if the page Dom has not been rendered, the page will first appear blank, and then after the DOM rendering is complete, then display the specific content, this is the Web browser technology insurmountable experience barrier; To solve this problem, it is recommended to use

[Mui.openwindow Method] (http://dcloudio.github.io/mui/javascript/#openwindow) Open a new webview,mui will automatically listen to the new page loaded event, if the load is complete, and then automatically display the new page; Extended read:

How the no wait form switch in Hello MUI is implemented

Tip HTML5 One of the performance experience series to avoid cutting pages white screen

Page closed: Do not repeat monitoring Backbutton

The MUI framework automatically encapsulates the page shutdown logic, and if you want to customize the return logic (for example, to edit the return of a page, you need to confirm that you discard the draft and then execute the return logic). You need to rewrite the Mui.back method, do not simply add Backbutton listener through AddEventListener, because AddEventListener will only add a new execution program, the MUI default encapsulation of the listening execution logic will continue to execute, so if only addeventliste Ner The user confirmation box is added, the user will continue to close the window even if Cancel is selected.

Gesture manipulation

Click: Forget click

Fast response is a priority for mobile apps, and research has shown that users can feel the interface stutter when the delay exceeds 100 milliseconds, while the click of a mobile browser has a 300 millisecond delay (as to why it is delayed, and 300 milliseconds in the ins and outs, please self-gu), MUI, in order to solve this problem, encapsulates the tap event, so in any click, forget the click and onclick operation, all using the following code:

Element.addeventlistener (' Tap ', function () {

Click Response Logic

});

MUI Development WebApp (1)