MUI (1), mui

MUI (1), mui

Today, we use HBuilder + MUI to develop mobile apps. We do not need Android native or IOS native, but only HTML5 + MUI. Small series is also a beginner. If there is any inaccuracy, I hope you can point out that helping small series make corrections can also promote deep learning.
Download HBuilder from the official website: http://www.dcloud.io/#mui ::https://www.muicss.com /.
HBuilder is free of charge. However, you only need to log on and register with HBuilder at ease. It is free of charge.
The first time you start HBuilder, You need to log on and set it easily.
After starting HBuilder, you can view the file and edit the file on the menu tab.

Click the file tab.

After performing the following operations,

After performing the following operations, you will see,

In the project manager, you can see the newly created Project,

This is the basic directory structure. Of course you can also customize it! Double-click the index.html file on the left and you will see

Follow the settings to make it easier to view and modify the settings.
Because the newly created project contains the muiproject template's index.html page, it will be automatically imported to mui.min.jsand mui.min.css,

<script type="text/javascript" charset="utf-8">mui.init();</script>

Mui. init (); this line indicates plug-in initialization. According to the official documentation, the mui framework focuses a lot of configuration functions on mui. in the init method, to use a function, you only need. complete the corresponding parameter configuration in the init method. Currently, the mui. the functions configured in the init method include creating subpages, closing pages, configuring gesture events, pre-loading, pulling-down and refresh, and setting the background color of the system status bar.In addition, the official documents emphasize:Mui needs to initialize many basic controls during page loading, such as listening for the Return key, so it must be called on each page.
The following code is displayed,

 

These two images are all the code, and the results displayed on the computer will be displayed on the mobile phone end (only the Android mobile phone end is displayed, because the mini-Editor uses the Android mobile phone)

<! DOCTYPE html> 
Parameter description: styles indicates window attributes. For details, refer to WebviewStyle in the 5 + standard. Note that the values of height and width are calculated as 100% by default even if they are not set; therefore, if the top value is not "0px", we recommend that you set the bottom value at the same time. Otherwise, 5 + runtime is calculated based on the height of 100%, the actual bottom position of the page may be out of the screen range; the same applies to left and right.
<! Doctype html> 
Complete is the full code of the index_list.html page. The combination of index.html and index_list.html forms this effect:


Native scrolling is used in the webview of the region, which ensures that the scroll bar does not penetrate the top navigation, conforms to the app experience, and ensures smooth scrolling of the list, solving the problem of area scrolling lagging. Index_list.html#index.html:
Mui. init ({subpages: [{url: "html/index_list.html", // The HTML address of the subpage. The local address and network address id are supported: "index_list ", // subpage flag styles: {top: '45px ', // the top position of the subpage. The default height of the mui title bar is 45px bottom: '0px'. // The bottom position of the subpage, the default value is 0px, not defined}]}).
Description: htmlis a new sub-folder created under this project. The index_list.html page is under the html folder.
Android mobile terminal test:

Real machine test parameters: Android 4.2.2 OS. For how to test the real machine, let's take the Android mobile phone as an example. An Android mobile phone 4.2 or a later version has a data cable.
Install a mobile assistant on your computer. Step 1: connect your phone to your computer using the data cable; Step 2: view the toolbar at the bottom of the HBuilder menu bar

Click the downward arrow next to the button pointed by the arrow. If you see

If you see the effect shown in the preceding figure, click this button and you will be able to see it on the mobile phone end. The connection between the mobile phone and the computer cannot be disconnected. If the mobile phone is not scanned, start the mobile assistant, disable HBuilder and refresh the desktop. Then, start HBuilder and repeat the above steps to check whether the mobile phone is identified. If the mobile phone is not identified, please go to Baidu for details.
This is just a simple demo. We recommend that you try it yourself. You also need to develop the habit of reading official documents. If you have any problems, go to the official documents first.
Official documentation: http://dev.dcloud.net.cn/mui/ui/,http://www.html5plus.org/doc/zh_cn/webview.html
Some people may say that my blog is very bad, but I think it is really basic. Remember not to develop the habit of reading the high-end and low-end foundations. This habit is very bad.
Please indicate the source for reprinting. Thank you.