UniApp-Vue3踩坑记录&心得体会

踩坑记录

1. 图片路径动态渲染不显示问题;

解决方案:修改静态图片存放路径

1.1 定义图片map,用于对图片路径的统一储存与管理,例如

UniApp-Vue3踩坑记录&心得体会_第1张图片

1.2 由于uni-app——小程序的编译性质,静态图片等资源文件需放在/public/static/images下(编写页面时使用,部署到生产环境时移除),同时还须在vite.config.ts文件的配置项加上publicDir: ‘public’:

UniApp-Vue3踩坑记录&心得体会_第2张图片

开发时路径:

UniApp-Vue3踩坑记录&心得体会_第3张图片

编译后路径:

UniApp-Vue3踩坑记录&心得体会_第4张图片

引用路径:如上1.1图示。

2. 弹窗滑动下面文本跟着滑动的问题。

解决方案:弹窗显示时给下层盒子加上宽高固定样式

UniApp-Vue3踩坑记录&心得体会_第5张图片

3. ios底部安全区域显示问题

解决方案:在入口文件App.vue编写组件穿透样式,复写其默认样式

UniApp-Vue3踩坑记录&心得体会_第6张图片

UniApp-Vue3踩坑记录&心得体会_第7张图片

4. 跳转路由之后pinia持久化不生效

解决方案:在入口文件App.vue里手动调用一次需要实例化的store

UniApp-Vue3踩坑记录&心得体会_第8张图片

5. uni-swiper指示器样式修改不生效

解决方案:在入口文件App.vue里复写swiper对应的样式集

经过h5和小程序dom tree的对比,uni-app框架对swiper组件进行过样式的条件编译,所以在这里我们采取针对小程序样式单独复写的方法,达到修改指示器样式的目的。

UniApp-Vue3踩坑记录&心得体会_第9张图片

心得体会

1. css相关

1.1 高斯模糊

  • filter

只能让它作用的背景变模糊,当有元素拖动到它下面时,不会模糊下面的元素。仅仅是当前背景变模糊。

  • backdrop-filer

这个属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。

UniApp-Vue3踩坑记录&心得体会_第10张图片

UniApp-Vue3踩坑记录&心得体会_第11张图片

1.2 状态驱动的动态CSS: v-bind的使用

很多时候我们需要动态渲染某些“选中”、“切换”、“不同状态”等样式或者需要计算才能得到的样式,这时候我们就可以使用Vue3的状态驱动的动态css——v-bind

  • 定义ref响应式对象

UniApp-Vue3踩坑记录&心得体会_第12张图片

  • 定义css样式集,并将其与响应式的ref对象进行绑定

  • 在template对应的标签上引用该样式

UniApp-Vue3踩坑记录&心得体会_第13张图片

效果:

UniApp-Vue3踩坑记录&心得体会_第14张图片

UniApp-Vue3踩坑记录&心得体会_第15张图片

2. 父子组件相关

2.1 父组件调用子组件属性方法:defineExpose 单文件组件 < script setup> | Vue.js

  • 定义子组件实例
  • 子组件暴露父组件需要引用的属性方法
  • 父组件调用子组件属性方法

父组件:

UniApp-Vue3踩坑记录&心得体会_第16张图片

子组件:

UniApp-Vue3踩坑记录&心得体会_第17张图片

2.2 组件传参高级用法,v-model | Vue.js

  • 定义子组件emit钩子

  • 触发update指令,更新父组件的值

  • 父组件使用v-model:指令接收

UniApp-Vue3踩坑记录&心得体会_第18张图片

3. Vue3调试工具

在谷歌浏览器>扩展程序 里面添加https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en

UniApp-Vue3踩坑记录&心得体会_第19张图片

你可能感兴趣的:(前端,vue,前端,Vue3,UniApp)