当前位置: 首页 > news >正文

uniapp+vue3开发微信小程序踩坑集

本文主要记录使用uniapp+vue3开发微信小程序遇见的各种常见问题及注意点。(持续更新)

问题:

自定义组件为什么有些样式加不上去

给自定义组件增加class的时候,有时候不生效有时候生效,一度让我怀疑自己记忆错乱。后来突然想到自定义组件可能默认是display: inline,所以才导致的 width/margin-top/margin-bottom 等块属性不生效。一试果然如此,那么直接更改自定义组件样式加个display: block即可: <NoData class="block pt-160">

如何解决使用各种dialog组件导致的滚动穿透问题

本质上是禁用touchmove默认的滚动行为,uniapp用.stop修饰符可阻止默认行为

小程序写法

html复制代码  <view catchtouchmove="true"><dialog .../></view>

uniapp写法

html
复制代码  <uni-popup @touchmove.stop />

禁用touchmove会同时禁掉dialog组件内部的滚动,所以如果内部也需要滚动,则需要借助 page-meta 标签(page-meta须为根标签)

html复制代码<page-meta :page-style="`overflow:${pageScrollFlag?'visible':'hidden'}`">...
</page-meta>

unplugin-vue-components 不生效,仍需手动导入

vite.config.ts文件中 需要把unplugin-vue-components插件提前到uni之前!!! 需要把unplugin-vue-components插件提前到uni之前!!! 需要把unplugin-vue-components插件提前到uni之前!!!

正确写法:

js复制代码  Components({dirs: ['src/components'],dts: 'typings/components.d.ts',}),uni(),

错误写法:

js复制代码  uni(),Components({dirs: ['src/components'],dts: 'typings/components.d.ts',}),

官方好大的坑:官方issue

子组件使用onShow、onPullDownRefresh、onReachBottom 导致接口重复触发

在页面子组件中使用onShow等是挺高频的需求,但是在 v-if 的子组件中使用了onShow等,在子组件状态来回切换时,会出现闭包导致子组件的onShow等无法被销毁,从而在onShow时回调函数中的逻辑重复执行,严重时甚至可能会造成内存溢出假死。为了解决这个问题,我封装了几个方法,本质上都是在 onunmounted 中将回调函数要执行的逻辑重置为空函数,这样虽然闭包还在但是不会再重复触发回调的逻辑:

封装 onShow:

js复制代码export const initOnshow = async (cb: () => Promise<void>) => {let isFirstOnShow = trueonMounted(() => {cb().finally(() => {isFirstOnShow = false})})onUnmounted(() => {// 卸载闭包,防止内存泄漏onShowFn = () => {}})let onShowFn = () => {if (isFirstOnShow) {isFirstOnShow = falsereturn}cb()}onShow(() => onShowFn())
}

封装 onPullDownRefresh:

js复制代码export const initRefresh = async (cb: () => Promise<void>) => {onUnmounted(() => {// 卸载闭包,防止内存泄漏pullDownRefresh = async () => {}})let pullDownRefresh = async () => {await cb()uni.stopPullDownRefresh()uni.showToast({ title: '刷新成功', icon: 'success' }).then()}onPullDownRefresh(() => pullDownRefresh())
}

封装 onReachBottom

js复制代码export const initReachBottom = async (cb: () => Promise<void>) => {onUnmounted(() => {// 卸载闭包,防止内存泄漏onReachFn = () => {}})let onReachFn = () => {cb()}onReachBottom(() => onReachFn())
}

input数据改变后页面没有实时更新

js复制代码const price = ref(0)
const handleInput = () => {nextTick(() => {if (price.value > 100) {price.value = 100}})
}

showLoading 和 showToast 不能同时存在

真机上如果使用 hideLoading 会立马把 toast 取消掉,所以同时出现时使用setTimeout延迟toast的时机。

怎么做状态管理和持久化

vue3 推荐使用 pinia 做全局状态管理,使用体验比 vuex 好不知道多少倍。pinia 本身相当于sessionStorage,如果要做持久化缓存需要使用 uni.setStorageSync()。而如果有大量持久化需求则需要引入另一个插件 pinia-plugin-unistorage。

关于使用 unocss

原子化CSS是一种将css用class书写出来的方式,很好的解决了关注点分离带来的痛处。在vue的单文件开发模式中,经常烦恼的一件事就是template和style中切来切去,写起来时有不畅。而原子化css则解决了这个麻烦,可以在开发时少写大量代码,较大程度提升开发体验并节省开发时间。(推荐同时使用vscode插件UnoCSS,可以显示class实际属性)

同为原子化工具,UnoCSS 相较于 Tailwind CSS 较大的优势是class都是按需生成,且规则编写更加灵活(只需要会一点点正则)。最重要的是unocss完全兼容Tailwind CSS。


注意点:

不支持vue的render、inline-template、X-Templates、keep-alive、transition

relaunch redirectTo navigateTo 区别和用法

redirectTo: 关闭当前页面(销毁了当前页面在路由栈中的历史记录),跳转到应用内的某个页面。

reLaunch: 关闭所有页面,打开到应用内的某个页面。(清空了路由栈,此时调用getCurrentPages()得到空数组)

navigateTo 跳转到某个页面,保留当前页面的历史记录,在下个页面可使用navigateBack()返回到当前页面。

  • 建议跳转登录页等使用redirectTo,登录后再使用redirectTo跳回原页面。
  • 建议跳转到首页、我的等等一级页面使用reLaunch,这样可以避免路由栈缓存的页面过多导致栈溢出。(小程序最多打开20个页面)
  • 建议跳转有返回按钮的页面使用navigateTo,保留栈历史。

事件修饰符

以下为uniapp官方文档,小程序只支持.stop .native两个修饰符

  • .stop: 各平台均支持,使用时会阻止事件冒泡,在非 H5 端同时也会阻止事件的默认行为
  • .native: 监听原生事件,各平台均支持
  • .prevent: 仅在 H5 平台支持
  • .capture: 仅在 H5 平台支持
  • .self: 仅在 H5 平台支持
  • .once: 仅在 H5 平台支持
  • .passive: 仅在 H5 平台支持

生命周期

uniapp小程序除了小程序自己的页面生命周期,还有vue的组件生命周期。

  • onLoad 当页面加载时触发,回调接收来自上个页面传递的参数
  • onShow 当 uni-app 启动,或从后台进入前台显示
  • onHide 当 uni-app 从前台进入后台
  • onPullDownRefresh 当下拉刷新时触发
  • onReachBottom 当页面滚动到底部时触发

注意onLoad生命周期只会在页面加载时触发,所以如果用在组件中,当组件v-if重新加载时,不会重新触发。如果要重新触发,需要使用onMounted等vue组件生命周期。

好文推荐

  • uniapp小程序开发的超长实践总结!最全笔记收藏-CSDN博客

相关文章:

uniapp+vue3开发微信小程序踩坑集

本文主要记录使用uniappvue3开发微信小程序遇见的各种常见问题及注意点。&#xff08;持续更新&#xff09; 问题&#xff1a; 自定义组件为什么有些样式加不上去 给自定义组件增加class的时候&#xff0c;有时候不生效有时候生效&#xff0c;一度让我怀疑自己记忆错乱。后来…...

办公软件WPS与Office的区别

临近计算机考试很多同学在纠结我是报wps好&#xff1f;还是ms office好&#xff1f;下面就来详细说说。 1、wps属于国内金山公司的办公软件&#xff0c;里面包含word、Excel和PPT。考试是2021年开始的&#xff01; 2、MS&#xff08;Microsoft 微软&#xff09; office属于美…...

[数据集][目标检测]睡岗检测数据集VOC+YOLO格式3290张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;3316 标注数量(xml文件个数)&#xff1a;3316 标注数量(txt文件个数)&#xff1a;3316 标注…...

使用Java编写网络爬虫

使用Java编写网络爬虫 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 网络爬虫是一种自动化程序&#xff0c;用于从互联网上获取信息并收集数据。在Java中编写…...

生鲜水果行业wordpress主题

水果蔬菜wordpress外贸自建站模板 水果、脐橙、牛油果、菠萝、凤梨、鲜枣、苹果、芒果、瓜果、百香果wordpress外贸独立站模板。 https://www.jianzhanpress.com/?p3932 生鲜wordpress外贸出口网站模板 水果、蔬菜、肉蛋奶、水产、干货等生鲜产品wordpress外贸出口公司网站…...

3.3V到5V的负电源产生电路(电荷泵电压反相器)SGM3204输出电流0.2A封装SOT23-6

前言 SGM3204 非稳压 200mA 电荷泵负电源产生电路&#xff0c;LCEDA原理图请访问资源 SGM3204电荷泵负电源产生电路 SGM3204电荷泵负电源产生电路 一般描述 SGM3204从 1.4V 至 5.5V 的输入电压范围产生非稳压负输出电压。 该器件通常由 5V 或 3.3V 的预稳压电源轨供电。由于…...

Excel 宏录制与VBA编程 —— 15、MsgBox参数详解

Msgbox参数具体如下 Msgbox参数使用1 Msgbox参数使用2&#xff08;返回值示例&#xff09; &ensp ;###### 关注 笔者 - jxd...

Kafka~消息发送过程与ISR机制了解

消息发送过程 使用Kafka发送消息时&#xff0c;一般有两种方式分别是&#xff1a; 同步发送异步发送 同步发送时&#xff0c;可以在发送消息后&#xff0c;通过get方法等待消息结果&#xff0c;这种情况能够准确的拿到消息最终的发送结果&#xff0c;要么是成功、要么是失败…...

multiprocessing.Queue 多个进程生产和多个进程消费怎么处理

在这个示例中&#xff0c;我们创建了一个队列 q&#xff0c;并通过 multiprocessing.Manager().Queue() 来确保队列可以在多个进程之间共享。我们定义了 consumer 和 producer 函数&#xff0c;分别用于从队列中获取数据和向队列中放入数据。 在主进程中&#xff0c;我们创建了…...

配置 Python 解释器及虚拟环境

配置 Python 解释器及虚拟环境 配置 Python 解释器&#xff1a; 1. 打开 PyCharm&#xff0c;进入“File”&#xff08;文件&#xff09;菜单&#xff0c;选择“Settings”&#xff08;设置&#xff09;。 2. 在弹出的设置窗口中&#xff0c;选择“Project: [项目名称]”下的…...

JeecgBoot中如何对敏感信息进行脱敏处理?

数据脱敏即将一些敏感信息通过加密、格式化等方式处理&#xff0c;展示给用户一个新的或是格式化后的信息&#xff0c;避免了敏感信息的暴露。 一、接口脱敏注解 针对接口数据实现脱敏加密&#xff0c;只加密&#xff0c;一般此方案用于数据加密展示。 1.1 注解介绍 注解作用域…...

【Docker】存储数据卷

目录 1、挂载数据卷到容器里 2、查询挂载文件 3、容器与主机之间映射共享卷 4、三个容器之间使用共享卷 5、卷数据的备份与恢复 5.1 备份 5.2 恢复 1、挂载数据卷到容器里 docker run -itd --name test02 -v /data nginx docker exec -it test02 bashls / docker inspe…...

《昇思25天学习打卡营第12天 | 昇思MindSpore基于MindSpore的GPT2文本摘要》

12天 本节学习了基于MindSpore的GPT2文本摘要。 1.数据集加载与处理 1.1.数据集加载 1.2.数据预处理 2.模型构建 2.1构建GPT2ForSummarization模型 2.2动态学习率 3.模型训练 4.模型推理...

深入解析npm unpublish命令:使用场景与实践指南

npm&#xff08;Node Package Manager&#xff09;是JavaScript编程语言的包管理器&#xff0c;广泛用于Node.js应用程序。npm unpublish命令允许用户从npm仓库中撤回&#xff08;unpublish&#xff09;一个包的特定版本。本文将详细介绍npm unpublish命令的使用场景、操作步骤…...

有趣的仿神经猫html5圈小猫游戏源码

有趣的仿神经猫html5圈小猫游戏源码,点击小圆点&#xff0c;围住小猫游戏。猫已经跑到地图边缘&#xff0c;你输了。内含json数据&#xff0c;部署到服务器方可运行 微信扫码免费获取源码...

Redis 7.x 系列【10】数据类型之有序集合(ZSet)

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 常用命令2.1 ZADD2.2 ZCARD2.3 ZSCORE2.4 ZRANGE2.5 ZREVRANGE2.6 ZRANK2.7…...

操作系统-文件的物理结构(文件分配方式)

文章目录 总览文件块和磁盘块连续分配顺序访问直接访问&#xff08;随机访问&#xff09;为什么连续分配同时支持这两种访问模式&#xff1f; 链接分配隐式链接显示链接小结索引分配链接方案多层索引混合索引小结 总结 总览 文件数据存放在外存中 文件块和磁盘块 文件内通过逻…...

Spring Boot集成jsoup实现html解析

1.什么是jsoup jsoup 是一款 Java 的 HTML 解析器&#xff0c;可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API&#xff0c;可通过 DOM&#xff0c;CSS 以及类似于 jQuery 的操作方法来取出和操作数据&#xff0c;可操作 HTML 元素、属性、文本。 JSo…...

[240629] 阿里云揭秘其数据中心设计和自研网络,用于大语言模型训练 | Jina AI 发布最新的神经网络重排序模型

目录 阿里云揭秘其数据中心设计和自研网络&#xff0c;用于大语言模型训练Jina AI 发布最新的神经网络重排序模型 阿里云揭秘其数据中心设计和自研网络&#xff0c;用于大语言模型训练 阿里云近日公布了其专为大型语言模型 (LLM) 训练流量而设计的基于以太网的网络设计&#x…...

【Docker0】网络更改

目录 1. 停止docker服务 2. 关闭docker默认桥接网络接口 3. 从系统删除docker0接口 4. 创建一个名为bridge0的新接口 5. 添加ip地址和子网掩码 6. 启用bridge0接口 7. &#xff08;如果没起来就执行该句&#xff09; 8. 查看ip 1. 停止docker服务 sudo service docker…...

IDEA中导入Maven项目

IDEA中导入Maven项目 方式1&#xff1a;使用Maven面板&#xff0c;快速导入项目 打开IDEA&#xff0c;选择右侧Maven面板&#xff0c;点击 号&#xff0c;选中对应项目的pom.xml文件&#xff0c;双击即可 说明&#xff1a;如果没有Maven面板&#xff0c;选择 View > Appe…...

px、em、rem、rpx 作用和用法详解

px px像素&#xff08;Pixel&#xff09;。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 IE无法调整那些使用px作为单位的字体大小&#xff1b; 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位&#xff1b; Firefox能够调整px和em&#xff…...

Linux 常用命令 - dd 【复制及转换文件内容】

简介 dd 命令源自于磁盘复制&#xff08;disk dump&#xff09;的缩写&#xff0c;是 Linux 和 Unix 系统中用于转换和复制文件的一个强大工具。它可以在复制过程中进行格式转换&#xff0c;支持不同的块大小&#xff0c;能够直接对硬盘设备进行操作&#xff0c;非常适合进行备…...

全网唯一免费无水印AI视频工具!

最近Morph Studio开始免费公测&#xff01;支持高清画质&#xff0c;可以上传语音&#xff0c;同步口型&#xff0c;最重要的是生成的视频没有水印&#xff01; Morph Studio国内就可以访问&#xff0c;可以使用国内邮箱注册&#xff08;我用的163邮箱&#xff09;&#xff0c;…...

kafka(四)消息类型

一、同步消息 1、生产者 同步发送的意思就是&#xff0c;一条消息发送之后&#xff0c;会阻塞当前线程&#xff0c;直至返回 ack。 由于 send 方法返回的是一个 Future 对象&#xff0c;根据 Futrue 对象的特点&#xff0c;我们也可以实现同 步发送的效果&#xff0c;只需在调…...

Emacs之显示blame插件:blamer、git-messenger(一百四十四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…...

【10分钟速通webpack,全流程打包,编译,发包,全干货,附代码 】

需求 后端有个nodejs 基础库&#xff0c;用typescript编写&#xff0c;需要发包到代码仓库上&#xff0c;被其它业务引入。这其中就涉及了&#xff1a; 编译&#xff0c; 打包&#xff0c;发包。 工作流速览 前提依赖 webpack主体 npm install --save-dev webpack webpack…...

设计模式深入解析与实例应用

目录 工厂模式1.简单工厂模式2.工厂方法模式3.抽象工厂模式 策略模式责任链模式概述模板方法模式概述单例模式概述 工厂模式 工厂模式是一种创建型设计模式&#xff0c;它提供了一种创建对象的最佳实践&#xff0c;旨在将对象的创建过程与使用过程分离&#xff0c;以提高代码的…...

服务器数据恢复—异常断电导致RAID6阵列中磁盘出现坏扇区的数据恢复案例

服务器存储数据恢复环境&#xff1a; 一台存储中有一组由12块SAS硬盘组建的RAID6磁盘阵列&#xff0c;划分为一个卷&#xff0c;分配给几台Vmware ESXI主机做共享存储。该卷中存放了大量Windows虚拟机&#xff0c;这些虚拟机系统盘是统一大小&#xff0c;数据盘大小不确定&…...

前端工程化08-新的包管理工具pnpm

1、历史原因解读 pnpm这个东西发布的时间是比较早的&#xff0c;但是在最近一两年的时候才开始流行&#xff0c;甚至是可以说非常的盛行&#xff0c;那么这个包到底是个什么东西的&#xff0c;那么我们先说下&#xff0c;原来的包管理工具到底有那些问题&#xff1f;比如说我们…...

南昌企业建站系统/云盘网页版登录

考研复试系列——第七节 最短路径 前言 前面我们学习了DFS算法&#xff0c;利用DFS算法&#xff0c;我们以每一个顶点为开始节点进行DFS&#xff0c;最后进行比较也可以求得最短路径&#xff0c;但是复杂度不能满足我们的需求。现在我们通过Floyd算法和Dijkstra算法来解决最短…...

网页配色网站/软件外包公司

孙广东 2015.6.20 先贴一个 Grid网格吧。 可以标记一个对象的正方形范围等拖拽到指定的对象就OK了。 using UnityEngine; using System.Collections;// DrawGizmoGrid.cs // draws a useful reference grid in the editor in Unity. // 09/01/15 - Hayden Scott-Baron // …...

ppt模板下载免费版幼儿园/seopc流量排行榜企业

问题&#xff1a;打开phpmyadmin显示高级功能尚未完全设置部分功能未激活&#xff0c;应该如何解决&#xff1f; 总共三步可以搞定 1、导入相关文件到数据库 2、更改配置文件config.inc.php 3、给于root用户相关权限 详细过程如下&#xff1a; 先找到 phpMyAdmin所在目录&a…...

wordpress wp super/查排名的网站

本文介绍在Linux操作系统中的Fsck命令&#xff0c;使用它来修复损坏的文件系统、修复Root(根)文件系统、在启动时检查文件系统&#xff0c;包括介绍fstab选项。fsck(文件系统检查)是一种命令行实用程序&#xff0c;可让你在一个或多个Linux文件系统上执行一致性检查和交互式修复…...

shopping跨境电商平台/郑州seo网站有优化

如何在自定义代码中定义一个线程&#xff1f; 通过对API查找&#xff0c;创建一个线程方法一是继承自thread类。 具体步骤&#xff1a; 1、继承thread类 2、复写run ()方法 3、调用start()方法&#xff0c;此方法有两个作用&#xff0c;具体如下 &#xff1a; 每次运行结果…...

西安网站建设首选/seo研究中心qq群

1、解决问题 在实际的应用场景中&#xff0c;经常会出现需要把系统的附件文件存储到Tomcat路径之外的磁盘目录下。这个时候就可以实现通过配置server.xml文件实现附件存储位置与Tomcat目录分离。 2、配置Server.xml 首先找到tomcat目录下conf目录下的server.xml文件&#xff0…...