vue-打包为webapp，如何解决应用内跳转外部链接返回导致退出应用

时间：2022-01-23 17:59:54

思想：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"
            }
          }
        }
      });
    },
}

 

        

相关文章