uniapp开发H5打包微信小程序样式失效的完美解决方法
前言
使用uniapp开发H5，样式已经按照UI设计稿全部实现。但是在打包微信小程序调试的时候，遇到很多样式失效的问题。问了度娘很久，并没有完全解决样式失效的问题。于是自己按照从度娘上查到的方法去进行组合尝试，最终样式失效问题得到了完全的解决。
样式不生效的原因：u-view框架组件自带的class优先级高于开发者自定义的优先级，所以显示的是组件的默认样式（网上有说是样式隔离）。解决办法就是提高自定义样式的优先级，使用自定义的样式去覆盖默认样式。
一、输入框（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;
}
至此，经过上面的一番修改之后，uniapp开发的H5的样式就可以完美的在微信小程序中展示了。
总结
到此这篇关于uniapp开发H5打包微信小程序样式失效的完美解决方法的文章就介绍到这了,更多相关uniapp打包微信小程序样式失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了微信小程序scroll-view组件无横向滚动的解决方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了JS实现拼图游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
有些小伙伴可能会问caller,callee 是什么？在javascript 中有什么样的作用？那么本篇会对于此做一些基本介绍。希望能够对大家理解javascript中的callee与caller有所帮助。2015-04-04
这篇文章主要介绍了js前端对于大量数据的展示方式及处理方法，帮助大家更好的理解和使用js，感兴趣的朋友可以了解下2020-12-12
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
这篇文章主要给大家介绍了关于利用canvas中toDataURL()将图片转为dataURL(base64)的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
Bootstrap table 服务器端分页功能实现方法示例
这篇文章主要介绍了Bootstrap table 服务器端分页功能实现方法,结合实例形式详细分析了Bootstrap table 服务器端后台交互与分页功能相关操作技巧,需要的朋友可以参考下2020-06-06
script标签中的async和defer详细说明与使用场景
这篇文章主要介绍了script标签中的async和defer详细说明与使用场景,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了使用eslint和githooks统一前端风格,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-07
这篇文章主要介绍了微信小程序视频弹幕发送功能的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
这篇文章主要介绍了微信小程序实现一个简单swiper代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
最新评论