youxi-app/pages/programming/web-view.uvue

<script setup lang='ts'>
import { ref, onMounted, onUnload } from 'vue'
import Loading from '@/components/loading.uvue'
import { router, user } from '@/.cool'
// const baseUrl = ref('http://192.168.110.102:8601')
const baseUrl = ref('https://oss.xiaoxiongcode.com/gui/index.html')
const webviewSrc = ref('')
const showWebview = ref(false)

var isLoading = ref(true)

function handleLoad() {
  isLoading.value = false
}
function handleMessage(e) {
  console.log(e)
}

onMounted(() => {
  const url = router.query().url
  if (url) {
    webviewSrc.value = baseUrl.value + '?token=' + user.token + '&userId=' + user.info.value?.userInfo.userId + '&sb3Url=' + url
  } else {
    webviewSrc.value = baseUrl.value + '?token=' + user.token + '&userId=' + user.info.value?.userInfo.userId
  }
  showWebview.value = true
})

// iOS WKWebView 在页面销毁后音频不会自动停止，需要先销毁 webview
onUnload(() => {
  showWebview.value = false
  webviewSrc.value = ''
})
</script>
<template>
  <Loading v-show="isLoading" />
  <web-view v-if="showWebview" id="webView1" :src="webviewSrc" class="w-full h-full" @load="handleLoad"
    @message="handleMessage"></web-view>
</template>
<style lang="less" scoped></style>