全部产品
云市场
云游戏

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

更新时间:2020-04-28 19:14:36

背景

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

处理方法

iOS 平台

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

  1. 简化前端复现问题的代码和逻辑,尽量在一个较为简单的 HTML 页面上复现问题。
  2. 通过容器加载该页面(离线在线 页面),确认问题是否可以重现。
  3. 另构造一个原生 iOS 应用,并通过原生 WKWebView 加载相同的页面,查看是否可以重现问题:
    • 如果可以重现问题,则有以下三种可能:
      • 前端代码本身存在问题。
      • WKWebView 自身存在问题。
      • 前端代码和 WKWebView 存在兼容问题。
    • 如果无法重现问题,则考虑可能与 mPaaS 容器相关配置相关,建议通过 提交工单 联系技术支持,并提供复现问题用的 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。如下图:
    fallback url
    则直接通过如下地址加载页面:
    https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/7E3C5B0121415-beimo/20190003/1.0.0.2_all/nebula/fallback/www/index.html