跳到主要内容
版本:v7

Web View

Web View(网页视图)为原生设备上的网络应用提供动力。

对于集成了 Capacitor 的应用,Web View 会自动提供。

对于 Cordova 应用,Ionic 维护了一个 Web View 插件。使用 Ionic CLI 时,默认会提供该插件。

什么是 Web View?

Ionic 应用是使用 Web 技术构建的,并通过 Web View 进行渲染,这是一种全屏且功能完整的网页浏览器。

现代 Web View 提供了许多内置的 HTML5 API,用于访问硬件功能,如摄像头、传感器、GPS、扬声器和蓝牙。但有时也可能需要访问平台特定的硬件 API。在 Ionic 应用中,可以通过桥接层访问硬件 API,通常是通过原生插件暴露 JavaScript API 来实现。

展示 Ionic 应用中 Web View 架构的示意图,显示了原生应用组件与 Web 组件之间的桥接。

Ionic Web View 插件专为现代 JavaScript 应用而设计。对于 iOS 和 Android,应用文件始终使用 http:// 协议托管,并通过在本地设备上运行的优化 HTTP 服务器提供服务。

CORS

Web View 强制执行 CORS(跨源资源共享),因此外部服务正确处理跨源请求非常重要。有关在 Ionic 应用中处理 CORS 的信息,请参阅 CORS 常见问题解答

文件协议

Capacitor 和 Cordova 应用托管在本地 HTTP 服务器上,并通过 http:// 协议提供服务。然而,一些插件尝试通过 file:// 协议访问设备文件。为了避免 http://file:// 之间的冲突,设备文件的路径必须重写以使用本地 HTTP 服务器。例如,在应用中渲染之前,file:///path/to/device/file 必须重写为 http://<host>:<port>/<prefix>/path/to/device/file

对于 Capacitor 应用,按如下方式转换文件 URI:

import { Capacitor } from '@capacitor/core';

Capacitor.convertFileSrc(filePath);

对于 Cordova 应用,Ionic Web View 插件提供了一个用于转换文件 URI 的工具函数:window.Ionic.WebView.convertFileSrc()。还有一个对应的 Ionic Native 插件:@awesome-cordova-plugins/ionic-webview

实现方式