虽然微信小程序有自带的组件库,但是有时候用已经封装好了的组件库更加方便快捷。
市面上有很多UI库,我使用的是Vant组件库。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。而我们要使用的是 微信小程序版本

Vant Weapp

一、安装Vant

1.1 打开cmd进入项目文件夹

1.2 输入命令 npm init,初始化一个package.json文件。可以一直回车,也可以输入你想输入的信息。

HeadlessUl组件库地址_外部样式

1.3 输入命令npm i @vant/weapp -S --production 安装vant

HeadlessUl组件库地址_开发者工具_02

1.4 将 app.json 中的 “style”: “v2” 去除

1.5 修改 project.config.json

开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为’./'即可

HeadlessUl组件库地址_小程序_03

1.6 构建 npm 包

打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。

二、引入Vant组件

如果想引入一个button组件,查看vant组件库的官方文档,在json文件中完成引入,wxml文件中直接使用,如果是多个页面需要用到的组件,直接在app.json中进行全局引入。

HeadlessUl组件库地址_HeadlessUl组件库地址_04


实际使用如下:

HeadlessUl组件库地址_json_05


官方文档下方有该组件的各种API,props、event以及外部样式类

三、修改vant组件的样式

修改vant组件的默认样式有几种方法:

第一种是使用它提供的外部样式类,例如button组件,有custom-class和loading-class两个外部样式类

HeadlessUl组件库地址_HeadlessUl组件库地址_06


自定义类名,然后修改成自己想要的样式

HeadlessUl组件库地址_HeadlessUl组件库地址_07


第二种是,有的组件修改样式的props,例如Divider组件

HeadlessUl组件库地址_外部样式_08


这种直接在props中写入自己想要修改成的属性即可

HeadlessUl组件库地址_外部样式_09


第三种,强制修改

通过控制台找到vant组件的class名称

wxml中,在vant组件外包一层class,通过.class .vant组件class名称修改样式

HeadlessUl组件库地址_外部样式_10


注:如果是引入已存在的小程序,只需要npm install,构建npm这两步即可