HTML5 + development of mobile app tutorial 4-Mui in several open page difference, html54-mui

HTML5 + development of mobile app tutorial 4-Mui in several open page difference, html54-mui

[Preface]

Using hbuilder + mui for app for a period of time, there were many problems during the period,

Self exploration, made an app, see: http://uikoo9.com/dishi/download

If your level is higher than this, skip this step.

Level]

Because hbuilder + mui is used for interest, the source code is not viewed,

Stay at the summary level, so please forgive me for anything wrong.

[Several ways to open a page]

1. Create a subpage during initialization

2. Open the new page directly

3. Pre-load the page

[Example]

1. Create a subpage during initialization

Mui. init ({subpages: [{url: your-subpage-url, // subpage HTML address, supports local address and network address id: your-subpage-id, // subpage flag styles: {top: subpage-top-position, // The position bottom: subpage-bottom-position on the top of the subpage, // The position width at the bottom of the subpage: subpage-width, // The width of the subpage. The default value is 100% height: subpage-height. // The height of the subpage. The default value is 100% ......}, extras: {}// additional extension parameter}]});

2. Open the new page directly

Mui. openWindow ({url: new-page-url, id: new-page-id, styles: {top: newpage-top-position, // bottom at the top of the new page: newage-bottom-position, // position at the bottom of the New Page width: newpage-width, // The width of the new page. The default value is 100% height: newpage-height. // The height of the new page, the default value is 100% ......}, extras :{..... // custom extension parameter, which can be used to process cross-page transfer value} show: {autoShow: true, // automatically displayed after the page loaded event occurs. The default value is true aniShow: animationType, // The animation displayed on the page. The default value is "slide-in-right"; duration: animationTime // The duration of the page animation. The default value is 100 milliseconds for the Android platform and 200 milliseconds for the iOS platform ;}, waiting: {autoShow: true, // The waiting box is automatically displayed. The default value is true title: 'loading... ', // The prompt content displayed in the waiting dialog box options: {width: waiting-dialog-widht, // The width of the background area of the waiting box. By default, the appropriate width height is automatically calculated based on the content: waiting-dialog-height, // height of the background area of the waiting box. By default, the appropriate height is automatically calculated based on the content ......}}})

3. Pre-load the page

// Method 1mui. init ({preloadPages: [{url: prelaod-page-url, id: preload-page-id, styles :{}, // window parameter extras :{}, // custom extension parameters subpages: [{},{}] // subpages of the pre-loaded page}]}); // method 2var page = mui. preload ({url: new-page-url, id: new-page-id, // the url of the current page is used as the id styles :{} by default, // window parameter extras: {}// custom extension parameters });

[Differences]

1. subpages and non-subpages

In the preceding three methods, the pages opened in step 2 and Step 3 are not subpages,

The difference is that a subpage is equivalent to an iframe in html, rather than a subpage is equivalent to a new browser window loading an html

2. The subpage applies to the slide menu.

The child page has its own point and is applicable to index.html#list.html,

If index.html(++++list.html (sub-page) is used, the sub-page will automatically follow when the page slides right,

If index.html(++++list.html (New Page) is used, the homepage is right-slide, and the new page is not right-slide, so you have to process the new page separately.

3. Frequent sub-page Switching

If the page slides around frequently, list.html will appear on the low-configuration mobile phone to hide index.html,

If you use the subpage mode, you will not be able to use the new page mode.

4. apply to sub-pages and pull-down refresh and Load

Before the big drop-down refresh, we used the form of a new page,

According to the tutorial on the official website, it was not successful,

After looking at the source code, we found that the pull-down refresh must be in the form of a subpage,

If your list.html#is A subpage of index.html, you can pull down and refresh the page.

5. The new page applies to the new page.

Open a new page, suitable for viewing details and so on, you need to open a new page,

In addition, mui encapsulates the back method of the new page, so you don't need to worry about it.

6. Pre-load the page in two ways

The first is to pre-load data during initialization,

This situation is suitable for your use of this page after a long time,

If you want to access the page immediately and use it, you will get null.

The second method is similar to open,

I personally feel that there is no big difference,

The only difference is that open is opened directly,

Preload is just for loading. You can choose the time to open it later.

7. Summary

To pull and load data from a drop-down list, use the sub-page,

To open a new page, use the new page method,

A page needs to be loaded but is not used yet. Use the pre-load method.