uniapp微信小程序开发踩坑日记:onShow的应用场景及用法

news2025/1/4 19:19:59

onShow的应用场景

由于微信小程序是单页应用程序,所以用户在打开小程序后,只有第一次进入页面时会加载页面,之后再通过导航栏切换到相同的页面并不会导致页面重新加载

但是在某些场景下,我们希望每次用户一回到某个页面,就执行相应的函数,但因为导航栏切换页面并不会导致页面重新加载,所以页面中的代码不会被再次执行

如果大家和我一样使用vue3开发,可能会想到使用vue3的生命周期函数onMounted,但同样地,导航栏切换页面也不会导致dom元素重新渲染,所以onMounted并不会执行

这时我们就可以使用uniapp的生命周期函数onShow,onShow函数是每次页面显示的时候都会被触发

onShow的用法

uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数,当以组合式 API 使用时,在 Vue2 和 Vue3 中存在一定区别,请分别参考:Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档。

如果你使用的是vue3的组合式API,可以参考以下代码

<script setup>
    import { onShow } from '@dcloudio/uni-app'

    onShow(()=>{
    console.log('哈哈!');
    })
<script>

一点小心得

这么一看onShow的使用场景和用法,是不是非常简单?但是这个问题卡了我几乎一整天

其实一开始解决这个问题,我是对AI不断地提问,因为觉得对AI,我可以针对我的需求进行提问,而且我确实很快地问出了解决方法

但AI给出的方法很多时候并不完善,我在用的时候就出现了报错,于是我拿着报错信息再次对AI提问,AI又给了我一套解决方案,接下来我就进入了一个循环:我不断地拿着报错信息对AI提问,AI不断地给我提出新的解决方案,我不断地尝试AI提供的解决方案,然后程序又不断地报错,我拿到报错信息后又拿去问AI……

每次看到AI打出的第一句话是:“很抱歉,我之前给出的解决方案有误” 我就很崩溃,恨不得打几句话骂它一顿

最后,我还是在微信官方文档上找到了解决方案,原来是我导入onShow的方式不对,正确的导入方式应该是:import { onShow } from '@dcloudio/uni-app',AI提供的导入方式一直是错的,但其实我也是看了几遍官方文档后才找到了这句话:“uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数,当以组合式 API 使用时,在 Vue2 和 Vue3 中存在一定区别,请分别参考:Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档。” 点进第二个链接之后才找到正确的导入方式 

其实我平时挺讨厌看官方文档,因为总觉得官方文档的语言死板晦涩,而且很难找到我需要的,好不容易找到了,也不一定看得懂

但是今天,这件事情给我了我一个教训:AI不能全信,官方文档不能不看!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1452554.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

stm32:pwm output模块,记录一下我是用smt32,输出pwm波的记录--(实现--重要)

我是实现了输出pwm波&#xff0c;频率固定&#xff0c;占空比可以不断调整的方法&#xff0c;将PA0接到示波器上&#xff0c;可以看到是一个标准的PWM波&#xff0c;如图下面示波器图。 1&#xff0c;首先是ioc的配置 我刚开始设置的分频的倍数是7199&#xff0c;使得分频的太…

Arduino ESP8266/ESP32 TCP/UDP通讯例程

Arduino ESP8266/ESP32 TCP/UDP通讯例程 &#x1f527;需要配合上位机软件&#xff1a;网络调试助手&#xff08;http://www.cmsoft.cn/software.html&#xff09; &#x1f4dd;ESP8266/ESP32 作为TCP客户端使用 //要将ESP8266/32 Arduino TCPClient的调试输出发送到串口&am…

教大家三种简单msvcp140.dll丢失的解决方法,解决msvcp140.dll丢失问题的重要性

msvcp140.dll文件是一个重要的动态链接库文件&#xff0c;它在Windows操作系统中发挥着关键的作用。由于各种原因&#xff0c;例如应用程序冲突或系统错误等&#xff0c;msvcp140.dll文件有时会出现丢失的情况。一旦发生这种问题&#xff0c;运行依赖此文件的应用程序将无法正常…

SQL29 计算用户的平均次日留存率(lead函数的用法)

代码 with t1 as(select distinct device_id,date --去重防止单日多次答题的情况from question_practice_detail ) select avg(if(datediff(date2,date1)1,1,0)) as avg_ret from (selectdistinct device_id,date as date1,lead(date) over(partition by device_id order by d…

IO流-转换流

引出问题&#xff1a;不同编码读取时会乱码 不同编码读取时会乱码的问题 如果代码编码和被读取的文本文件的编码是一致的&#xff0c;使用字符流读取文本文件时不会出现乱码 如果代码编码和被读取的文本文件的编码是不一致的&#xff0c;使用字符流读取文本文件时就会出现乱码…

智能传感器阅读笔记-智能传感器的发展历程、发展趋势及方向

智能传感器的发展历程 第一代智能传感器 第一代智能传感器是数字式传感器&#xff0c;指改造A/D转换模块&#xff0c;并采用数字技术进行信号处理&#xff0c;使输出信号为数字信号&#xff08;或数字编码&#xff09;的传感器&#xff0c;主要由放大器、A/D转换模块、微处理…

在UE5中使用体积材质

在平时使用UE的材质设置时&#xff0c;经常会看见Material Domain Volume类型&#xff0c;但是却很少使用。其实该类型可以配合体积雾使用&#xff0c;并制作体积效果以弥补自带雾参数的不足。 操作流程 首先找到场景中的ExponentialHeightFog组件&#xff0c;开启体积雾Volu…

Vuex核心知识整理

目录 1 搭建vuex环境 2 求和案例 3 getters 配置项 4 mapState 和 mapGetters 5 mapMutations 和 mapActions 6 Vuex 模块化 1 搭建vuex环境 vuex工作原理图&#xff08;摘自官网&#xff09; 什么时候使用Vuex&#xff1a; 1.当多个组件依赖于统一状态 2.来自不同组件…

【刷题】牛客— NC21 链表内指定区间反转

链表内指定区间反转 题目描述思路一&#xff08;暴力破解版&#xff09;思路二&#xff08;技巧反转版&#xff09;思路三&#xff08;递归魔法版&#xff09;Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;&#xff01;&#xff01;下一篇文章见&…

黑群晖一键修复:root、AME、DTS、转码、CPU型号等

食用方法&#xff1a;SSH连接群晖使用临时root权限执行 AME3.x激活补丁 只适用于x86_64的&#xff1a;DSM7.x Advanced Media Extensions (AME)版本3.0.1-2004、3.1.0-3005 激活过程需要下载官方的解码包&#xff0c;过程较慢&#xff0c;耐心等待。。。 DSM7.1和7.2的AME版…

【开源】SpringBoot框架开发智能教学资源库系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 课程档案模块2.3 课程资源模块2.4 课程作业模块2.5 课程评价模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 课程档案表3.2.2 课程资源表3.2.3 课程作业表3.2.4 课程评价表 四、系统展示五、核心代…

Vulnhub靶机:DC6

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;DC6&#xff08;10.0.2.59&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/entry/dc-6,315/…

基于深度置信网络的多模态过程故障评估方法及应用

源自&#xff1a;自动化学报 作者&#xff1a;张凯, 杨朋澄, 彭开香, 陈志文 “人工智能技术与咨询” 发布 摘 要 传统的多模态过程故障等级评估方法对模态之间的共性特征考虑较少, 导致当被评估模态故障信息不充分时, 评估的准确性较低. 针对此问题, 首先, 提出一种共性–…

springboot登录校验

一、登录功能 二、登录校验 2.1 会话技术 2.2 JWT令牌 JWT令牌解析&#xff1a; 如何校验JWT令牌&#xff1f;Filter和Interceptor两种方式。 2.3 过滤器Filter 2.3.1 快速入门 修改上述代码&#xff1a; 2.3.2 详解 2.3.3 登录校验-Filter 2.4 Interceptor拦截器 2.4.1 …

NLP_Transformer架构

文章目录 Transformer架构剖析编码器-解码器架构各种注意力的应用Transformer中的自注意力Transformer中的多头自注意力Transformer中的编码器-解码器注意力Transformer中的注意力掩码和因果注意力 编码器的输入和位置编码编码器的内部结构编码器的输出和编码器-解码器的连接解…

C++重新认知:智能指针

0/# 一、为什么要有智能指针 内存泄露是我们开发大型项目时最为头疼的问题&#xff0c;当我们将对象建立在堆上时&#xff0c;因为需要我们自己手动释放&#xff0c;因此避免不了忘记删除&#xff0c;或者删除时没有考虑清楚情况的问题&#xff0c;从而造成悬挂指针或者是野指针…

UnityShader——06UnityShader介绍

UnityShader介绍 UnityShader的基础ShaderLab UnityShader属性块介绍 Properties {//和public变量一样会显示在Unity的inspector面板上//_MainTex为变量名&#xff0c;在属性里的变量一般会加下划线&#xff0c;来区分参数变量和临时变量//Texture为变量命名//2D为类型&…

微服务学习Day4

文章目录 初始MQ同步通讯和异步通讯MQ常见技术介绍 RabbitMQ快速入门入门案例 SpringAMQP介绍例子WorkQueue模型exchange交换机消息转换器 初始MQ 同步通讯和异步通讯 MQ常见技术介绍 RabbitMQ快速入门 入门案例 SpringAMQP 介绍 例子 WorkQueue模型 exchange交换机 消息转换…

二进制和进制转换

前言 我们经常能听到2进制、8进制、10进制、16进制这样的讲法&#xff0c;那是什么意思呢&#xff1f;其实2进制、8进 制、10进制、16进制是数值的不同表示形式而已。 比如&#xff1a;数值15的各种进制的表示形式&#xff1a; 15的2进制&#xff1a;111115的8进制&#xff1…

最小生成树(习题)

拆地毯 这个就是套用最小生成树的模板&#xff0c;只不过要将sort函数改成从大到小进行排序。然后这个退出条件是只要大于k就退出。 代码如下 #include<iostream> #include<cmath> #include<algorithm> #define N 1009000 using namespace std; int n,m,k…