Original Address: http: //www.hcoder.net/tutorials/info_79.html
Why MUI birth
1. gap between performance and experience, has been the leading cause of mobile app developers to give up HTML5.
2. The browser innate cut sheet black and white, could not bear to look directly at the page turn animation, shake floating elements, not smooth pull down to refresh, sliding drawer Caton and other issues, which are so HTML5 developers feel frustrated, especially to get Android low-end machines running, throwing mobile phones have a heart;
On the other hand, the browser's default control style is inadequate and ugly, making a nice control is very difficult, there are some simple ui making framework but poor performance. mui framework effectively solve these problems, it is easy to develop a framework for high performance App, is currently the closest to the original framework App effect.
MUI position is: UI framework is closest to the native experience of mobile App
Location-based mui, mui produced several features, lightweight, small, only relates to the UI, move only App born, the original biological interface style.
So please note, mui do something:
1, mui not jq, not encapsulated operation dom
Ui nothing to do with mui do not do that you'd like jq or zepto on their own and does not conflict.
But we do not recommend the introduction of jq or zepto these frameworks in the mobile App, the following reasons:
For performance, the layers of the package framework, especially when traversing cycle dom, affect efficiency, especially on low-end Android phones, we charge only then Si Jin performance in milliseconds, a little improved, to engage in this framework come in, let's dom a lot of effort and wasted.
Native JS quite simple, why need jq?
jq success was not compatible because ie6,7,8,9,10, chrome, ff these browsers, allowing developers to collapse, and the good performance of the browser on the pc, cross-platform compatibility does not affect performance. But jq simply not designed for mobile phones.
The phone only webkit browser (ignore wp, anyway mui does not support wp), do not need this package jq framework to operate dom.
And HBuilder provides a block of code to simplify the development, knocking dg, dq, directly generate document.getElementById ( ""), document.querySelectorAll ( ""), is very quick and easy, and the implementation of performance is very high, and there is no browser compatibility issues.
Found that many developers will jq, anyway, I want to continue using jq no problem in App. But also suggest that you learn js itself.
2, mui, HTML5 +, 5 + Runtime relationship described
mui is a front-end framework, HTML5 + specification is a set of extensions HTML5 capabilities, HTML5 + Runtime is to achieve HTML5 + enhanced browser engine specification.
Somewhat similar to the relationship between bootstrap, w3c and chrome os's.
HTML5 + specification is part of http://www.html5plus.org, HTML5 specification does not define but developers need to do App extended specifications.
DCloud of 5+ Runtime complete implementation of the HTML5 + specification. Meanwhile 5+ Runtime also implements Native.js, one kind of hundreds of thousands of native API calls through a technique js.
To enhance the experience, mui is bound to call some 5 + Rutime of empowerment, mainly plus.webview and plus.nativeUI.
Mui but not a replacement for HTML5Plus, after also no plans to replace all 5+ webview api are wrapped in a layer.
Began to experience MUI
1, install the new version HBUilder
Download: http://www.dcloud.io/
2, the new app projects
3, device debugging and running
Either iOS or Android, or whether it is a real machine simulator, can be connected to HBuilder real machine operation.
In the past to develop App, a need to change the interface, and then package and install it on your phone and enter the interface, change the look of yet. If not, the cycle this action, very inefficient.
Once you have a real machine running, change the code is stored, the phone immediately see the effect, if an error occurs when running on the phone, then log and error messages can also be fed back into the HBuilder console.
Some developers like to alert Dafa, but in fact knock clog in HBuilder of js years, playing with the log to adjust the program better.
4, file structure description
| _ css stylesheets folder
| _ fonts Fonts folder
| _ js JavaScript script folder
| _ index.html file entry
Basic layout
A head
core css mui-bar mui-bar- nav
<header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">hello</h1> </header>
Second, the body portion of
the core css mui-content
< Div class = "MUI-Content" > body portion .... </ div >
Complete code demonstrates
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </head> <body> <div> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">hello</h1> </header> <div class="mui-content"> SUMMARY part .... </ div > </ body > </ HTML >
