小程序使用 vant 快速创建页面

vant UI 组件库是有赞前端团队开发的一个 Vue 组件库，提供了一整套的 UI 基础组件和业务组件，通过 vant 可以快速搭建出风格统一的页面。

官方地址： vant UI 组件库

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

工具 ->构建 npm

效果：

内置样式：https://vant-contrib.gitee.io/vant-weapp/#/common

Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

添加1px 边框，为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。如果不是基于伪类实现的，则我们在添加的 1px 边框在 Retina 下默认是 2px 。

通过创建样式，可以对处于不同状态下的组件做不同的样式设定，以提升用户体验感。

在Towify中，大部分组件支持创建样式。

*** 作方法：

1.选中组件，在检查器-样式面板中找到创建样式的“+”。

2.在样式状态中选择默认状态或者选中状态。

3.为组件的不同状态设置不同的样式。已经设置的样式可以点击删除样式选项的“-”删除。

默认状态下所设置的样式会在页面渲染时显示出来。

但是，选中状态的样式需要配合触发器，设置当点击组件时，将组件激活，这时才能显示组件选中状态所设置的样式。

1、首先我们新建一个小程序，目录如下图所示。

2、接着我们给页面声明个背景色，方便查看效果。

3、然后在页面中定义一个button，如下图所示。

4、可以看到左侧的button效果如下图所示。

5、然后我们直接在button中重新填写要修改的默认样式即可覆盖，如下图所示。

6、可以看到页面的button样式被修改掉了。

---