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博客

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

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

相关文章

C++枚举

C枚举 枚举的基础用法不不再赘述枚举的三点问题1、作用域问题解决思路1解决思路2 2、隐式转换成int3、枚举变量的实际类型无法明确指定 枚举的基础用法不不再赘述 枚举的三点问题 1、作用域问题 举个例子&#xff0c;颜色有blue代表蓝色&#xff0c;心情有blue代表忧郁。 以…

mysql安装配置教程

mysql安装配置教程 MySQL是一个流行的关系型数据库管理系统&#xff0c;用于存储和管理数据。下面是简要的MySQL安装配置教程&#xff1a; 步骤1&#xff1a;下载MySQL 访问MySQL官方网站&#xff08;https://dev.mysql.com/downloads/mysql/&#xff09;下载适合您操作系统…

Java冒泡排序实现及应用解析

Java冒泡排序实现及应用解析 冒泡排序是计算机科学中最基本的排序算法之一&#xff0c;尽管它的效率不是最高的&#xff0c;但由于其实现简单&#xff0c;它在教学和某些特定场景下仍然具有不可替代的作用。本文将从Java语言的角度&#xff0c;深入探讨冒泡排序的基本原理、实…

全国31省细分产品出口数据集(2002-2022年)

数据简介&#xff1a;整理全国31个省直辖市自治区按hs码分的22类细分产品的出口数据&#xff0c;只包含22类的细分&#xff0c;不包含更细的类目。可用来计算出口产品质量&#xff0c;出口产品技术复杂度等指标&#xff0c;数据区间为2002-2022年。 数据名称&#xff1a;31省细…

《昇思25天学习打卡营第11天 | 昇思MindSpore基于 MindSpore 实现 BERT 对话情绪识别》

11天本节学习到BERT全称是来自变换器的双向编码器表征量&#xff0c;它是Google于2018年末开发并发布的一种新型语言模型。BERT模型的主要创新点都在pre-train方法上&#xff0c;即用了Masked Language Model和Next Sentence Prediction两种方法分别捕捉词语和句子级别的repres…

【SGX系列教程】(五)Intel-SGX 官方示例分析(SampleCode)——RemoteAttestation

文章目录 一.RemoteAttestation原理介绍1.1 远程认证原理1.2 远程认证步骤1.3 远程认证基本流程1.4 IAS通过以下步骤验证报告的签名1.5 关键术语1.6 总结二.源码分析2.1 README2.1.1 README给出的编译流程2.2 重点代码分析2.2.0 主要代码模块交互流程分析2.2.1 isv_app文件夹2.…

python-18-零基础自学python-用类创建冰淇凌小店的口味

学习内容&#xff1a;《python编程&#xff1a;从入门到实践》第二版 知识点&#xff1a; 类、子类、继承、调用函数 练习内容&#xff1a; 练习9-6&#xff1a;冰激凌小店 冰激凌小店是一种特殊的餐馆。编写一个名为IceCreamStand的类&#xff0c;让它继承为完成练习9-1或…

YonBIP 获取项目代码配置(图文)

项目开发文件在本地环境重新部署后&#xff0c;开发端机器需要重新部署&#xff0c;在此记录一下操作过程。 1. 新建项目目录&#xff0c;在目录下点鼠标右键&#xff0c;选 Git Bash Here 2. 开始下载代码&#xff0c;根据代码量多少&#xff0c;几分钟就能下载完成。 3. 下载…

任意密码重置漏洞

文章目录 1. 任意密码重置漏洞原理2. 任意密码重置漏洞产生原因3. 任意密码重置漏洞场景3.1 验证码爆破3.2 验证凭证回传3.3 验证凭证未绑是用户3.4 跳过验证步骤3.5 凭证可预测3.6 同时向多个账户发送凭证 4. 任意密码重置经典案例4.1 中国人寿某重要系统任意账户密码重置4.2 …

【单元测试】Controller、Service、Repository 层的单元测试

Controller、Service、Repository 层的单元测试 1.Controller 层的单元测试1.1 创建一个用于测试的控制器1.2 编写测试 2.Service 层的单元测试2.1 创建一个实体类2.2 创建服务类2.3 编写测试 3.Repository 1.Controller 层的单元测试 下面通过实例演示如何在控制器中使用 Moc…

什么是死锁以及如何避免

什么是死锁&#xff1f; 死锁是指两个或两个以上的进程在执行过程中&#xff0c;由于竞争资源或者由于彼此通信而造成的一种阻塞的现象&#xff0c;若无外力作用&#xff0c;它们都将无法推进下去。此时称系统处于死锁状态或系统产生了死锁&#xff0c;这些永远在互相等待的进…

关于配置webpack eslint插件版本问题说明

webpack相关版本说明 按照当前情况下&#xff0c;以及eslint-webpack-plugin的官方版本使用的是8.x版本的eslint,我们进行如下依赖安装 npm i -D eslint8 eslint-webpack-plugin "devDependencies": {"eslint": "^8.57.0","eslint-webpac…

简单了解下Java中锁的概念和原理

你好&#xff0c;这里是codetrend专栏“高并发编程基础”。 Java提供了很多种锁的接口和实现&#xff0c;通过对各种锁的使用发现理解锁的概念是很重要的。 Java的锁通过java代码实现&#xff0c;go语言的锁通过go实现&#xff0c;python语言的锁通过python实现。它们都实现的…

Apache Calcite Linq4j学习

Lin4j简介 Linq4j是Apache Calcite项目中的一个模块&#xff0c;它提供了类似于LINQ&#xff08;Language-Integrated Query&#xff09;的功能&#xff0c;用于在Java中进行数据查询和操作。Linq4j可以将逻辑查询转换为物理查询&#xff0c;支持对集合进行筛选、映射、分组等…

python自动例化verilog

python自动例化verilog 使用方法&#xff1a;在gvim页面&#xff0c;使用命令自动例化 :r !AUTO_inst xxx.v #python import re import sysmdl_re r"\s*module\s*(?P<mname>\w) *" port_re r"\s*(?P<dir>input|output)\s(?P<typ>wire|re…

API-节点操作

学习目标&#xff1a; 掌握节点操作 学习内容&#xff1a; DOM节点查找节点增加节点删除节点 DOM节点&#xff1a; DOM树里每一个内容都称之为节点。 节点类型 元素节点所有的标签比如body、div&#xff1b;html是根节点属性节点所有的属性&#xff0c;比如href文本节点所有…

FastAPI-Cookie

fastapi-learning-notes/codes/ch01/main.py at master Relph1119/fastapi-learning-notes GitHub 1、Cookie的作用 Cookie可以充当用户认证的令牌&#xff0c;使得用户在首次登录后无需每次手动输入用户名和密码&#xff0c;即可访问受限资源&#xff0c;直到Cookie过期或…

《PyTorch计算机视觉实战》:一、二章

目录 第一章&#xff1a;人工神经网络基础 比较人工智能和传统机器学习 人工神经网络&#xff08;Artificial Neural Network&#xff0c;ANN&#xff09; 是一种受人类大脑运作方式启发而构建的监督学习算法。神经网络与人类大脑中神经元连接和激活的方式比较类似&#xff0…

mysql查看用户的过期时间

1. mysql查看用户的过期时间的方法 在MySQL中&#xff0c;用户的过期时间&#xff08;也称为账户过期日期&#xff09;是一个可选项&#xff0c;用于确定某个MySQL用户账户何时到期。但是&#xff0c;值得注意的是&#xff0c;并非所有的MySQL安装或版本都支持直接设置用户账户…

GoLang语言

基础 安装Go扩展 go build 在项目目录下执行go build go run 像执行脚本文件一样执行Go代码 go install go install分为两步&#xff1a; 1、 先编译得到一个可执行文件 2、将可执行文件拷贝到GOPATH/bin Go 命令 go build :编译Go程序 go build -o "xx.exe"…