uniapp vue3打包成h5样式丢失

输入框（u–input）样式失效解决之道

在H5上，u–input的样式是可以完美展示的，但是到了微信小程序上，样式完全失效了。经过一番摸索，找到了最终的解决方法。

把样式失效的 u–input 改成 u-input。

在u-input的自定义样式之前添加默认样式的class名，u-input__content，而且要使用深度渲染，写成::v-deep.u-input__content。这样H5中的样式就可以完全应用到微信小程序上了（前后插槽的样式也完美应用），示例代码如下。

::v-deep.u-input__content, .row-input {

                    height: 70rpx;

                    width: calc(100vw - 150rpx - 120rpx);

                    background-color: #FEFCF8;

                    border-radius: 8rpx;

                    font-size: 24rpx;

                    font-weight: 500;

                    color: #999999;

                    line-height: 24rpx;

                    margin-top: 30rpx;

                    //前插槽样式

                    .prefix {

                        padding: 0 20rpx;

                        image {

                            width: 30rpx;

                            height: 30rpx;

                        }

                    }

                    //后插槽样式

                    .suffix {

                        padding: 0 20rpx;

                        image {

                            width: 30rpx;

                            height: 30rpx;

                        }

                        .picture-code {

                            width: 100rpx;

                            height: 48rpx;

                        }

                    }

                }

                .placeholder { //占位提示文字的样式

                    font-size: 24rpx;

                    font-weight: 500;

                    color: #999999;

                    line-height: 24rpx;

                }

            }

补充：组件的默认样式的class名如何获取。

u-list样式失效的解决之道

在u-list的自定义样式的class之前添加 默认样式的class u-list。就可以解决样式失效的问题。

对于列表顶部被导航栏遮挡，则需要添加一个view进行包裹，通过调节外层view的margin来进行调节。

示例代码如下：

.store-section, .u-list { //添加默认样式的class u-list

        background-color: #F7F1E8;

        border-radius: 40rpx 40rpx 0px 0px;

    padding: 20rpx 0rpx;

}

底部安全区域失效

H5上可以使用 ****标签设置相应的背景色作为底部安全区域，但是微信小程序失效了。

微信小程序上应该使用一个 ****来替换。标签的样式如下：

.safe-bottom {

        background-color: #F4EBDF;

        height: var(--safe-area-inset-bottom);

    }

图片不显示问题

图片不显示，主要就是路径不对。

自定义组件的图片路径： /static/detail/personal-store-logo.png。

page里组件的路径： @/static/home/have-a-goods.jpeg。

图片路径的问题，也不一定就像上方那样，自己去尝试修改就好了，以图片显示为准。

u-icon不显示

遇到u-view里的u-icon不显示的情况，一般就是u-icon外面多包了一层组件，把多包的组件去掉u-icon就可以正常显示了。

u-cell-group样式失效解决之道

对于u-cell-group样式失效的问题，尝试过使用覆盖样式的问题，但是不生效。最终的解决之道是在u-cell-group外面包了一层view。把u-cell-group的样式放到view上。示例代码如下：

<view class="group-background">

            <u-cell-group>

                <u-cell title="检测更新" :titleStyle="cellTitleStyle" size="large" :isLink="true" @click="checkUpdate()">

                </u-cell>

                <u-cell title="隐私政策" :titleStyle="cellTitleStyle" size="large" :isLink="true"

                    @click="privacyAgreement()">

                </u-cell>

            </u-cell-group>

        </view>

.group-background {

        width: 100%;

        background-color: #FEFCF8;

        margin-top: 40rpx;

    }