小程序-----vant weapp安装以及自定义主题色

首先查看小程序根目录中是否存在package.json文件

没有的话,在项目根目录打开cmd,输入npm init -y初始化一下,初始化一个包管理

安装vant weapp包

在根目录的cmd中输入npm i @vant/[email protected] -S --production进行安装 @后面可以指定版本

修改 app.json

将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

构建npm

小程序-----vant weapp安装以及自定义主题色_第1张图片

自定义主题色

定制主题色
https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less
小程序-----vant weapp安装以及自定义主题色_第2张图片

在小程序app.wxss中在page下面定义颜色

page {
  --button-default-color: #ff0000;
}

在页面中正常使用vanbutton

<van-button type="default">默认按钮van-button>

可以看到主题色被改变

小程序-----vant weapp安装以及自定义主题色_第3张图片

你可能感兴趣的:(微信小程序,小程序,前端,javascript,npm,css3)