< 文档首页
全部产品
弹性计算
存储服务
数据库
网络
视频与CDN
域名与网站
应用服务
工商财税 知识产权
互联网中间件
移动研发平台 EMAS
移动研发平台EMAS-专有云
云通信
安全
大数据
人工智能
ET大脑
物联网
物联网行业方案
数字金融
管理与监控
区块链
云市场
API与工具
解决方案
钉钉
会员服务
专有云
更多
云游戏

    如何判断页面问题是否与 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
    上一篇：如何抓取网络包
    下一篇：离线包的加载过程是怎样的
    相关文档
    相关产品
    • 移动开发平台mPaaS
      移动开发平台（Mobile PaaS，简称 mPaaS）是源于支付宝 App 的移动开发平台，为移动开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助企业快速搭建稳定高质量的移动 App。
    • 金融分布式架构 SOFAStack
      SOFAStack™（Scalable Open Financial Architecture Stack）包含构建金融级云原生架构所需的各个组件，也是在金融场景里锤炼出来的最佳实践。提供微服务应用开发、部署发布、监控运维、项目管理、容灾高可用等全栈式解决方案，并兼容Dubbo、Spring Cloud等微服务运行环境，提供基于虚拟机的经典PaaS运维和基于Kubernetes的云原生运维能力，助力客户各类应用轻松转型分布式和云原生架构。
    • 移动研发平台 EMAS
      移动研发平台（Enterprise Mobile Application Studio，简称EMAS），面向企业服务市场，期望把阿里巴巴近十年在移动互联网行业沉淀的DevOps研发支撑能力、移动App基础中间件能力开放给客户，帮助传统企业快速实现移动数字化的转型目标。