Hbuilder developing the App tutorial 04-The most difficult to fix is the MUI

Objective

The first few talk about some basic tutorials for Hbuilder app development,

Now let's talk about the difficulty of Hbuilder developing the app, or the difficulty of getting started,

Is MUI,

If you do not study MUI on the hasty Hbuilder, then your development process is painful,

Taking a little time to study MUI is a great help in developing your app later.

Url

Tutorials are good, there will be omissions, and you need to read the official documents carefully,

Attached address: http://dcloudio.github.io/mui/

Init

MUI encapsulates a number of common page methods that need to be set in init, for example:

1. and pull-up load, pull down to refresh the accompanying loading sub-page [JS]View PlainCopy

1. Mui.init ({
2. Subpages: [Qiao.h.normalpage (' list ')]
3. });

To implement pull-up loading and drop-down refreshes, you must use a child page in the way that you need to set it in init.

2. Gesture Events and default events

Long press events, back events, menu events, preferably set in Init,

[JS]View PlainCopy

1. Mui.init ({
2. Keyeventbind: {
3. Backbutton: false,
4. Menubutton: false
5. },
6. Gestureconfig: {
7. Longtap:True
8. }
9. });

Wait for loading to complete

All Nativejs methods are best placed after waiting for the load to be completed.

That is

[JS]View PlainCopy

1. All the methods are put here.
2. Mui.plusready (function () {
3. Window.addeventlistener (' Detailitem ', detailitemhandler);
4. });

If you do not wait until the Nativejs load is complete, you will get an error.

Use tap rather than click

Unlike traditional pages, all gestures can be clicked using tap, not click,

This way your app will have a better experience.

Transfer values between pages

Using HTML as an app, it is inevitable that the value is passed between pages,

There are two ways to compare the recommended methods:

1. Custom Event Pass Value

To activate a custom event on a page with Mui.fire:

[JS]View PlainCopy

1. View Details
2. Qiao.on (' #todolist li ', ' tap ', function () {
3. Qiao.h.fire (' detail ', ' Detailitem ', {id:$ (this). Data (' ID ')});
4. });

To listen for custom events on the target page:

[JS]View PlainCopy

1. All the methods are put here.
2. Mui.plusready (function () {
3. Window.addeventlistener (' Detailitem ', detailitemhandler);
4. });

2.EVALJS Transmit Value

This method is not recommended, but can be used occasionally,

All values must not be passed Evaljs.

To invoke the target page method on the page:

[JS]View PlainCopy

1. Qiao.h.indexpage (). Evaljs ("showbackbtn ();");

Define the appropriate method on the target page:

[JS]View PlainCopy

1. function showbackbtn () {
2. $ ('. Menua '). Removeclass ('mui-icon-bars '). addclass (' mui-icon-back ');
3. $ ('. Adda '). Hide ();
4. }

Custom styles

If you want to customize the style of your app,

It's easy to just define a CSS style.

It is recommended to customize the app style by using CSS class to override the native class.

Conclusion

When you are in trouble and can't develop,

90% of the problems can be solved.

More Tutorials:

Hbuilder Development App Tutorial: Http://uikoo9.com/book

Hbuilder developing the App tutorial 04-The most difficult to fix is the MUI