网页视图

网页视图为原生设备上的 Web 应用提供支持。

与 Capacitor 集成的应用会自动提供网页视图。

对于 Cordova，Ionic 保持了一个 网页视图插件。该插件在使用 Ionic CLI 时默认提供。

什么是网页视图？

Ionic 应用使用 Web 技术 构建，并使用网页视图渲染，网页视图是一个全屏且功能完整的 Web 浏览器。

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

Ionic 网页视图插件专门用于现代 JavaScript 应用。对于 iOS 和 Android，应用文件始终使用 http:// 协议托管，并使用在本地设备上运行的优化 HTTP 服务器进行服务。

CORS

网页视图执行 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 网页视图插件 提供了一个用于转换文件 URI 的实用程序函数：window.Ionic.WebView.convertFileSrc()。还有一个对应的 Ionic 原生插件：@awesome-cordova-plugins/ionic-webview。

实现

• iOS: WKWebView
• Android: WebView for Android