文档

如何判断页面问题是否与 H5 容器相关

更新时间:

背景

在 H5 App 的开发过程中,开发者可能会遇到各种前端问题,如渲染问题、卡顿或其他前端异常情况。因为 H5 App 是在 mPaaS 容器中加载的,所以需要界定这类问题是否与容器相关。

处理方法

iOS 平台

当前mPaaS iOS平台上的容器是基于WKWebView实现的(60 基线之后,并配置启用 WKWebView),可以通过如下方法确认前端问题是否与容器相关:

  1. 简化前端复现问题的代码和逻辑,尽量在一个较为简单的 HTML 页面上复现问题。

  2. 通过容器加载该页面(离线在线 页面),确认问题是否可以重现。

  3. 另构造一个原生 iOS 应用,并通过原生 WKWebView 加载相同的页面,查看是否可以重现问题:

    • 如果可以重现问题,则有以下三种可能:

      • 前端代码本身存在问题。

      • WKWebView 自身存在问题。

      • 前端代码和 WKWebView 存在兼容问题。

    • 如果无法重现问题,则考虑可能与 mPaaS 容器相关配置相关,建议搜索群号 41708565 加入钉钉群进行咨询技术支持,并提供复现问题用的 HTML 文件。

Android 平台

在Android平台上,开发者可以选择使用基于UC浏览器内核或原生浏览器内核的容器,可以通过如下方法确认前端问题是否与容器相关:

  1. 简化前端复现问题的代码和逻辑,尽量在一个较为简单的 HTML 页面上复现问题。

  2. 通过UC内核容器加载该页面(离线在线 页面),确认问题是否可以重现。

  3. 通过原生浏览器内核的容器加载该页面(离线在线 页面),确认问题是否可以重现。

  4. 另构造一个原生Android应用,并通过原生Webview加载相同的页面,确认问题是否可以重现。

通过上述测试的组合,开发者可以确认问题是否来自 UC 内核、原生内核、容器或前端本身。

JsAPI 相关问题

JsAPI作为mPaaS容器的特性之一,如果问题和JsAPI相关,则不方便通过原生WebView进行验证。

建议首先从前端观察,剥离JsAPI相关内容后,是否依然存在问题。

  • 如果存在,则当成普通前端问题对待。

  • 如果问题和JsAPI耦合度高,则建议简化JsAPI后再做进一步排查。

离线包页面的处理

对于离线包内的页面,如果需要验证是否存在问题,可以提取出该页面的 fallback url ,通过 Webview加载fallback 页面来快速验证问题。

  • fallback base url位于离线包配置文件H5_json.json 中。

  • fallback base url + 页面相对地址即为某个页面的fallback url。如下图: Dingtalk_20220721155457则直接通过如下地址加载页面: https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/7E3C5B0121415-beimo/20190003/1.xx.xx.2_all/nebula/fallback/www/index.html

  • 本页导读 (0)
文档反馈