uniapp小程序出现deep穿透样式失效、布局错误、无法修改背景颜色、隐藏元素无法渲染等问题

前言

最近使用uniapp多端开发，深一脚浅一脚踩了不少坑，记录一下以后避坑，主要问题如下：

问题一：H5样式正常，编译成小程序不一致。
原因：因为小程序编译组件会形成已成外部包裹，这层包裹无法继承父元素的样式，很多样式也对它不生效，最无语的是还阻断了子元素继承外部样式。
解决方案：使用组件前在外部包裹一层元素来确保布局正常继承，使用deep穿透控制组件内部样式（没有声明scoped时不需要穿透）

问题二：小程序自定义组件deep样式穿透失效。
原因：小程序组件默认存在样式隔离。
解决方案：1.可以在组件内设置参数opention:{styleIsolation: ‘shared’}，但会存在样式污染。2.在调用组件的页面里deep控制样式

问题三：无法修改背景颜色。
原因：声明scoped后，小程序不支持修改背景色。
解决方案：再声明一个style标签，再修改背景色。

问题四：v-show隐藏元素出现无法渲染的情况。
原因：部分组件的样式可能是通过js渲染的，如果初始状态是隐藏的话，会找不到元素，导致无法渲染。
解决方案：改为v-if控制，原理是v-show通过display:none控制，元素本身只渲染一次；v-if这是每次条件变化都渲染元素。