Vant Weapp小程序UI组件库

方式一. 通过 npm 安装 (推荐)

小程序已经支持使用 npm 安装第三方包，详见 npm 支持

# 通过 npm 安装
npm i vant-weapp -S --production

# 通过 yarn 安装
yarn add vant-weapp --production

方式二. 下载代码

直接通过 git 下载 Vant Weapp 源代码，并将dist或lib目录拷贝到自己的项目中

git clone https://github.com/youzan/vant-weapp.git

引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。某些小程序框架会要求关闭ES6转ES5选项，可以引入lib目录下 ES5 版本的组件。

ES6

"usingComponents": {
  "van-button": "/path/to/vant-weapp/dist/button/index"
}

ES5

"usingComponents": {
  "van-button": "/path/to/vant-weapp/lib/button/index"
}

使用组件

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

在开发者工具中预览示例小程序

# 安装项目依赖
npm install

# 执行组件编译
npm run dev

打开微信开发者工具，导入example目录的项目就可以预览示例了。

将代码包放入我们自己的项目中，之后我们在用的时候在json文件内的usingComponents里配置相应的文件名和对应模块路径，建议文件名与模块名匹配方便开发。

当我们引入模块后，在wxml文件里就可以使用定义好的引用模块了。相关样式也是都在模块内部定义好了，对应能修改的东西都在文档里，这时候你想修改相应的东西就需要去看文档了，找到对应模块根据文档提供的props参数进行修改。

众口难调，自己在开发时会有各种各样的需求，会发现这些参数并不能满足我们的需求，这时候我们就需要根据自己想要的效果动手去改组件内源代码了（笑），当然没有把握的时候不建议随便改。

如果哪个模块提供的参数不满足你的需求，那我们就只能没有条件创造条件了。在你引入模块的时候那个json文件里的usingComponents配置里面会有对应模块的路径找到它。

你会发现所有的组件模块都在里面找到对应的那个模块，和我们正常pages里面的格式基本一样（js,json,wxml,wxss）

我们拿button来看吧，首先打开wxml文件

你会发现它的本质还是小程序button和view组成的嘛，没错那么我们就可以根据需求相当于更改原生的button和view一样来改它！那如何做呢？首先看代码，第一行引入了一个公共的方法，先不管他。我们改样式跟操作层还不需要打交道，如果是一个经常用的样式不用经常动态改，那在wxss里写成class，如果是一个多样性的样式，直接写成行内样式吧，动态的引入那就写一个参数咯。

class引入

行内引入

那之后呢？之后我们就去看看js吧。

props就是我们需要动手改的地方，他是用来接收传入参数的合集；参数都写在了里面，我们只需要在里面写入我们的参数和参数类型就可以啦，这里我们用string类型就足以。

ok完事具备，回去我们的代码里，