HTML5 mobile app development tutorial 4-Differences between several open pages in mui_html/css_WEB-ITnose

[Foreword]

I used hbuilder mui to make an app for a while, and encountered a lot of problems during the period.

I explored it myself and made an app. For details, see: http:/ /uikoo9.com/dishi/download

If your level is higher than this, don’t read it and just skip it.

【Level】

Due to using hbuilder mui I didn't look at the source code out of interest.

It stayed at the usage summary level, so please forgive me for any mistakes.

【Several ways to open the page】

1. Initialization Create a subpage when

2. Open a new page directly

3. Preload page

[Example]

1. Create a subpage during initialization

mui.init({    subpages: [{        url: your - subpage - url, //子页面HTML地址，支持本地地址和网络地址        id: your - subpage - id, //子页面标志        styles: {            top: subpage - top - position, //子页面顶部位置            bottom: subpage - bottom - position, //子页面底部位置            width: subpage - width, //子页面宽度，默认为100%            height: subpage - height, //子页面高度，默认为100%            ......        },        extras: {} //额外扩展参数    }]});

2. Open a new page directly

mui.openWindow({    url: new - page - url,    id: new - page - id,    styles: {        top: newpage - top - position, //新页面顶部位置        bottom: newage - bottom - position, //新页面底部位置        width: newpage - width, //新页面宽度，默认为100%        height: newpage - height, //新页面高度，默认为100%        ......    },    extras: {        ..... //自定义扩展参数，可以用来处理页面间传值    }    show: {        autoShow: true, //页面loaded事件发生后自动显示，默认为true        aniShow: animationType, //页面显示动画，默认为”slide-in-right“；        duration: animationTime //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；    },    waiting: {        autoShow: true, //自动显示等待框，默认为true        title: '正在加载...', //等待对话框上显示的提示内容        options: {            width: waiting - dialog - widht, //等待框背景区域宽度，默认根据内容自动计算合适宽度            height: waiting - dialog - height, //等待框背景区域高度，默认根据内容自动计算合适高度            ......        }    }})

3. Preload page

// 方式1mui.init({    preloadPages: [{        url: prelaod - page - url,        id: preload - page - id,        styles: {}, //窗口参数        extras: {}, //自定义扩展参数        subpages: [{}, {}] //预加载页面的子页面    }]});// 方式2var page = mui.preload({    url: new - page - url,    id: new - page - id, //默认使用当前页面的url作为id    styles: {}, //窗口参数    extras: {} //自定义扩展参数});

[Some differences]

1. Subpages and non-subpages

Among the above three methods, the pages opened in 2 and 3 are not subpages.

The difference is that the subpage is equivalent to an iframe in html, not an iframe in html. A subpage is equivalent to opening a new browser window and loading an html

2. Subpages are suitable for side-sliding menus

Subpages have their own advantages , especially suitable for the situation of index.html list.html,

If it is implemented with index.html (main page) list.html (sub-page), when the main page slides right, the sub-page will automatically follow.

If it is implemented using index.html (main page) list.html (new page), the main page will slide right, but the new page will not slide right, and the new page must be processed separately.

3. Frequent switching of sub-pages

If you frequently swipe left and right, list.html will appear blocked on mobile phones with lower configurations. In the case of index.html,

will not work if you use sub-page mode, and the probability of using new page mode is very high.

4. Subpages are suitable for pull-down refresh and pull-up loading

When doing large pull-down refresh before, the form of a new page was used,

Following the official website tutorial, no matter how you try it, it doesn’t work.

Later I looked at the source code and found that the drop-down refresh must be in the form of a subpage.

is your list.html It must be a subpage of index.html before it can be refreshed by pulling down.

5. New page is suitable for new page

open a new page, suitable for viewing details and the like, when you need to open a new page.

And mui encapsulates the back method of the new page itself, so you don’t need to worry about it.

6. Two ways to preload the page

The first is to preload during initialization,

In this case Suitable for you to use this page after a long time.

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

The second method is similar to open,

Personally, there is not much difference,

The only difference is that open opens it directly,

Preload is just loading, you can choose when to open it later.

7. Summary

If you need to pull down to refresh and pull up to load, please use a subpage,

If you need to open a new page, please use a new page Method,

needs to load a page but will not use it temporarily, please use the preloading method.