Taro小程序兼容H5 CSS 样式问题
Taro小程序兼容H5 CSS 样式问题
记录在实际开发过程中，所遇到的Taro小程序CSS兼容H5的问题。
文章目录
- Taro小程序兼容H5 CSS 样式问题
- 一、rpx、rem单位转换
- 二、公共组件在引用地方被样式污染
- 三、box-sizing
- 四、H5底部会有白色快级
- 五、Taro css 不要使用标签选择器
- 六、Image 图片处理，最好加一个 className 在 Image 上
- 七、AtModal 组件样式不兼容 H5
- 八、使用 AtIcon 组件 size 设置
- 九、Taro Ui AtInput 组件
- 总结
一、rpx、rem单位转换
css文件样式处理
Taro本身就已经通过postcss-pxtransform实现兼容不同端的单位转换，下面是一部分配置信息;
在config/index编译配置文件中添加H5配置
Taro 官方参考文档
postcss-pxtransform配置参考文档
h5: {
...
pxtransform: {
...
enable: true,
config: {
platform: 'h5',
designWidth: 750,
rootValue: 16,
onePxTransform: true, // 设置 1px 是否需要被转换
unitPrecision: 5, // rem 单位允许的小数位
propList: ['*'], // 允许转换的属性
selectorBlackList: [], // 黑名单里的选择器将会被忽略，不做转换处理
replace: true, // 直接替换而不是追加一条进行覆盖
mediaQuery: false, // 允许媒体查询里的 px 单位转换
minPixelValue: 0 // 设置一个可被转换的最小 px 值
}
}
}
- 在节点
style中使用了px作为单位
<View style={{ width: Taro.pxTransform(100)}}></View>
Taro UI第三方库单位多端转换
参考文档
h5: {
esnextModules: ['taro-ui'],
}
二、公共组件在引用地方被样式污染
公共组件在引用地方重写样式，记得将父级 className 放在重写的 css 外层，避免 A 页面 调转 B页面，造成样式污染。
三、box-sizing
box-sizing 属性在不同平台的默认值可能不同，这可能导致布局差异。在 CSS 中，box-sizing: border-box; 确保了元素的总宽度和高度包括内容、内边距和边框，而不仅仅是内容。
- 开发时随手不上
box-sizing: border-box;
- 全局样式修改
* {
box-sizing: border-box;
}
四、H5底部会有白色快级
在高度塌陷的情况下，高度塌陷造成的 子元素 hight 大于 父级的 hight， 并且超出页面的 hight时，并且使用了position: absolute，在 H5的场景下会出现底部有空白，在小程序端是正常的。
五、Taro css 不要使用标签选择器
在开发过程中，发现有些同学为了方便，使用标签选择器来添加样式：如 View、Image等标签，因为在不同的端，打包后标签会转为各端适配的标签；
下面表格为小程序和h5端 View、Image转化不同的标签：
| View | Image | |
|---|---|---|
| 小程序 | <view></view> |
<image></image> |
| H5 | <taro-view-core><div></div></taro-view-core> |
<taro-image-core><img /></taro-image-core> |
可以看出在小程序中，转化的不是W3C的标签，至于为什么，不细说了；在H5中，会在外层多包裹一层 taro-[tag]-core，如果使用标签选择器添加css样式，在H5中，会选择不到你要处理的元素节点，尽量使用 className 来选择元素节点。
六、Image 图片处理，最好加一个 className 在 Image 上
使用 Image 标签最好加一个 className 处理图片大小，因为在 H5 打包后，会在 img 标签外加一个 taro-image-core 标签， 如果通过继承上一个 View 标签的宽高，在微信小程序是正常的，在 H5 打包中 taro-image-core 会有一个默认的值，通过标签选择器修改 image 或 img 的宽高，图片是会正常的但是外层的 taro-image-core 会有默认的值，将元素撑开。
七、AtModal 组件样式不兼容 H5
在 H5 中，AtModal 组件转为 H5 包含 taro-scroll-view-core 、taro-button-core 多个组件，其都包含默认样式，
- 建议使用
Taro.showModal - 修改
AtModal全局样式
.at-modal__action {
taro-button-core {
margin-top: 0;
border-radius: 0;
background-color: #fff;
border: none;
color: #333;
}
taro-button-core::after {
border: none;
}
taro-button-core:nth-last-child(1) {
color: #6190E8;
}
taro-button-core:nth-last-child(1)::after {
z-index: 30;
border-radius: 0;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(229, 229, 229);
}
}
.at-modal__footer::before {
z-index: 30;
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(229, 229, 229);
}
八、使用 AtIcon 组件 size 设置
在 AtIcon 组件中，props 有一个 size 参数作为图标的大小，在转为 H5 端后，size 的计算会有问题，fontsize 会为空，需要再 className 中设置 fontsize。
tips : 同一个图标的 value 在微信的图标和H5的图标可能会存在差异。
九、Taro Ui AtInput 组件
AtInput 在微信小程序中 type=phone 时，在小程序端手机号加密带有 * 号可以正常显示，在 H5 中会校验格式，不显示。
总结
小程序和 H5 样式兼容存在的最大问题，就是因为一个是 W3C标准一个自定的标签，Taro在处理多端时，会存在元素节点的差异，导致在不同的端样式存在差异；在处理样式兼容问题时，你会发现大多数的CSS都是可以兼容的，你只要处理标签元素的就行；更痛苦的是第三方组件、及组件的兼容处理。
以上就是在处理Taro小程序兼容H5过程中遇到的CSS问题，js和组件兼容问题下篇文章在做记录。