微信小程序在使用 Vant Weapp 按鈕樣式顯示異常

微信小程序在使用 Vant Weapp 按鈕樣式顯示異常

系統：Win10
微信開發工具：Stable v1.03.2005140
Vant Weapp：V1.3.3

問題描述

最近在寫小程序頁面的時候，使用了 Vant Weapp 組件庫，結果在調試 button 樣式的時候發現顯示異常

本該是 mini 大小的 button 卻顯示的很大

問題分析

我們在調試窗口測試後可以看出，問題出在系統內置的樣式問題上，只要把這兩行代碼註釋掉，樣式就正常了

button: not([size='mini']) {
	min-height: 40px;
	width: 184px;
	margin-left: auto;
	margin-right: auto;
}

那麼這個內置的 button 樣式是哪裏來的呢，經查證發現原來是微信小程序的基礎組件的樣式進行了升級導致的。。。

問題解決

找到問題就簡單了，只要在 app.json 中把

"style": "v2"

給刪掉就好了

在微信開發社區中還有更多的解決辦法，大家也可以在這裏跳轉過看看有沒有合適自己的