【小程序质量提优解决方案】(二)内嵌H5加载异常(404)

简介: 【小程序质量提优解决方案】(二)内嵌H5加载异常(404)

一、异常时C端用户感知
当C端用户访问的页面发生加载异常时,会根据异常原因展示以下页面之一,此时用户无法继续访问页面,仅可刷新、返回上一页面或关闭小程序;

下图以部分错误码为例:

404

502




二、异常发生的技术原理

疑问:为什么用户会出现这个错误页?
回答:因为用户打开了一个小程序内嵌WebView 形式承载的H5页面,但是当前这个页面的url 在请求服务端源头的时候请求异常,返回 404、502 等一系列错误导致打不开进入了统一报错页。

WebView在加载失败时会显示一个失败原因的界面,各个手机显示的界面还都不一样,部分手机还会把Url显示出来;所以支付宝做了统一加载失败的界面,并且把错误码透出给到用户/开发者做分析定位原因。




三、异常对小程序有什么影响
从支付宝统计数据中发现,小程序内嵌H5页面加载问题上涨与用户流失率上涨、用户负面反馈量呈正相关,页面问题影响用户体验,将导致用户流失率升高,降低用户对小程序黏性。
词语解释:用户流失指的是用户遇到此类错误页的时候,操作关闭按钮、返回、杀进程、压后台等不同方式离开小程序或者支付宝的场景。


四、常见哪些原因导致异常发生、如何修复
1.errorCode-1202,subErrorCode-404
1.1错误表象


1.2具体的根因
找不到与所访问网址对应的页面。
1.2.1 常见的找不到对应页面的原因
服务器上的文件被删除。如果你删除 HTTP 服务器上 Web 容器依赖的文件,就有可能引发 404 错误
服务器上的文件被迁移到其他目录。如果你移动了 HTTP 服务器上 Web 容器依赖的文件,也有可能引发 404 错误。比如,将文件从 文件夹A 移动到了 文件夹B,此时引用该文件的页面将会发生 404 错误
在服务器上修改一个文件也可能导致 404 错误。 如果你修改了一个资源文件(html、js、模板等)中,而没有重新检查文件中引用的其他资源的路径,那也有可能引发一个404错误
另一个常见的错误是 URL 拼写错误。可能因为手误将路径 /alipay 错误的拼写为 /allpay; 或者在进行动态 URL 拼接的时候,错误处理了边界条件,比如一个 url 被重复拼写了 path 后缀,典型的如 /alipay//icon/icon/1

1.3解决方案
请检查站点的配置,确认对应资源存在且可访问。

1.3.1 如何避免发生该错误
谨慎地进行文件删除操作。当在服务器上进行文件或文件夹的删除操作时,请务必确认该文件没有被引用。最简单的办法,你可以全局搜索该文件名进行确认。
小心文件的移动操作。当你在服务器上进行文件移动操作时,确认引用该文件的代码被同步修改。
修改文件时也要确认依赖的文件路径是正确的。当进行文件修改时,请确保修改后对资源路径的依赖是正确的。
当心 URL 拼写/拼接 错误。简单的拼写错误多数会在调试时被发现,要特别小心动态拼接的 URL 的边界条件处理,不要拼接了一个不存在的地址。

更多小程序质量提优能力可前往质量洞察全息检测查看。


目录
相关文章
|
2月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
57 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
28天前
|
小程序 Android开发 iOS开发
ISO钉钉小程序小程序webview打开nextjs应用异常
ISO钉钉小程序小程序webview打开nextjs应用异常
38 3
|
5天前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
2月前
|
小程序 前端开发 JavaScript
【电商新机遇】支付宝小程序如何助你打造爆款电商解决方案?揭秘背后的技术奥秘!
【8月更文挑战第27天】本文详细介绍如何利用支付宝小程序构建电商应用,覆盖从项目初始化、页面设计、功能开发到数据分析的全流程。首先,需注册开发者账号并安装相关工具;随后创建项目,并按示例配置基本页面结构;接着设计商品列表等界面布局;再实现商品展示等功能;最后运用支付宝提供的工具进行数据分析,以优化用户体验及营销策略。跟随本教程,您将能打造出一款完整的电商小程序。
59 1
|
2月前
|
监控 小程序 数据处理
揭秘支付宝小程序性能优化秘籍:从加载到运行,每一步都快人一步!
【8月更文挑战第27天】本文深入探讨了支付宝小程序性能优化的关键技术和策略,包括减少网络请求、利用CDN加速、代码按需加载、图片压缩、懒加载以及性能监控等多方面内容,并提供了实用的示例代码,帮助开发者显著提升小程序的加载速度与运行效率,创造更佳用户体验。
38 1
|
2月前
|
移动开发 开发框架 小程序
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
|
3月前
|
存储 JSON JavaScript
小程序优化:第三方SDK过大解决方案
小程序开发中,项目目录中存放过大的js包,会被警告影响手机端性能,同时让开发编译启动变得很慢。慢是其次,单是影响性能这一点,就需要解决一下。
|
2月前
|
小程序
微信小程序无法触发onReachBottom的解决方案
这篇文章提供了解决微信小程序中`onReachBottom`事件无法触发的问题的方案。问题的原因可能是`onReachBottom`方法重复,解决方案是删除系统自动生成的该方法。
|
3月前
|
开发框架 小程序 前端开发
私域电商小程序系统开发:提供可行的电商解决方案
私域电商小程序助广州企业融合线上线下业务,利用智能手机普及与网络技术,提供个性化购物体验。开发涉及需求分析、UI设计、前后端开发及测试上线。技术要点包括微信小程序框架、前端后端技术及安全优化。市场竞争需关注用户需求、特色服务、技术创新与合作推广。通过差异化策略抓住市场机遇。
|
2月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
60 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序