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

踩坑记录

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

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

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

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

开发时路径：

编译后路径：

引用路径：如上1.1图示。

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

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

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

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

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

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

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

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

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

心得体会

1. css相关

1.1 高斯模糊

• filter

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

• backdrop-filer

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

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

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

• 定义ref响应式对象

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

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

效果：

2. 父子组件相关

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

• 定义子组件实例

• 子组件暴露父组件需要引用的属性方法

• 父组件调用子组件属性方法

父组件：

子组件：

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

• 定义子组件emit钩子

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

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

3. Vue3调试工具

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