vue-打包为webapp,如何解决应用内跳转外部链接返回导致退出应用
思想:1.应用内部跳转至外部链接时,需处理为打开带原生导航栏的新页面
2.在原生导航栏中处理回退,为了回退后不直接退出应用,需执行其他操作,据hbuilder-窗口管理-关闭页面叙述:
http://dev.dcloud.net.cn/mui/window/
mui.back()
仅处理窗口逻辑,若希望在窗口关闭之前再处理一些其它业务逻辑,则可将业务逻辑抽象成一个具体函数,然后注册为mui.init方法的beforeback参数
mounted(){ let _this = this; if(_this.mui==null){ return false; } this.mui.init({ beforeback: function(){ if(_this.openWebView){ //获得列表界面的webview jmyc var viewObj = plus.webview.getWebviewById('jmyc'); //canBack查询窗口是否可退 viewObj.canBack((event) => { var canBack = event.canBack; if(canBack) {//如可退,则返回上一页面 viewObj.back(); } else {//如不可退,则退出窗口 plus.webview.close('jmyc') _this.openWebView = false; } }) return false; } return true; } }); },
methods: { toLink(url){ this.openWebView = true; this.mui.openWindow({ url: url, id: 'jmyc', styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置 titleNView: { // 窗口的标题栏控件 autoBackButton: true, //新打开的窗口是否有返回键 // titleText:"标题栏", // 标题栏文字,当不设置此属性时,默认加载当前页面的标题,并自动更新页面的标题 titleColor:"#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000" titleSize:"17px", // 字体大小,默认17px backgroundColor:"#F7F7F7", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7" progress:{ // 标题栏控件的进度条样式 color:"#00FF00", // 进度条颜色,默认值为"#00FF00" height:"2px" // 进度条高度,默认值为"2px" }, splitLine:{ // 标题栏控件的底部分割线,类似borderBottom color:"#CCCCCC", // 分割线颜色,默认值为"#CCCCCC" height:"1px" // 分割线高度,默认值为"2px" } } } }); }, }
一步一叩首,今天的自己比昨天好一点就行,明天的自己需追寻