uni-app打包H5后ios手机在微信小程序的webview中顶部加载条一直加载时间很长导致

uni-app打包H5后ios手机在微信小程序的webview中顶部加载条一直加载时间很长导致

操作步骤：

  • 使用 ios手机 （最好是低版本的）通过微信小程序 webview打开页面

预期结果：

  • 正常加载显示

实际结果：

  • 苹果手机下 会一直加载 目前项目中所有的uni-app H5项目都有这样的问题

bug描述：

  • 在苹果手机下进入小程序webview时 顶部一直加载中，导致无法引用项目的微信jssdk 无法跳回小程序
信息类别 信息内容
产品分类 uniapp/H5
PC开发环境 Windows
HBuilderX类型 正式
HBuilderX版本 4.64
浏览器平台 微信内置浏览器
项目创建方式 HBuilderX

Image


更多关于uni-app打包H5后ios手机在微信小程序的webview中顶部加载条一直加载时间很长导致的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app打包H5后ios手机在微信小程序的webview中顶部加载条一直加载时间很长导致的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个现象通常是由于iOS微信WebView对H5页面加载的特殊处理机制导致的。以下是可能的原因和解决方案：

  1. 加载条持续显示的原因：
  • iOS微信WebView对H5页面资源加载有较严格的检测机制
  • 页面中存在未完全加载的资源（如图片、字体等）
  • 异步请求未完全结束
  1. 解决方案建议： a) 确保所有页面资源完全加载：
// 在页面onLoad或onReady中添加
document.addEventListener('load', function() {
    // 资源加载完成处理
}, true);

b) 检查并优化异步请求：

// 确保所有异步请求完成
Promise.all([api1, api2]).then(() => {
    // 所有请求完成后处理
});

c) 针对微信环境特殊处理：

// 判断是否在微信WebView中
if(/MicroMessenger/i.test(navigator.userAgent)) {
    // 微信环境特殊处理
    document.addEventListener('WeixinJSBridgeReady', function() {
        // 微信JS-SDK相关初始化
    });
}
  1. 其他注意事项：
  • 检查是否有未捕获的JS异常
  • 减少页面DOM节点数量
  • 压缩和合并JS/CSS资源
  • 确保所有图片资源都有正确的尺寸声明
  1. 针对微信JS-SDK无法使用的问题：
wx.miniProgram.navigateBack({
    delta: 1
});
回到顶部