Tutorial 04-the most difficult thing to do is mui and hbuilder04-

Tutorial 04-the most difficult thing to do is mui and hbuilder04-
Preface

The first few articles talk about some basic tutorials on how to develop an app using HBuilder,

Now let's take a look at the difficulties in HBuilder app development, or the difficulties in getting started,

Mui,

If you didn't study mui, you would be eager to get started with HBuilder. Then, your development process is painful,

Taking a moment to study mui will be of great help for your subsequent app development.

URL

If the tutorial is good, there will be omissions. You need to read the official documents carefully,

Address: http://dcloudio.github.io/mui/

Init

Mui encapsulates many common page methods and needs to be set in init. For example:

1. pull-up and pull-up to refresh the corresponding loading sub-page

mui.init({    subpages : [qiao.h.normalPage('list')]});

To implement pull-up loading and pull-down refresh, you must use the subpage method and set it in init.

2. gesture events and default events

Long press event, back event, menu event, it is best to set in init,

mui.init({    keyEventBind : {        backbutton : false,        menubutton : false    },    gestureConfig : {        longtap:true    }});

Wait until loading is complete

All nativejs methods should be called after loading is complete,

That is:

// Put all methods here mui. plusReady (function () {window. addEventListener ('detailitem', detailItemHandler );});

If the task is executed without waiting for nativejs to load, an error is reported.

Use tap instead of click

Unlike traditional pages, use tap instead of click for all gesture click operations,

In this way, your app will have a better experience.

Value Transfer between pages

When html is used as an app, it is inevitable that values are transferred between pages,

There are two recommended methods:

1. Custom Event values

Activate a custom event with mui. fire on the page:

// View qiao. on ('# todolist li', 'tap', function () {qiao. h. fire ('detail', 'detailitem', {id: $ (this ). data ('id ')});});

Listen to custom events on the target page:

// Put all methods here mui. plusReady (function () {window. addEventListener ('detailitem', detailItemHandler );});

2. evaljs pass the value

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

You cannot use evaljs to upload all values,

Call the method on the target page on the page:

qiao.h.indexPage().evalJS("showBackBtn();");

Define the corresponding method on the target page:

function showBackBtn(){    $('.menua').removeClass('mui-icon-bars').addClass('mui-icon-back');    $('.adda').hide();}

Custom Style

If you want to customize the app style,

It's easy to define the css style.

We recommend that you use css class to overwrite the native class to customize the app style.

Conclusion

This article is short but important,

When you encounter problems that cannot be developed,

Go back and check whether the above rules are followed,

90% of problems can be solved.

More Tutorials:

HBuilder development App Tutorial: http://uikoo9.com/book/detail/3

More Study Notes: http://uikoo9.com/book

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.