MUI创建新页面

在常规的前端开发中,我们经常使用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点击绑定事件进行页面的跳转和传参。