web-view-local.uvue

<template>
  <web-view id="web-view" ref="web-view" class="web-view" src="/hybrid/html/local.html" @message="message" @error="error"
    @loading="loading" @load="load" @download="download">
  </web-view>
</template>

<script>
  export default {
    data() {
      return {
        loadError: false,
        loadFinish: false,
        // 自动化测试
        autoTest: false,
        eventMessage: null as UTSJSONObject | null,
        eventDownload: null as UTSJSONObject | null
      }
    },
    methods: {
      message(event : UniWebViewMessageEvent) {
        console.log(JSON.stringify(event.detail));
        let contentStr = JSON.stringify(event.detail);
        // #ifdef APP-IOS
        contentStr = JSON.stringify(event.detail.data[0]);
        // #endif
        uni.showModal({
          content: contentStr,
          showCancel: false
        });
        if (this.autoTest) {
          this.eventMessage = {
            "tagName": event.target?.tagName,
            "type": event.type,
            "data": event.detail.data
          };
        }
      },
      error(event : UniWebViewErrorEvent) {
        this.loadError = true
        console.log(JSON.stringify(event.detail));
      },
      loading(event : UniWebViewLoadingEvent) {
        console.log(JSON.stringify(event.detail));
      },
      load(event : UniWebViewLoadEvent) {
        this.loadFinish = true;
        console.log(JSON.stringify(event.detail));
      },
      download(event : UniWebViewDownloadEvent) {
        console.log(JSON.stringify(event.detail));
        if (this.autoTest) {
          const arr = event.detail.userAgent.split(' ');
          this.eventDownload = {
            "tagName": event.target?.tagName,
            "type": event.type,
            "url": event.detail.url,
            "userAgent": arr[arr.length - 1],
            "contentDisposition": event.detail.contentDisposition,
            "mimetype": event.detail.mimetype,
            "isContentLengthValid": (event.detail.contentLength / 1024 / 1024).toInt() > 1
          };
        }
      },
      // 自动化测试
      testEventDownload() {
        uni.createWebviewContext('web-view')?.evalJS("document.getElementsByTagName('a')[0].click()");
      },
      testEventMessage() {
        uni.createWebviewContext('web-view')?.evalJS("document.getElementById('postMessage').click()");
      }
    }
  }
</script>

<style>
.web-view {
  flex: 1;
}
</style>