微信小程序：vant-weapp 组件库、css 变量

vant-weapp 组件库

前往 vant-weapp 官网

npm 使用限制：不支持依赖于 Node.js 内置库、浏览器内置对象、C++ 插件 的包。

1. 安装 vant-weapp

   # 通过 npm 安装
   npm i @vant/weapp -S --production
   
   # 通过 yarn 安装
   yarn add @vant/weapp --production
   
   # 安装 0.x 版本
   npm i vant-weapp -S --production
   

2. 构建 npm

   先初始化 npm 环境，再构建 npm，构建成功后，会生成 miniprogram_npm 目录。

   npm init --y
   

3. 修改 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;
  }