mui项目webview的原生标题栏返回的疑点

62 阅读2分钟

场景

mui框架做的app,用webview接入三方链接的页面.

首次尝试

很简单的需求,首页放个按钮,点击获取链接,创建一个webview,加载这个链接:

    mui.openWindow({
            url:'...',
            id:'...',
            show: {
                autoShow: true
            },
            createNew:true,
            styles: {      
                titleNView: {                       
                    autoBackButton:true,                      
                    backButton:{
                    },
                    titleText:title,                
                    titleColor:"#000000",            
                    titleSize:"17px",                 
                    backgroundColor:"#F7F7F7",        
                    progress:{                        
                        color:"#00FF00",               
                        height:"2px"                    
                    },
                    splitLine:{                      
                        color:"#CCCCCC",               
                        height:"1px"    
                    }
                }
           },
    })

上述代码是在首页执行,实际使用出现问题:加载使用第三方页面时,点击左上方标题栏返回按钮时,无法返回首页,只有连续点击退出应用。明显不符合使用习惯

改进1

增加一个过渡页,首页入口触发后openWindow先打开一个新页面,上述代码在新页面执行、加载第三方链接。实际使用,在第三方页面时点击左上角返回按钮,效果体现为直接回到了首页(当前链接和过渡页新页面都被关闭了),符合使用习惯,但为何一次返回关闭两个webview,让人疑惑。

疑惑

点击入口按钮后实际打开了两个webview,过渡页和加载三方链接的webview,但点一次返回将两者都关闭了。为了弄清其中细节。在过渡页增加打印信息

    mui.init({
        beforeback:function(){
            let cur = plus.webview.currentWebview();
            console.log('beforeback >>> ',cur.id)
            return true
        }
    })

在第三方链接的页面点击左上角返回,控制台输出了一条上述打印信息。 再次改进: 将最后一步加载第三方页面链接改为加载本地页面(称页面3)、并在此页面加上上述打印信息,重复操作,点击页面3返回按钮,返回了过渡页并触发了页面3的打印信息;再点击过渡页返回,回到了首页并触发了过渡页的打印信息。这个过程是按打开顺序反向一个个关闭。

在webview加载三方链接的情况下(webview内没有h5+相关逻辑),原生返回按钮貌似触发的并非是此webview的返回,而是父级也就是opener的返回。 暂未找到官方文档api相关描述。