首页 > 其他分享 >uniapp 编译成h5,返回上一页之后没有触发生命周期问题

uniapp 编译成h5,返回上一页之后没有触发生命周期问题

时间:2024-05-07 18:01:42浏览次数:35  
标签:返回 uniapp 生命周期 编译成 h5 一页 日志 链接 页面

今天开发测试的时候,无意中发现点击分享链接进去登陆成功返回上一页的时候,页面直接空白了。

刚开始的时候,就很奇怪,毕竟分享链接这个功能是好久之前的,不可能无缘无故的出问题来着。

开始分析问题,

查看网络请求,发现空白页面一个请求都没有发出,不寻常。猜测是不是哪里打了断点导致的。

沿着生命周期依次进行日志输出,企图找出是哪个生命周期的时候出的问题,然后诡异的事情来了,不管是onload还是onshow都没有相关的日志输出。

正常来说,navigateBack返回上一页的时候,页面是会执行一次onshow来着,但是这个就没有。

尝试其他方式进行跳转然后返回上一页,发现是可以走onshow这里来的,只有分享链接的时候不行。猜测是不是和分享链接的逻辑有关。

排查一边分享链接的逻辑,枯燥的翻看代码中。。。。

检查了git日志,发现分享链接的逻辑有一次改动过,将点击进来之后跳转的动作从index页面已到了app.vue页面,动作提前了很多。猜测是不是这次改动引起的问题。

将代码还原成改动之前的,结果神奇的一幕出现了,这个问题居然就好了,返回上一页的时候生命周期能正常执行了。

代码问题是解决了,但是这次发现的现象还是没有处理,为什么在app.vue中进行跳转,然后返回上一页之后会出现生命周期不执行的情况呢?

遂写了一个简单的demo重新复现这个问题。

两个页面:index和sign

app.vue代码

index页面代码(默认首页)

 sign页面代码

 可以看到我在app.vue中直接跳转到了sign页面日志输出如下,是正常的生命周期输出

 然后点击返回上一页,发现并没有日志输出,但是页面已经是index页面的内容了

 

 这个问题很奇怪,看起来像是页面栈的问题,暂时没有头绪

标签:返回,uniapp,生命周期,编译成,h5,一页,日志,链接,页面
From: https://www.cnblogs.com/chengjien/p/18178081

相关文章

  • iOS 移动端(H5)alert 提示信息去除网址(URL)
    alertwindow.alert=function(name){variframe=document.createElement("IFRAME");iframe.style.display="none";iframe.setAttribute("src",'data:text/plain,');document.documentElement.app......
  • uniapp开发小程序引入vant
    1.安装#通过npm安装npmi@vant/weapp-S--production#通过yarn安装yarnadd@vant/weapp--production#安装0.x版本npmivant-weapp-S--production2.引入项目首先在项目根目录创建文件夹wxcomponents,然后在其中创建vant文件夹。把node_modules......
  • uniapp renderjs "只能行内调用, 不能通过方法调用" 学习
    故障代码app报错(h5正常),说echarts为undefined。<viewclass="content"><button@click="get"@touchend="update">update</button><imgsrc=""alt="我是alt"id="img"/></vi......
  • *uniapp-vue3-ts项目配置eslint+prettier+husky
    代码检查工具:Eslint代码格式化工具:prettierhusky:Git客户端增加了钩子(hooks)功能,使得在特定阶段执行一系列流程,以保证每一个commit的正确性vscode安装插件:    安装eslint+prettier:npmi-Deslintprettiereslint-plugin-vue@vue/eslint-config-prettier@vu......
  • im即时通讯源码/仿微信app源码+php即时通讯源码带红包+客服+禁言等系统php+uniapp开发
    即时通讯(IM)系统是现代互联网应用中不可或缺的一部分,它允许用户进行实时的文本、语音、视频交流。随着技术的发展,IM系统的功能越来越丰富,如红包、客服、禁言等。本文将探讨如何使用PHP语言开发一个功能完备的即时通讯系统,包括源码解析、系统架构、关键功能实现等。仓库源码:ym.fz......
  • uniapp 清除缓存
    //清除所有数据clearAppUserData(){plus.android.importClass("android.app.ActivityManager");varContext=plus.android.importClass("android.content.Context");varam=plus.android......
  • vue3 vant4 h5图片上传时压缩
    代码如下upload组件的afterRead方法:constafterRead=asyncfile=>{file.status="uploading";file.message="上传中...";const{data}=awaitupLoaderImg(file.file);//使用上传的方法。file.fileif(data){file.status="done&q......
  • uniapp将图片base64绘制到画布中
     html<viewclass="content"><canvascanvas-id="myCanvas"style="width:300px;height:300px;"></canvas></view> js//获取图片的完整base64this.qrurl=res.data......
  • uniapp中导航栏的返回按钮使用 autoBackButton:false不生效
    uni-appH5端修改pages.json"autoBackButton":false不生效pages.json中配置autoBackButton是不生效的,因为这个属性只支持程序方面,H5不支持这个属性的设置 解决方法:在 mounted 这添加如下一句就好了,意思是在页面渲染完成后,找到返回按钮,把它隐藏 ......
  • uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
    原创研发uniapp+vue3+pinia2跨三端仿微信app聊天模板Uniapp-Wechat。uni-vue3-wchat基于uni-app+vue3+pinia2+uni-ui+uv-ui等技术跨端仿制微信App界面聊天项目,支持编译到H5+小程序端+App端。实现编辑框多行消息/emoj混合、长按触摸式仿微信语音面板、图片/视频预览、红包/朋友圈......