解决了项目中几个比较搞心态的bug(前端vue、小程序)

news2024/10/7 6:41:51

1、keep-alive

正常keep-alive的使用便可以做项目的缓存,但是我们的项目很不正常
在这里插入图片描述
项目是属于动态缓存,动态缓存有一个弊端
举个栗子:

a组件为设置了需要缓存的页面;
b组件为设置了需要缓存的页面;
c组件为设置了不需要缓存的页面。
假如:从a组件跳转到b组件,相当于缓存页面跳转到缓存页面,两个页面都会进行缓存
假如:从a组件跳转到c组件,相当于缓存页面跳转到无缓存页面,此时会把a组件的缓存给清除掉,即a组件无缓存,c组件也无缓存
假如:从a组件跳转到b组件,两个页面都会产生缓存,再从b页面跳转到c页面,此时会清除a组件和b组件的缓存,相当于三个页面都没有缓存内容,再次进入需要重新创建

结论:缓存页面跳转到非缓存页面,会丢失掉已有的缓存

需求:a页面进行查询,跳转到b页面再回退到a页面,a页面查询参数保留,且b页面不能做缓存

解决方案:2个页面都不使用keep-alive,而是利用vuex,将查询的参数保留,a页面查询后,传递给vuex,由于没有keep-alive缓存,每次进入a页面都相当于创建了一次a页面,在创建的生命周期中添加逻辑,查询vuex是否有对应的查询参数,如果有,直接使用vuex中的参数

解决方案详细说明:
1、a页面和b页面都没有采取keep-alive进行缓存,因为我们的b页面不能设缓存
2、用vuex或者pinia,在查询后进行参数保留到vuex中,在这之后,即使我们跳转到了b页面,vuex中仍记录了a页面的查询参数
3、由于没有keep-alive,每次进入a页面都相当于重新创建a页面,但是vuex没有重新创建(除非我们进行刷新页面),在a页面创建前,读取vuex内的查询参数,如果有,把a页面的查询参数初始化为vuex中的数据即可

2、在点击某些查询按钮后,页面会莫名的刷新

原因:
.com之前是我们项目的基本地址,这里我就不展示了
在这里插入图片描述
可以看到.com后面紧跟了一个‘?’,我把‘?’删除,发现页面不会404,而是重新加载页面,且仍然是该页面
在这里插入图片描述
因此可以得出,是因为多了一个‘?’,导致了点击查询按钮页面会默认刷新

参考博客:博客地址

解决方案:
给按钮添加prevent阻止默认事件即可

3、小程序中消息订阅授权

1、每个手机展示的弹窗不同
例如:苹果手机,会默认勾选,总是保持以上选择,但是我的手机(红魔7),并不会进行默认勾选
苹果手机,不点击同意,无法点击弹窗的允许按钮(表现形式为按钮被禁用),但是我的手机,即使不点击同意,但仍然可以点击弹窗允许按钮

在这里插入图片描述
2、一旦勾选总是保持以上选择,点击小程序右上角三个点,然后点击设置-通知管理,就能看到我们所授权的内容,但是,如果我们没有进行勾选(总是保持以上选择),就在设置中看不到本次的授权内容
用户勾选总是保持以上选择,并且点击拒绝,我们会看到右上角三个点-设置-通知管理中对应的权限为拒绝,且我们日后无法再次唤起授权弹窗,只能引导用户手动去配置(wx.openSetting({withSubscriptions: true}))

在这里插入图片描述
可能说的不是很详细,下面我搞了一个表格

手机是否会默认勾选总是保持以上选择不进行授权是否能继续点击允许按钮
红魔7默认不会可以
苹果系列默认会不可以
小米系列默认会不可以

在这里插入图片描述

是否勾选总是保持以上选择后续进入右上角三个点-设置-通知管理中的体现形式
后续进入都不会弹出该窗口,用户一旦点击拒绝,日后只能引导用户手动配置会出现授权的内容
后续进入仍会弹出该窗口,用户点击拒绝,日后也可以再次弹出不会出现授权的内容,且wx.getSetting也无法获取授权的内容

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

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

相关文章

nginx mirror代码分析

实现方式 mirror逻辑的工作阶段: ngx在log phase之后(在ngx_http_free_request处调用)已完成向client端返回response,在log phase之后完成close connection(短链接),在该阶段处理mirror逻辑不…

Gempy三维结构地质建模简明教程

Gempy 是一个开源 Python 库,用于生成完整的 3D 结构地质模型。 该库是一个完整的开发,用于从界面、断层和层方向创建地质模型,它还关联地质层的顺序以表示岩石侵入和断层顺序。 推荐:用 NSDT设计器 快速搭建可编程3D场景。 地质建…

【c++】vector的使用与模拟实现

🚀write in front🚀 📜所属专栏:初阶数据结构 🛰️博客主页:睿睿的博客主页 🛰️代码仓库:🎉VS2022_C语言仓库 🎡您的点赞、关注、收藏、评论,是对…

【Nodejs】操作mysql数据库

1.mysql 介绍 付费的商用数据库: Oracle,典型的高富帅;SQL Server,微软自家产品,Windows定制专款;DB2,IBM的产品,听起来挺高端;Sybase,曾经跟微软是好基友&a…

modbus tcp协议介绍及分析

一、modbus tcp协议介绍 Modbus TCP协议是基于TCP/IP网络的Modbus协议的一种变体。它将Modbus协议封装在TCP/IP协议栈中,使用以太网作为物理层,通过TCP连接来实现设备之间的通信。 Modbus TCP协议具有以下特点: 面向连接:Modbus T…

学习 C语言第二天 :C语言数据类型和变量(上)

目录: 1.数据类型介绍 2.signed和unsigned的介绍 3.数据类型的取值范围 1.数据类型介绍 C语言提供了丰富的数据类型来描述生活中的各种数据。使用整型类型来描述整数,使用字符类型来描述字符,使用浮点型类型来描述小数。所谓“类型”&#xf…

一文1500字从0到1搭建 Jenkins 自动化测试平台

Jenkins 自动化测试平台的作用 自动化构建平台的执行流程(目标)是: 我们将代码提交到代码托管工具上,如github、gitlab、gitee等。 1、Jenkins要能够检测到我们的提交。 2、Jenkins检测到提交后,要自动拉取代码&…

PostgreSQL构建时间

– PostgreSQL构建时间 select make_timestamp(2023,7,27,7,34,16);

python dataframe转置 多行转列

如上图 转置为下图: index_cols [身份证,手机号,serial_number]dfT df_last.set_index(index_cols).stack().unstack([0,1,2,])

EMP-SSL: TOWARDS SELF-SUPERVISED LEARNING IN ONETRAINING EPOCH

Recently, self-supervised learning (SSL) has achieved tremendous success in learning image representation. Despite the empirical success, most self-supervised learning methods are rather “inefficient” learners, typically taking hundreds of training epoch…

C++STL库中的vector

文章目录 vector的介绍及使用 vector深度剖析及模拟实现 动态二维数组理解 一、vector的介绍及使用 1.vector的介绍 1. vector是表示可变大小数组的序列容器。 2. 就像数组一样,vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进…

进阶 vue3自定义指令 vue中常用自定义指令

文章目录 vue3自定义指令1.什么是自定义指令&#xff1f;2.注册自定义指令2.1 全局注册2.2 局部注册<script setup>中注册&#xff1a;<script>中使用&#xff1a; 3.钩子函数参数详解4.指令传值5.总结 常用自定义指令案例v-longpress 长按v-debounce 防抖v-thrott…

kubernetes安装问题记录

kubernetes安装问题记录 【1】未配置 host 文件警告1.1 原因1.2 解决方案 【2】swap 未禁用警告2.1 产生原因2.2 解决方式 【3】containerd 进程禁用了 cri 模块插件3.1 原因3.2 解决方法 问题1-3的完整错误日志【4】因错误中断再次 kubeadm init 报错4.1 原因4.2 解决方案 【5…

【学习篇】SAE J1939协议—常用到的知识点

前言&#xff1a;以下关于SAE J1939协议知识点的学习均抄录自书籍&#xff0c;侵权请联系删除。 故障诊断 SAE J1939诊断应用层定义了用于诊断服务的报文帧&#xff0c;诊断报文&#xff08;DM&#xff09;提供了用于车辆进行诊断和维修的功能。 诊断故障代码定义 SAE J193…

从Vue层面 - 解析发布订阅模式和观察者模式区别

目录 前言一、发布订阅模式什么是发布订阅模式&#xff1f;应用场景 二、观察者模式1&#xff09;什么是观察者模式&#xff1f;2&#xff09;应用场景3&#xff09;vue中的观察者模式观察者&#xff08;订阅者&#xff09; - Watcher目标者&#xff08;发布者&#xff09; - D…

内部类(上)成员内部类,局部内部类的使用

文章目录 前言一、内部类是什么&#xff1f;二、如何使用&#xff1f; 1.成员内部类2.局部内部类总结 前言 如果在一个文件中创建了两个类&#xff0c;那么这两个类是并列关系&#xff0c;不存在哪一个类包含哪一个类的情况。如果在类中再定义一个类&#xff0c;那么这个在类中…

VMPWN的入门系列-1

温馨提示&#xff1a; 今天的文章有点长&#xff0c;图片比较多&#xff0c;请耐心阅读 5.1 实验一 VMPWN1 5.1.1 题目简介 这是一道基础的VM相关题目&#xff0c;VMPWN的入门级别题目。前面提到VMPWN一般都是接收字节码然后对字节码进行解析&#xff0c;但是这道题目不接受字节…

加载已训练好的目标检测YOLOv8,v5,v3,v6模型,对数据集中某张图片中的object打上方框、标出类别,并将图片保存到本地

参考的教程&#xff1a;Python - Ultralytics YOLOv8 Docs 在与ultralytics代码同一层级下新建 predict.py 里面写下面的内容。运行即可 from ultralytics import YOLO from PIL import Image import cv2# 加载计划使用的模型 model YOLO("yolov8n.pt") # load a…

Flask deleteput

Flask delete&put 一、delete 请求1.1 代码1.2 分析1.3 验证 二、put请求2.1 代码2.2 分析2.3 验证 三、总结 Flask get&post 请求传送门&#xff1a;FLASK get&post分析 一、delete 请求 1.1 代码 from flask import Flask, requestapp Flask(__name__)app.ro…

CVPR2023新作:考虑3D一致性的人脸关键点检测

Title: 3D-aware Facial Landmark Detection via Multi-view Consistent Training on Synthetic (三维感知人脸关键点检测&#xff1a;合成数据下多视角一致训练) Affiliation: Texas A&M University Authors: Libing Zeng, Lele Chen, Wentao Bao, Zhong Li, Yi Xu, Jun…