网页嵌入组件

web-view 是一个在 Uniapp 中用于承载网页内容的组件，提供了跨平台支持的 web 容器功能。该组件可以在 App、小程序、H5 等平台中使用，支持加载网络网页或本地网页。web-view 会自动铺满整个页面，用户可以通过指定 src 属性来加载目标网页。

1. 什么是 web-view 组件？

web-view 组件是一个嵌入网页的容器，允许在 Uniapp 项目中加载并显示外部网页。它支持通过 postMessage 与应用进行消息通信，并且可以配置多种显示样式和事件回调。web-view 在 App 和小程序中有广泛应用，尤其在需要显示外部资源或 H5 页面时非常有用。

使用场景

• 嵌入外部网页：在应用内嵌入一个外部网站或 H5 页面。
• 加载本地网页：在 App 中加载本地存储的 HTML 文件。
• 消息通信：通过 postMessage 机制与嵌入的网页进行双向通信。
• 显示广告或活动页面：用于在应用中嵌入广告、促销活动等网页内容。

2. web-view 组件的常用属性

web-view 组件支持多种属性，用于控制网页加载和样式配置。以下是常用属性的详细说明及使用示例：

属性名	类型	说明	平台差异说明
src	String	指定 web-view 加载的网页 URL	全平台支持
allow	String	设置 iframe 的特征策略（如允许摄像头、麦克风等）	H5
sandbox	String	启用额外的安全限制，如禁止脚本执行、禁用插件等	H5
fullscreen	Boolean	是否让 web-view 全屏显示，默认 true	H5 (HBuilder X 3.5.4+)
webview-styles	Object	配置 web-view 的样式，如进度条颜色、宽高等	App-vue
update-title	Boolean	是否自动更新网页标题，默认 true	App-vue (HBuilder X 3.3.8+)
@message	EventHandle	网页向应用发送消息时触发此事件	H5、App、部分小程序平台支持
@load	EventHandle	网页加载成功时触发	小程序端
@error	EventHandle	网页加载失败时触发	小程序端

2.1 设置 src 属性加载网页

• 说明：通过 src 属性设置 web-view 加载的网页 URL，支持网络链接及 App 端的本地链接。
• 类型：String
• 默认值：无

<template>
  <view>
    <!-- 加载外部网页 -->
    <web-view src="https://example.com"></web-view>

    <!-- 加载本地网页 (仅 App 端支持) -->
    <web-view src="/hybrid/html/local.html"></web-view>
  </view>
</template>

2.2 配置 webview-styles

• 说明：通过 webview-styles 配置 web-view 的样式，比如进度条颜色、宽度和高度等。
• 类型：Object
• 默认值：无

<template>
  <view>
    <!-- 设置 web-view 样式，包括进度条颜色 -->
    <web-view :webview-styles="webviewStyles" src="https://example.com"></web-view>
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const webviewStyles = ref({
      progress: { color: '#FF3333' },  // 设置进度条颜色
      width: '100%',                    // 设置 webview 宽度
      height: '500px'                   // 设置 webview 高度
    });

    return { webviewStyles };
  }
}
</script>

2.3 使用 postMessage 进行消息通信

• 说明：通过 postMessage 实现网页与应用之间的双向通信，网页可以向应用发送消息，应用可以接收并处理。
• 类型：EventHandle
• 平台差异：H5 暂不支持，可使用 window.postMessage。

<template>
  <view>
    <!-- 通过 message 事件监听网页发送的消息 -->
    <web-view src="https://example.com" @message="handleMessage"></web-view>
  </view>
</template>

<script>
export default {
  setup() {
    const handleMessage = (event) => {
      console.log('接收到网页消息:', event.detail.data);
    }

    return { handleMessage };
  }
}
</script>

3. 加载网页与消息通信

以下案例展示了如何使用 web-view 组件加载网页、配置样式和处理消息通信的完整流程。

<template>
  <view>
    <!-- 加载网页并配置样式 -->
    <web-view :webview-styles="webviewStyles" src="https://example.com" @message="handleMessage"></web-view>

    <!-- 加载本地网页 (仅 App 端支持) -->
    <web-view src="/hybrid/html/local.html"></web-view>
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    // 设置 webview 样式
    const webviewStyles = ref({
      progress: { color: '#FF3333' },  // 进度条颜色
      width: '100%',                   // webview 宽度
      height: '500px'                  // webview 高度
    });

    // 处理网页发送的消息
    const handleMessage = (event) => {
      console.log('接收到网页消息:', event.detail.data);
    }

    return { webviewStyles, handleMessage };
  }
}
</script>