解决uni-app开发中遇到的常见问题与技巧

"2023.04.09问题及解决方案" 在IT开发中，尤其是在Web和小程序的开发过程中，经常会遇到各种各样的问题。本文档总结了2023年4月9日遇到的一些问题及其解决方案，涵盖了字体大小调整、自定义导航栏对齐、uni-app生命周期事件、props属性设定、以及一些开发技巧和最佳实践。 1. **字体大小适配** - 问题：H5和小程序端字体大小显示不一致。 - 原因：H5浏览器最小支持16px，约等于32rpx，小于这个值会被显示为最小值32rpx；而小程序可以显示更小的字体。 - 解决：为了保持一致，将所有字体大小设置为32rpx。 2. **顶部导航栏对齐** - 问题：自定义顶部导航栏与小程序右上角胶囊按钮对齐出现问题。 - 原因：导航栏的`safeAreaInsetTop`值被设置为false。 - 解决：将`safeAreaInsetTop`的值更改为true，确保它与屏幕安全区域正确对齐。 3. **uni-app的`onPageScroll`事件** - 问题：`onPageScroll`生命周期事件在子组件中无法使用。 - 解决：`onPageScroll`是页面级别的生命周期事件，应确保将其放在页面组件而不是子组件中。 4. **props的默认值** - 问题：使用键值对形式定义props时，外部未传递值时，key没有默认值。 - 原因：props的定义格式不正确。 - 解决：使用props的标准形式，包含类型定义和默认值，如： ```javascript props: { key: { type: Object, default() { return {} } } }, ``` 5. **开发技巧和最佳实践** - **mixins**：用于复用数据和方法，当多个组件有共同需求时。 - **文字缩放**：使用`<view>`包裹并应用`transform`，避免影响整体布局。 - **whitespace**：设置`white-space: wrap`防止文字换行。 - **定位问题**：如果遇到`transform`引起的错位，尝试使用`position: absolute`。 - **uni-app的webview调试**：H5页面的`console`在小程序工具中不可见，但可在H5控制台查看。 - **axios拦截器**：引入axios后，首先封装拦截器进行请求和响应处理。 - **import语句**：花括号表示导入的是导出的对象，无花括号则导入默认导出。 - **axios深拷贝**：使用`axios.create`创建深拷贝实例以避免浅拷贝的问题。 - ** vant UI库**：注意Vue版本兼容性，确保与项目匹配。 - **调试技巧**：在无法查看`console`时，可以使用`alert`或伪造数据检查。 以上是针对2023.04.09日期遇到的常见问题的解决方案和一些开发中应注意的要点，这些问题和解决方案对优化代码质量和提高开发效率具有重要意义。在日常开发中，了解并掌握这些知识可以帮助开发者更好地解决问题，提升开发体验。