前言

使用uniapp開(kāi)發(fā)H5，樣式已經(jīng)按照UI設(shè)計(jì)稿全部實(shí)現(xiàn)。但是在打包微信小程序調(diào)試的時(shí)候，遇到很多樣式失效的問(wèn)題。問(wèn)了度娘很久，并沒(méi)有完全解決樣式失效的問(wèn)題。于是自己按照從度娘上查到的方法去進(jìn)行組合嘗試，最終樣式失效問(wèn)題得到了完全的解決。

樣式不生效的原因：u-view框架組件自帶的class優(yōu)先級(jí)高于開(kāi)發(fā)者自定義的優(yōu)先級(jí)，所以顯示的是組件的默認(rèn)樣式（網(wǎng)上有說(shuō)是樣式隔離）。解決辦法就是提高自定義樣式的優(yōu)先級(jí)，使用自定義的樣式去覆蓋默認(rèn)樣式。

一、輸入框（u–input）樣式失效解決之道

在H5上，u–input的樣式是可以完美展示的，但是到了微信小程序上，樣式完全失效了。經(jīng)過(guò)一番摸索，找到了最終的解決方法。

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

在u-input的自定義樣式之前添加默認(rèn)樣式的class名，u-input__content，而且要使用深度渲染，寫(xiě)成::v-deep.u-input__content。這樣H5中的樣式就可以完全應(yīng)用到微信小程序上了（前后插槽的樣式也完美應(yīng)用），示例代碼如下。

::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;
				}
			}

補(bǔ)充：組件的默認(rèn)樣式的class名如何獲取。

二、u-list樣式失效的解決之道

在u-list的自定義樣式的class之前添加 默認(rèn)樣式的class u-list。就可以解決樣式失效的問(wèn)題。

對(duì)于列表頂部被導(dǎo)航欄遮擋，則需要添加一個(gè)view進(jìn)行包裹，通過(guò)調(diào)節(jié)外層view的margin來(lái)進(jìn)行調(diào)節(jié)。

示例代碼如下：

.store-section, .u-list { //添加默認(rèn)樣式的class u-list
		background-color: #F7F1E8;
		border-radius: 40rpx 40rpx 0px 0px;
  	padding: 20rpx 0rpx;
}

三、底部安全區(qū)域失效

H5上可以使用 ****標(biāo)簽設(shè)置相應(yīng)的背景色作為底部安全區(qū)域，但是微信小程序失效了。

微信小程序上應(yīng)該使用一個(gè) ****來(lái)替換。標(biāo)簽的樣式如下：

.safe-bottom {
		background-color: #F4EBDF;
		height: var(--safe-area-inset-bottom);
	}

四、圖片不顯示問(wèn)題

圖片不顯示，主要就是路徑不對(duì)。

1. 自定義組件的圖片路徑： /static/detail/personal-store-logo.png。
2. page里組件的路徑： @/static/home/have-a-goods.jpeg。

圖片路徑的問(wèn)題，也不一定就像上方那樣，自己去嘗試修改就好了，以圖片顯示為準(zhǔn)。

五、u-icon不顯示

遇到u-view里的u-icon不顯示的情況，一般就是u-icon外面多包了一層組件，把多包的組件去掉u-icon就可以正常顯示了。

六、u-cell-group樣式失效解決之道

對(duì)于u-cell-group樣式失效的問(wèn)題，嘗試過(guò)使用覆蓋樣式的問(wèn)題，但是不生效。最終的解決之道是在u-cell-group外面包了一層view。把u-cell-group的樣式放到view上。示例代碼如下：

<view class="group-background">
			<u-cell-group>
				<u-cell title="檢測(cè)更新" :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;
	}

至此，經(jīng)過(guò)上面的一番修改之后，uniapp開(kāi)發(fā)的H5的樣式就可以完美的在微信小程序中展示了。

總結(jié) 

到此這篇關(guān)于uniapp開(kāi)發(fā)H5打包微信小程序樣式失效的完美解決方法的文章就介紹到這了,更多相關(guān)uniapp打包微信小程序樣式失效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論