前端本地环境 HTTPS 配置，解决 WebView 白屏问题

前端

2023-11-01 00:20:53

移动端 WebView 本地环境配置 HTTPS

随着移动端开发的普及，越来越多的 Web 应用需要在 WebView 中打开。然而，在移动端的 WebView 中打开本地页面时，经常会出现白屏的问题。

问题根源：缺少 HTTPS 支持

研究表明，移动端的 WebView 对本地页面默认是不支持 HTTPS 的。因此，当我们尝试在 WebView 中打开一个使用 HTTPS 协议的本地页面时，就会出现白屏。

解决办法：配置本地 HTTPS 环境

为了解决这个问题，我们需要在本地环境中配置 HTTPS。本教程将介绍如何使用 Vite + Vue + mkcert 来实现本地 HTTPS 环境的配置。

使用 mkcert 生成自签名证书

首先，我们需要使用 mkcert 来生成一个自签名的证书。自签名的证书虽然不是由受信任的证书颁发机构颁发的，但对于本地开发环境来说已经足够了。

# 安装 mkcert
brew install mkcert

# 生成自签名证书
mkcert -install

配置 Vite + Vue

接下来，我们需要在 Vite + Vue 项目中配置 HTTPS。

在 vite.config.js 中添加以下内容：

// vite.config.js
module.exports = {
  server: {
    https: {
      key: './localhost.key',
      cert: './localhost.crt',
    },
  },
};

启动 HTTPS 服务

现在，我们可以启动 HTTPS 服务了。

# 安装 HTTPS 服务
npm install -g serve-https

# 启动 HTTPS 服务
serve-https

移动端 WebView 打开本地页面

最后，我们可以使用移动端的 WebView 来打开本地页面了。

// iOS
let url = "https://localhost:3000";
let request = NSURLRequest(URL: NSURL(string: url)! as URL)
webView.load(request as URLRequest)

// Android
WebView webView = new WebView(this);
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://localhost:3000");