uni-app Hbuilder3.98打包5+app ios使用WKWebView出现白屏

发布于 1周前 作者 vueper 来自 Uni-App

uni-app Hbuilder3.98打包5+app ios使用WKWebView出现白屏

示例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="app" class="container app_container" >
<div class="loading_text color-gray">
系统加载中...
</div>
</div>
</body>
</html>

操作步骤:

  1. 新建一个项目,选择5+App,默认模版
  2. 发行,选择ios传统打包
  3. 安装运行

预期结果:

正常打开页面

实际结果:

白屏

bug描述:

模块配置->IOS UIWebview不勾选,打包ios app之后打开app白屏;

Image 1 Image 2 Image 3


1 回复

在使用 uni-app 和 HBuilderX 3.98 打包 5+ App 时,如果在 iOS 上使用 WKWebView 出现白屏问题,可能是由于以下原因导致的。以下是一些常见的排查和解决方法:


1. 检查 WKWebView 的兼容性

  • WKWebView 是 iOS 8 及以上版本引入的,确保你的 iOS 设备版本支持 WKWebView。
  • 如果目标用户使用的是较旧的 iOS 设备,建议回退到 UIWebView(但需要注意,UIWebView 已被苹果标记为过时,可能会影响 App Store 审核)。

2. 检查页面加载逻辑

  • 白屏可能是由于页面加载失败或资源路径错误导致的。检查以下内容:
    • 确保页面路径正确。
    • 检查是否有跨域问题(WKWebView 对跨域请求更严格)。
    • 确保所有资源(如 JS、CSS、图片)都能正确加载。

3. 检查 WKWebView 的配置

  • manifest.json 中,确保 WKWebView 的配置正确。例如:
    "plus": {
      "kernel": {
        "ios": "WKWebView"
      }
    }
  • 如果需要更详细的配置,可以参考 5+ App WKWebView 文档

4. 检查 JavaScript 错误

  • WKWebView 对 JavaScript 的执行更严格,可能会导致某些代码无法正常运行。
  • 使用 Safari 的开发者工具(连接设备后,通过 Safari 的“开发”菜单调试)检查是否有 JavaScript 错误。

5. 检查网络请求

  • WKWebView 对网络请求的限制较多,尤其是 HTTPS 请求。确保所有请求都使用 HTTPS,或者配置允许 HTTP 请求:
    "plus": {
      "kernel": {
        "ios": "WKWebView",
        "allowHTTP": true
      }
    }

6. 检查页面渲染问题

  • 某些 CSS 或 JavaScript 可能会导致页面渲染失败。尝试简化页面,逐步排查问题。
  • 确保页面内容在 WKWebView 中能够正常渲染。

7. 更新 HBuilderX 和 uni-app

  • 确保使用的是最新版本的 HBuilderX 和 uni-app,旧版本可能存在已知的兼容性问题。
  • 更新方法:在 HBuilderX 中,点击菜单栏的“帮助” -> “检查更新”。

8. 调试日志

  • 在代码中添加日志,检查页面加载和渲染的各个阶段是否正常。
  • 使用 console.loguni.showToast 输出关键信息。

9. 回退到 UIWebView

  • 如果问题无法解决,可以暂时回退到 UIWebView:
    "plus": {
      "kernel": {
        "ios": "UIWebView"
      }
    }
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!