微信小程序ui库

2024-12-31

weui

github仓库地址

效果预览

vant weapp

有赞团队的开源ui组件库

使用视频教程

项目地址

需要在app.json中删掉style:v2的配置项。即不使用微信最新的ui样式。

在app.json引入组件

"usingComponents": {
  "van-image": "@vant/weapp/image/index"
}

直接使用标签即可，可以参考教程

<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />

修改样式

要加!important

.van-button--primary {
  font-size: 50rpx !important;
  background-color: lightgreen !important;
}

自定义组件中修改样式

需要接触样式隔离，设置成shared

Component({
	options: {
		styleIsolation: ''
	}
})

可以直接用外部样式类

<van-button custom-class="custom-class">

自己在wxss文件再定义.custom-class就可以了，记得加!important

批量修改组件样式 - 使用css变量

app.wxss定义

page{
	--color: lightgreen;
}

使用变量

background-color: var(--color) !important