MUI:
Official website: http://dcloudio.github.io/mui/
Description: General to read through the official website content, this is the basis for development
Start
1. New Project
Click on the new mobile app on the home page, as follows:
or right-click New in the Project manager, or shortcut key ctrl+n+a
2. Select Template
Selecting the MUI project here will automatically introduce the MUI's JS and CSS as follows:
3. File Structure
The following folders are available by default: Css,fonts,js, as follows
Basic Development
The code is as follows:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <Metaname= "Viewport"content= "Width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />6 <title></title>7 <Scriptsrc= "Js/mui.min.js"></Script>8 <Linkhref= "Css/mui.min.css"rel= "stylesheet"/>9 <Scripttype= "Text/javascript"CharSet= "Utf-8">Ten mui.init (); One </Script> A </Head> - <Body> - <Headerclass= "Mui-bar Mui-bar-nav"> the <aclass= "Mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> - <H1class= "Mui-title">My title</H1> - </Header> - <Divclass= "Mui-content"> + <ulclass= "Mui-table-view"ID= "My_list"> - <binclass= "Mui-table-view-cell"> + <Divclass= "Mui-slider-right mui-disabled"> A <aclass= "Mui-btn mui-btn-red">Delete</a> at </Div> - <Divclass= "Mui-slider-handle"> - Todo 1 - </Div> - </Li> - <Liclass= "Mui-table-view-cell"> in <Divclass= "Mui-slider-right mui-disabled"> - <aclass= "Mui-btn mui-btn-red">Delete</a> to </Div> + <Divclass= "Mui-slider-handle"> - Todo 2 the </Div> * </Li> $ </ul>Panax Notoginseng </Div> - </Body> the </HTML>
View Code
Run:
Direct connection to the real machine run (plug in USB debugging can:)
Choose Run-Phone run-run on XX device
Or use the shortcut key ctrl+r
operation Result:
This is the simple application!!!
hbuilder+ mobile App Development Instance selection template Here you select the MUI project, which automatically introduces the MUI's JS and CSS, as follows: