小程序使用组件库 vant-weapp详细教程

旧城等待， 2022-12-20 05:38 113阅读 0赞

要说到小程序开发过程中用到的UI组件库，我第一个想到的就是vant，因为对于我来说，这个组件库里面的UI界面比较符合我的审美，颜值还不错，另外最重要的是，里面的功能比较齐全，项目之中要用到的一些需求，在这里都可以找到并且直接使用，就很nice了。

小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp  
Github源码：https://github.com/youzan/vant-weapp  
中文文档：https://vant-contrib.gitee.io/vant-weapp/\#/intro

话不多说，记录一下这个框架的使用~

1：打开微信开发者工具，填写自己的appid和项目名称，选择不使用云服务，新建一个项目。

![cacde06a2fb366ba4d01f71998dbba32.png][]

![2b39001e08e814773d401a0f89b6d1c5.png][]

2：右击在选择在终端打开  
![860dd50cce20979db28bdef3739fa300.png][]

进入项目的根目录底下，注意，一定要进入根目录哦，使用cd …/返回上一级目录~  
![bbadc72ce2b1f21ffe8c1e12021bb56b.png][]

3：小程序已经支持使用 npm 安装第三方包，  
这里通过 npm 安装

1、第一步：npm init
    
       2、第二步：npm install --production
    
       3、第三步： npm i @vant/weapp -S --production
          或者  npm i vant-weapp -S --production

![d700781753e9a16b88ca8cccda82b2a7.png][]  
![23cc1c65ca37f5c3d0ecf14f076e0186.png][]

![04e52e4c424f7b1bc0b03169b4f3b46c.png][]

这里需要注意一下  
npm i vant-weapp -S --production或者npm i @vant/weapp -S --production  
引入的区别

使用npm i vant-weapp安装的时候，到时候在在app.json或index.json中引入组件，需要使用这样的路径

{
      "usingComponents": {
        "van-button": "../../miniprogram_npm/vant-weapp/button/index"
      }
    }

使用npm i @vant/weapp安装的时候，到时候在在app.json或index.json中引入组件，需要使用这样的路径（推荐，因为这个可以直接抄文档，不需要改变引入路径的~）

{
    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }
    }

4：在微信开发工具执行npm 构建，点击工具里面，构建npm  
![ed7d232e8033c95e6950a8c515d131bf.png][]

构建过程需要等待一会儿，不要捉急  
![75d78d9608469cdcc8c163ff8d132bfe.png][]

构建完会生成一个miniprogram\_npm文件夹  
如果构建完如果编译报错，再构建一次就好了  
![12b8435068f0da2165d4d69d99bd5050.png][]

5：使用vant-weapp

看文档上的代码，来实现一个小按钮，照着文档复制粘贴即可~就是这么的任性  
https://vant-contrib.gitee.io/vant-weapp/\#/button

在`app.json`或`index.json`中引入组件  
上面说了，我是用 npm i @vant/weapp -S --production这种方式安装的，所以引入路径可以直接使用文档上，直接粘贴，不需要修改路径~

"usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }

![c3828662d3f4eff77be1eec8b657221e.png][]

然后再copy一下wxml的代码

<van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>

好了，这个时候就已经可以了

![d403782b2e3f06401e9895aee0f28c11.png][]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[cacde06a2fb366ba4d01f71998dbba32.png]: /images/20221120/6cb5e19a16284cb2b12879b3aa04b9d7.png
[2b39001e08e814773d401a0f89b6d1c5.png]: /images/20221120/5e96b249a5f048bfb84d3d05c05a66e5.png
[860dd50cce20979db28bdef3739fa300.png]: https://img-blog.csdnimg.cn/img_convert/860dd50cce20979db28bdef3739fa300.png
[bbadc72ce2b1f21ffe8c1e12021bb56b.png]: https://img-blog.csdnimg.cn/img_convert/bbadc72ce2b1f21ffe8c1e12021bb56b.png
[d700781753e9a16b88ca8cccda82b2a7.png]: https://img-blog.csdnimg.cn/img_convert/d700781753e9a16b88ca8cccda82b2a7.png
[23cc1c65ca37f5c3d0ecf14f076e0186.png]: https://img-blog.csdnimg.cn/img_convert/23cc1c65ca37f5c3d0ecf14f076e0186.png
[04e52e4c424f7b1bc0b03169b4f3b46c.png]: https://img-blog.csdnimg.cn/img_convert/04e52e4c424f7b1bc0b03169b4f3b46c.png
[ed7d232e8033c95e6950a8c515d131bf.png]: https://img-blog.csdnimg.cn/img_convert/ed7d232e8033c95e6950a8c515d131bf.png
[75d78d9608469cdcc8c163ff8d132bfe.png]: https://img-blog.csdnimg.cn/img_convert/75d78d9608469cdcc8c163ff8d132bfe.png
[12b8435068f0da2165d4d69d99bd5050.png]: https://img-blog.csdnimg.cn/img_convert/12b8435068f0da2165d4d69d99bd5050.png
[c3828662d3f4eff77be1eec8b657221e.png]: https://img-blog.csdnimg.cn/img_convert/c3828662d3f4eff77be1eec8b657221e.png
[d403782b2e3f06401e9895aee0f28c11.png]: https://img-blog.csdnimg.cn/img_convert/d403782b2e3f06401e9895aee0f28c11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201110184744540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70#pic_center