三、样式与布局的兼容性问题

3.1 WXSS/CSS 的差异与限制

小程序的样式语言WXSS与标准CSS存在一些差异，容易引发问题：

• 样式隔离机制：默认情况下自定义组件的样式只对当前组件生效，但可以通过options设置styleIsolation来改变这一行为。不了解这一机制的开发者常常困惑为什么样式不生效。

• 选择器限制：小程序不支持级联选择器如.a .b，也不支持部分CSS3高级选择器。样式应尽量使用class直接应用。

• 单位问题：虽然支持rpx响应式单位，但在某些Android设备上计算不**。对于需要**布局的元素，可以考虑使用px或通过JavaScript计算尺寸。

3.2 不同设备的适配问题

小程序运行在不同厂商的设备上，适配问题不容忽视：

• 全面屏适配：需要使用wx.getSystemInfoSync()获取安全区域信息，避免内容被刘海或圆角遮挡。

• iOS与Android的差异：例如，iOS下滚动更流畅但Android可能出现卡顿；Android下input组件可能有兼容性问题。应针对不同平台进行测试和调整。

• 横竖屏适配：默认情况下小程序不支持横屏，如需支持需要在app.json中配置"pageOrientation": "auto"，并处理布局变化。

3.3 自定义组件的样式隔离

自定义组件的样式隔离既是优点也是陷阱：

• 组件样式不影响外部：默认情况下组件样式不会影响页面其他部分，这避免了污染，但也使得全局样式难以应用到组件内部。

• 外部样式影响组件：通过externalClasses可以允许组件接受外部传入的样式类，但过度使用会破坏组件的封装性。

• 动态样式问题：在组件中动态修改样式（如通过style绑定）可能遇到性能问题，应尽量使用class切换代替。

四、网络请求与数据管理的常见错误