vant-weapp 组件库
前往 vant-weapp 官网
npm 使用限制:不支持依赖于 Node.js 内置库、浏览器内置对象、C++ 插件 的包。
-
安装 vant-weapp
# 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @vant/weapp --production# 安装 0.x 版本 npm i vant-weapp -S --production
-
构建 npm
先初始化 npm 环境,再构建 npm,构建成功后,会生成
miniprogram_npm
目录。npm init --y
-
修改 app.json
将 app.json 中的
"style": "v2"
去除,并全局注册{// 全局注册组件"usingComponents": {"van-button": "@vant/weapp/button/index"} }
CSS 变量
vant-app 默认的css样式:查看详情
-
普通css定义变量
在
:root
中定义变量,通过var(变量名, 新值)
使用变量。/* 定义变量 */ :root {--main-color: red }/* 使用变量 */ .one {color: var(--main-color) }/* 传变量就使用传递的值 */ .two {color: var(--main-color, blue) }
-
小程序 css 定义变量
在
app.wxss
中定义全局变量。变量名写在
Page {}
中,通过--变量名: 值
的形式定义。Page {--button-default-background-color: #808080;--button-default-color: #fff; }