通过DIV模拟一个独立页面，通过DIV的显示、隐藏模拟不同页面的切换，典型的SPA模式.

mui框架基于htm5plus的XMLHttpRequest，封装了常用的Ajax函数，支持GET、POST请求方式，支持返回json、xml、html、text、script数据类型； 本着极简的设计原则，mui提供了mui.ajax方法，并在mui.ajax方法基础上，进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。

plus是5+Runtime的内部对象。

因为公司项目用 MUI 用得比较多，有碰到如下需求：

经常有这样的需求：子页面新增数据后完成后，跳转到父页面的列表界面。但是 MUI 采用的是页面跳转其实是打开新窗口，返回父页面并不会刷新父页面，只是把子页面关闭，父页面从始至终都在那里并没有刷新过。

在以往有讲过MUI 创建新页面 ，其中有提到 extras 传参。

在常规的前端开发中,我们经常使用a标签中的href属性来进行页面之间的跳转和传参.

但是这样会产生一个问题,a标签打开的页面返回时并不是返回到上一个页面,返回只是一个后退的操作.

如果对页面进行多次操作页面,当你想回到上一个页面时,就会来回的切换页面,严重影响体验.

在一个项目中,我们可以写一个公共的JS文件,创建新页面方法,代码如下.

//创建新页面
function openUrl(url, id, params) {
    if (typeof(params) == 'undefined') {
        params = {};
    }
    if (mui.os.plus) {
        mui.openWindow({
            id: id,          //url:新页面的地址
            url: url,        //id:新页面的 WebView ID
            extras: params,  //params:页面传参
            styles: {
                statusbar: {
                    //设置新页面状态栏背景颜色，以便达到沉浸式状态栏
                    background: '#3EAD74',
                    color: '#FFFFFF'
                }
            }
        })
    } else {
        window.location.href = url;
    }
}

引用 js 文件后就可以,我们可以用a标签进行快速的使用.

<a href="javascript:openUrl('url','id',{})">打开新的 webview页面</a>

我们可以很方便的用 a 标签进行传参，但是要注意的是，在动态生成的 DOM 结构里，用 a 标签来传参的话，页面跳转会失效。我的建议是用JS点击绑定事件进行页面的跳转和传参。