uni-app cli创建的vue3.0项目，打包H5后web-view组件页面在ios15以下打不开

uni-app cli创建的vue3.0项目，打包H5后web-view组件页面在ios15以下打不开

示例代码：

<web-view  
    :src="  
      `https://home.mi.com/views/deviceReset.html?model=yeelink.light.bslamp1&amp;locale=zh_CN`  
    "  
  >
</web-view>

操作步骤：

H5 web-view组件打开进入三方页面,IOS15以下白屏

预期结果：

正常打开

实际结果：

打开白屏

bug描述：

APP打开通过uniapp的web-view组件打包的H5页面在iOS15以下，打开页面白屏



| 信息类别       | 内容                                 |
|----------------|--------------------------------------|
| 产品分类       | uniapp/H5                            |
| PC开发环境     | Mac                                  |
| PC操作系统版本 | macOS Monterey                       |
| 浏览器平台     | 手机系统浏览器                       |
| 浏览器版本     | ios15以下系统APP嵌套H5               |
| 项目创建方式   | CLI                                  |
| CLI版本号      | ^3.0.0-alpha-3030020211208002        |

更多关于uni-app cli创建的vue3.0项目，打包H5后web-view组件页面在ios15以下打不开的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

去掉多余的 ’ 符号

更多关于uni-app cli创建的vue3.0项目，打包H5后web-view组件页面在ios15以下打不开的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我用这个是因为model是个动态变量，跟这个没关系，设置一下web-view的宽和高解决了我的问题

问题可能源于iOS 15以下系统对web-view组件中某些URL格式或JavaScript特性的兼容性支持不足。根据你的描述，可以尝试以下排查和解决方案：

  1. 检查URL编码：确保src中的URL参数正确编码。你示例中的&amp;在HTML中会被解析为&，但在某些iOS版本中可能引起解析问题。建议直接使用&，并确保整个URL字符串正确编码：

    <web-view :src="`https://home.mi.com/views/deviceReset.html?model=yeelink.light.bslamp1&locale=zh_CN`"></web-view>

  2. 验证网络请求：在iOS设备上使用Safari开发者工具（通过Mac连接）检查web-view加载页面的网络请求和错误。白屏可能是由于页面资源加载失败或跨域限制导致。

  3. 降级JavaScript特性：如果目标页面使用了较新的JavaScript API（如ES6+语法），可能在旧版iOS中不被支持。尝试在vue.config.js或uni-app配置中启用Babel转译，确保代码兼容到iOS 10+：

    // 在uni-app配置中设置编译兼容性
transpileDependencies: true

  4. 测试基础页面：简化测试，将src替换为一个简单的静态页面（如https://example.com），确认是否仍出现白屏。如果正常，问题可能出在目标页面的内容或第三方服务兼容性上。

  5. 更新uni-app版本：确保使用最新的uni-app CLI版本（当前为3.0+），旧版本可能存在已知的iOS兼容性问题。运行以下命令更新：

    npm update [@dcloudio](/user/dcloudio)/uni-cli-shared

  6. 检查iOS WebView限制：iOS 15以下系统的WebView对某些HTML5特性支持较弱，如果目标页面依赖这些特性，可能导致渲染失败。尝试在页面头部添加兼容性meta标签：

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
回到顶部