"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日期遇到的常见问题的解决方案和一些开发中应注意的要点，这些问题和解决方案对优化代码质量和提高开发效率具有重要意义。在日常开发中，了解并掌握这些知识可以帮助开发者更好地解决问题，提升开发体验。
我的内容管理
展开
