vue中使用rem布局以及解决Hubulider打包点击返回按钮直接退出问题

fnResize()
window.onresize = function () {
  fnResize()
}

// 设计稿750 假如宽 750px 高 340px  转换为rem 宽 7.5rem 高 3.4rem
function fnResize () {
  var deviceWidth = document.documentElement.clientWidth || window.innerWidth
  if (deviceWidth >= 750) {
    deviceWidth = 750
  }
  if (deviceWidth <= 320) {
    deviceWidth = 320
  }
  document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
}

//不需要mui.js版本
document.addEventListener('plusready', function () {
  var webview = plus.webview.currentWebview()
  plus.key.addEventListener('backbutton', function () {
    webview.canBack(function (e) {
      if (e.canBack) {
        webview.back()
      } else {
        //webview.close(); //hide,quit
        //plus.runtime.quit();
        //首页返回键处理
        //处理逻辑:1秒内,连续两次按返回键,则退出应用;
        var first = null
        plus.key.addEventListener('backbutton', function () {
          //首次按键,提示‘再按一次退出应用’
          if (!first) {
            first = new Date().getTime()
            Toast({
              message: '再按一次退出应用',
              position: 'bottom',
              duration: 1000
            });
            /*console.log('再按一次退出应用')
            setTimeout(function () {
              first = null
            }, 1000)*/
          } else {
            if (new Date().getTime() - first < 1500) {
              plus.runtime.quit()
            }
          }
        }, false)
      }
    })
  })
})

//  原文链接:https://blog.csdn.net/qq_25252769/article/details/76913083

注: 这里设置的比例是 100px = 1rem,例如:元素宽度为 100px 时,可以直接写成 1rem

你可能感兴趣的:(vue)