customAgent/src/App.vue

<script setup>
import { RouterView, useRoute } from 'vue-router'
import { onMounted, onUnmounted, provide } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app.js'
// import { leaveProject } from '@/utils/api.js'
import wx from 'weixin-js-sdk'
const route = useRoute()
import { isIOS, isAndroid, isPureHarmonyOS, handleFontSize, detectFontSize } from '@/utils/common'
console.log('navigator.userAgent', navigator.userAgent, navigator.userAgentData)
window.wx = wx

// 全局 provide 接线：子组件统一通过 inject('appStore') / inject('xxx') 使用 store
const appStore = useAppStore()
const appStoreRefs = storeToRefs(appStore)
provide('appStore', appStore)
Object.keys(appStoreRefs).forEach((key) => {
  provide(key, appStoreRefs[key])
})

const handleGlobalBrowserExit = (reason, extra = {}) => {
  const payload = {
    reason,
    href: window.location.href,
    route: route.fullPath,
    timestamp: Date.now(),
    ...extra,
  }
  // leaveProject()
  // alert('关闭页面')

  console.log('📴 全局检测到浏览器关闭/返回动作', payload)

  // 在这里统一处理关闭浏览器、手势返回、刷新离开等动作。
  // 如果后续需要接业务方法，直接在这里调用即可。
  // example:
  // someBusinessMethod(payload)
}

const handleBrowserPopState = () => {
  handleGlobalBrowserExit('popstate')
}

const handleBrowserPageHide = (event) => {
  handleGlobalBrowserExit('pagehide', {
    persisted: Boolean(event?.persisted),
  })
}

const handleBrowserBeforeUnload = () => {
  handleGlobalBrowserExit('beforeunload')
}

onMounted(() => {
  var html = document.getElementsByTagName('html')[0]

  // 初始化
  function init() {
    console.log('navigator.userAgent', navigator.userAgent, navigator.userAgentData)
    console.log('handleFontSize called with:', localStorage.getItem('bigFont'))
    if (localStorage.getItem('bigFont') === 'true')
      document.getElementsByTagName('html')[0].style.fontSize = '0.79333275px'
    if (localStorage.getItem('localfontSize'))
      html.style.fontSize = localStorage.getItem('localfontSize')
    // 监听WeixinJSBridge
    if (typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function') {
      detectFontSize()
      handleFontSize()
    } else {
      if (document.addEventListener) {
        document.addEventListener(
          'WeixinJSBridgeReady',
          function () {
            detectFontSize()
            handleFontSize()
          },
          false
        )
      } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', function () {
          detectFontSize()
          handleFontSize()
        })
      }
    }
  }
  init()
  console.log(isPureHarmonyOS(), 'isPureHarmonyOS')
  window.onresize = function () {
    if (!isIOS() && !isAndroid() && !isPureHarmonyOS()) init()
  }

  window.addEventListener('popstate', handleBrowserPopState)
  window.addEventListener('pagehide', handleBrowserPageHide)
  window.addEventListener('beforeunload', handleBrowserBeforeUnload)
})

onUnmounted(() => {
  window.removeEventListener('popstate', handleBrowserPopState)
  window.removeEventListener('pagehide', handleBrowserPageHide)
  window.removeEventListener('beforeunload', handleBrowserBeforeUnload)
})
</script>

<template>
  <div class="app-wrapper opacity">
    <RouterView v-slot="{ Component, route }">
      <keep-alive>
        <component
          :is="Component"
          v-if="Component && route.meta.keepAlive"
          :key="route.name"
        />
      </keep-alive>
      <component
        :is="Component"
        v-if="Component && !route.meta.keepAlive"
        :key="route.name"
      />
    </RouterView>
  </div>
</template>

<style scoped>
.header-box {
  width: 100%;
  height: 88rem;
  display: flex;
  align-items: center;
  background: #e8f2ff;
  padding: 0 24rem 0 54rem;
}

.view {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.left-box {
  display: flex;
  align-items: center;
}

.back-icon {
  display: block;
  width: 18rem;
  height: 32rem;
}

.back-icon img {
  width: 100%;
  height: 100%;
}
</style>
<style scoped lang="scss">
#app {
  .con {
    color: red;
  }
}
</style>