【小程序质量提优解决方案】(二)内嵌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 的边界条件处理,不要拼接了一个不存在的地址。

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


目录
相关文章
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
894 1
|
16天前
|
移动开发 开发框架 小程序
轻松搭建婚恋交友系统源码,H5/小程序/APP自动适配,智能匹配恋爱交友平台快速落地
婚恋交友系统涵盖在线交友、线下活动、专业服务、社交娱乐等,满足用户多样化需求。系统设计简洁易用,提供实名认证、多注册方式及安全保护,确保用户隐私和数据安全。功能丰富,支持图文展示、筛选匹配、聊天互动、虚拟礼物等,提升互动趣味性。平台可分类管理用户、审核信息、智能推荐,优化用户体验。基于TP6+Uni-app框架,实现跨平台同步,支持二次开发,适应不同市场需求。 [了解更多](https://gitee.com/multi-customer-software/jy)
|
29天前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
13天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
14 0
|
2月前
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
90 8
|
3月前
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
3月前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
112 3
|
3月前
|
小程序 机器人 开发者
QQ 小程序已发布,但无法被搜索的解决方案
我的 QQ 小程序在 2024 年 8 月就已经审核通过,上架后却一直无法被搜索到。打开后,再在 QQ 上下拉查看 “最近使用”,发现他出现一下又马上消失。
58 2
|
4月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
520 3
|
10天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。