使用hbuilder将vue-cli打包后的网站转成webapp返回按钮无效等问题处理

分为两种情况进入app需要登录和进入app不需要登录

1,不需要登录

只需在打包配置文件sitemap.json添加配置easyConfig配置

"pages": [
    {
        "webviewId": "__W2A__xxxx.com",
        "matchUrls": [
			{"pathname":"http://xxxx.com"}  //首页
		],
		"easyConfig": {
			"back":{
				"history":true //允许执行history.back  
			}
		}
    }
]

关于easyConfig更多配置:https://ask.dcloud.net.cn/article/12750

2,进入app需要登录(或者判断是否需要登录)

这种情况下如果使用1的配置,如果从登录进入首页,在首页后退双击会无法退出,因为从登录页进入首页,最后一层页面为登录页,首页后退会退回登录页,由于已经登录了,所以又会调回首页,导致在首页点击后退按钮页面不停刷新却无法退出;

再次打开app是直接进入index.vue,这时的后退双击是可正常退出app的,因为此时最后一层页面为首页

这种情况下有一种解决办法就是自定义返回按钮事件:

步骤一:

删除掉1中的easyConfig配置,打开vue项目中的public文件夹,新建static文件夹,下载mui.min.js放到里面去,编辑index.html,其中homePage中放置不返回且连续两次返回需要退出的页面hash

<script src="./static/mui.min.js"></script>
<script>
	// 一级页面不返回,连续按两次退出,根据项目自行添加homePage 里的值
    const homePage = ['#/Authen', '#/','#/Game', '#/InviteLogin']
    mui.plusReady(function () {
      // 首页返回键处理
      // 处理逻辑:1秒内,连续两次按返回键,则退出应用;
      var first = null
      var webview = plus.webview.currentWebview()
      plus.key.addEventListener('backbutton', function () {
        //在顶层
        if (homePage.indexOf(this.location.hash) !== -1) {
          // 首次按键,提示‘再按一次退出应用’
          if (!first) {
            first = new Date().getTime()
            mui.toast('再按一次退出应用')
            setTimeout(function () {
              first = null
            }, 1000)
          } else {
            if (new Date().getTime() - first < 1000) {
              plus.runtime.quit()
            }
          }
        } else { 
          webview.canBack(function (e) {
            if (e.canBack) {
              webview.back()
            } else {
              webview.close() // hide,quit
              // plus.runtime.quit()
            }
          })
        }
      }, false)
    })
  </script>

步骤二:

修改vue的路由配置,将登录页设置为默认路由地址,比如上面#/Authen对应的登录页面,则需要配置路由:

...
  {
    path: '/',
    name: 'Authen',
    component: Authen
  },
  {
    path: '/Authen',
    name: 'Authen',
    component: Authen
  },
...

3,存在问题

1)尽管2这个方法可以解决登录条件下的返回双击退出问题,但是在双击返回的第一次仍会刷新一次页面

2)此种方法需要将首页设置为登录页,尽管一般会配置已经登录自动跳转,但是登录页还是会闪现一下

猜你喜欢

转载自blog.csdn.net/weixin_36185028/article/details/103125354