【微信实战】vant的使用

╰+攻爆jí腚メ 2022-11-25 10:10 184阅读 0赞

> 大家好，我是一名计算机软件工程专业的大三学生，由于转专业计算机基础还比较薄弱，正在努力学习，弥补自我中，奋斗目标大三进大厂实习；目前学习的语言有C\\C++、JAVA以及前端基础，会一点Python、微信小程序。后面会学习IOS以及andriod，主攻IOS，欢迎志同道合的朋友私聊，探讨学习，QQ：674619459。

**一、引言**

前天尝试做了一些微信小程序，界面和与SSM通信基本上完成了，但是做完之后发现界面及其丑陋，作为一个理工男还是可以理解的。于是我就想Vue就有element-ui这些精美的组件库，微信是不是也应该有，后面了解到[vant][],于是今天花了一下午把界面进行了优化。

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

修改前后对比还是一目了然的，虽然修改之后还是有点丑陋但是还是比之前的好不少。

**二、vant使用过程**

其实个人感觉教程对于微信小程序的使用vant不太详细，所以说我来说一下微信小程序是如何引用的。

1 .在终端使用`npm init` 初始化生成一个package.json文件

2 .在使用 `npm i vant-weapp -S --production`进行vant-weapp的引入

3 .构建npm：在微信开发者工具的菜单栏中找到工具栏的选项“构建npm”，等待构建完成  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 2]  
4. 详情中点击使用npm模块

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 3]  
5. 在json文件加入组件的引入

{ 
      "usingComponents":{ 
      "van-button": "vant-weapp/button",
      "van-field": "vant-weapp/field",
      "van-rate":"vant-weapp/rate",
      "vant-search":"vant-weapp/search"
    }
    }

1.  在wxml中进行组件使用即可（参考官网）

<view class="container">
    
      <view class="page-body" style=" height:40%; width:100%; background-color:red; padding:0px; margin-bottom:20px">
    
        <view class="page-section page-section-spacing swiper" style="width:100%; height:100%; background-color:blue; padding:0px;">
         
          <swiper
            style="height:100%; width:100%; padding:0px"
            indicator-dots="{ {indicatorDots}}" autoplay="{ {autoplay}}" circular="{ {circular}}" vertical="{ {vertical}}"
            interval="{ {interval}}" duration="{ {duration}}" previous-margin="{ {previousMargin}}px" next-margin="0px">
            <block wx:for="{ {background}}" wx:key="*this">
                  <swiper-item>
                <image src="../../images/swiper/1.jpg"></image>
                  </swiper-item>
    
                  <swiper-item>
                <image src="../../images/swiper/2.jpg"></image>
                 </swiper-item>
    
                  <swiper-item>
                <image src="../../images/swiper/3.jpg"></image>
                  </swiper-item>
            </block>
          </swiper>
    
        </view>
      </view>
      <view>
      </view>
    
    
    <van-form>
     <van-field
        left-icon="contact"
        v-model="username"
        name="体温"
        label="体温"
        placeholder="体温 °C"
      />
      <van-field
        left-icon="smile-o"
        v-model="username"
        name="心率"
        label="心率"
        placeholder="心率 次/秒"
      />
      <van-field
       left-icon="flower-o"
        v-model="password"
        type="password"
        name="睡眠"
        label="睡眠"
        placeholder="睡眠时长 h"
      />
      <view style="color:#cdcdcd; margin-top:2px;">自我状态评分 <van-rate v-model="3" /></view>
    
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    
    </view>

[vant]: https://youzan.github.io/vant/#/zh-CN/card
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70]: /images/20221124/daf8d4eef8cb4a3f8d524cc92852502f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 1]: /images/20221124/11dce48acab141b1a2a18328052065fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 2]: /images/20221124/2d37567cf4254eb98ba1a3bcb8b4ad84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 3]: /images/20221124/dec5b6f5690944d7952cb02a4c47585c.png