uniapp开发小程序项目的问题笔记

一、样式篇

1. 文本字体样式

在日常的开发工作中我发现使用uniapp进行多端开发时（主要是h5与微信小程序）一些字体的样式设置在h5端是正常渲染的，但是在小程序端你会发现总是会存在样式设置不生效的问题，这是什么原因导致的那？

本着对问题的好奇心，我对运行起来的小程序代码进行了分析，首先我们要知道CSS属性是允许子元素从父元素继承的，包括字体、颜色、行高、文本对齐方式、列表样式等相关属性，按照正常的渲染逻辑来说即使我给外层的元素设置了字体样式，由于内部分子元素（因为在布局的时候会根据文本具体展现形式进行分割布局处理）并没有设置特殊的css类进行样式约束或者添加的类的属性设置并没有涉及的字体样式的复写的情况下，就像h5展现的样式效果一样应与父级元素的设置样式相同；uniapp会将现有的vue模板语法进行重构替换成符合微信小程序开发规范的形式从而达到一套代码多端使用的效果，运行起来微信小程序项目后我们可以检查一下页面元素以及它的相关属性，你会发现在这些元素身上会有一些默认的字体样式初始的设置，正式由于这些导致的继承下来的父级元素的属性被覆写从而导致了样式不生效的问题，这是真的狗啊，经过这样的一件事情后我也养成了一个习惯就是在做uniapp的微信小程序兼容的项目时会额外注意布局的元素层级以及尽量减少使用css的属性继承实现样式。