场景
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相关描述。