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

摘要:
思想:1.应用内部跳转至外部链接时,需处理为打开带原生导航栏的新页面2.在原生导航栏中处理回退,为了回退后不直接退出应用,需执行其他操作,据hbuilder-窗口管理-关闭页面叙述:http://dev.dcloud.net.cn/mui/window/mui.back()仅处理窗口逻辑,若希望在窗口关闭之前再处理一些其它业务逻辑,则可将业务逻辑抽象成一个具体函数,然后注册为mui.init方法的

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

免责声明:文章转载自《vue-打包为webapp,如何解决应用内跳转外部链接返回导致退出应用》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇使用百度地图API实现轨迹回放Grid布局下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Vue 项目添加单元测试发现的问题及解决

用 Jest 测试单文件组件 1、安装 Jest 和 Vue Test Utils npm install --save-dev jest @vue/test-utils 2、配置 package.json // package.json { "scripts": { "test": "jest" } } 3、需要安装和配置 vue-j...

vue路由懒加载

当打包构建应用时,javascript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 结合Vue的异步组件和webpack的code splitting feature,轻松实现路由组件的懒加载。 我们要做的就是把路由对应的组件定义成异步组件: const Foo =...

vue下实现WebRTC

1.1 WebRTC简介 WebRTC,名称源自网页即时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的实时通信框架,提供了一系列页面可调用API。 参考定义: 谷歌开放实时通信框架 在上一篇博客Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互 中...

vue 文件中的注释

在每个代码块内,注释的时候,需要使用各自语言的注释语法去注释(HTML、CSS、JavaScript、Jade 等)。在文件最顶部注释的时候用HTML的注释语法:<!— 在这里写注释的内容 --> 。 html 注释: <!-- 注释,单行或多行 --> pug(html) 注释:https://pugjs.org/zh-cn...

webpack4.x 从零开始配置vue 项目(一)基础搭建项目

序 现在依旧记得第一次看到webpack3.x 版本配置时候的状态刚开始看到这些真的是一脸懵。希望这篇文章能帮到刚开始入门的同学。 webpack 是什么? webpack是一个模块化打包工具,webpack 通过入口分析项目结构,找到JavaScript模块以及一些不能直接在浏览器上运行的语言、语法等 如(scss、ts、es6+等),并将其打包成可以直...

浅析vue混入(mixin)

  vue中的混入,可以在一定程度上提高代码的复用性。通俗来说,混入类似于“继承”,当前组件对象继承于组件对象,一般情况下遵循“就近原则”。但是与继承不同的是,继承一般都跟随着属性的重写与合并,混入在不同的配置项中,有着不同的混入策略,下面会一一进行介绍vue不同配置项的混入策略。vue混入的基本流程如图所示,混入属性的合并是发生在组件的生命周期钩子调用之...