【微信实战】vant的使用

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

一、引言

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

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

二、vant使用过程

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

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

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

3 .构建npm：在微信开发者工具的菜单栏中找到工具栏的选项“构建npm”，等待构建完成

4. 详情中点击使用npm模块

5. 在json文件加入组件的引入

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

6. 在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>

<!-- //@submit="onSubmit" -->
<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>