微信小程序之引入使用Vant Weapp组件

清疚 2023-03-14 13:20 114阅读 0赞

Vant Weapp官网地址：https://youzan.github.io/vant-weapp/\#/quickstart，自己可以去其官网详细了解。

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

这里主要总结下微信小程序中如何使用该组件。

### **【1】新建一个微信小程序工程** ###

**如下所示：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 1]

### **【2】引入并使用Vant Weapp组件的几种方式** ###

**① 第一种-直接引入dist**

直接去该地址下载项目，https://github.com/youzan/vant-weapp，把dist文件进入你的小程序工程中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 3]  
在 json 文件中配置button组件,修改路径：

{
      "usingComponents": {
       "van-button": "/dist/button/index"
     }
    }

然后wxml就可以使用该组件，实例如下：

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

--------------------

**② 第二种方式–npm引入组件**

1.小程序工程目录下初始化组件库

npm init 
     //然后一直回车即可

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

2.通过npm进行安装

小程序已经支持使用 npm 安装第三方包，注意这个是在你小程序项目的目录下。

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

![在这里插入图片描述][20200518105031587.png]

3.微信开发者工具–构建npm

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 6]  
构建完成会多一个miniprogram\_npm文件夹  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 7]

4.详情–本地设置中勾选使用npm模块

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

5.index.json中引入后即可在index.wxml中使用

修改index.json文件：

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

修改index.wxml:

<view class="container">
      <view class="userinfo">
        <button wx:if="{
       {!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
        <block wx:else>
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{
       {userInfo.avatarUrl}}" mode="cover"></image>
          <text class="userinfo-nickname">{
       {userInfo.nickName}}</text>
        </block>
      </view>
      <view class="usermotto">
        <text class="user-motto">{
       {motto}}</text>
      </view>
    <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    </view>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70]: /images/20230312/f67a404a9c814e229046cda13bf6fd61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 1]: /images/20230312/98ad6167842b4215b4d617fe9a8f6640.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 2]: /images/20230312/ee73b6bbd43d4772b8a3044107eb856e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 3]: /images/20230312/543e06a9d1a242ebbba39208386a3388.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 4]: /images/20230312/c9ce404634b84e2b888438ee003aa3b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 5]: /images/20230312/4616240aa7f347d98e307ef6cefaebeb.png
[20200518105031587.png]: /images/20230312/49fcf346291443a59d03d84bc60c5c80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 6]: /images/20230312/b7105f81f1244b4a995b7493a10e3845.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 7]: /images/20230312/04a23df15b2d4effbf46044593d0d773.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 8]: /images/20230312/2b5b785b54de4ed792c837a4420388a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 9]: /images/20230312/0ba575183ad04368b5c7eae71abdd0b4.png