Vol.3 微信小程序之Vant UI

OK，通过WeUI进行登录页面构建后，基本掌握了微信小程序中UI组件和基本跳转的使用。但是WeUI提供的组件太少，而且不太好看，这里我转而使用Vant UI作为项目的组件库，不再使用WeUI。

引入Vant UI的步骤比较多，而且因为微信小程序开发工具各种诡异的设定，走了一点弯路。

首先，npm引入vant

npm i @vant/weapp -S --production

然后，去除app.json中的"style": "v2"

然后，修改project.config.json

这里官方文档有误，让我懵逼了很久。经过多次尝试，该文件应该要修改为

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

然后，在开发工具右上角详情-本地设置中，勾选使用npm模块，再点击工具-构建npm。

至此，vant引入完成。

接着，在app.json中按需引入组件即可

"usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-field": "@vant/weapp/field/index",
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index",
    "van-toast": "@vant/weapp/toast/index",
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index",
    "van-swipe-cell": "@vant/weapp/swipe-cell/index",
    "van-skeleton": "@vant/weapp/skeleton/index",
    "van-tag": "@vant/weapp/tag/index",
    "van-image": "@vant/weapp/image/index",
    "van-divider": "@vant/weapp/divider/index",
    "van-collapse": "@vant/weapp/collapse/index",
    "van-collapse-item": "@vant/weapp/collapse-item/index",
    "van-popup": "@vant/weapp/popup/index",
    "van-datetime-picker": "@vant/weapp/datetime-picker/index",
    "van-switch": "@vant/weapp/switch/index",
    "van-tree-select": "@vant/weapp/tree-select/index",
    "van-tab": "@vant/weapp/tab/index",
    "van-tabs": "@vant/weapp/tabs/index",
    "van-notify": "@vant/weapp/notify/index"
  }

使用vant组件库重构登录页面

<!--index.wxml-->
<van-toast id="van-toast" />
<view class="container">

  <view class="title">登录</view>
  <van-cell-group>
    <van-field bindinput="inputData" model:value="{{username}}"  placeholder="请输入用户名/学号" label="用户名">
    </van-field>
    <van-field
    bindinput="inputData"
    model:value="{{password}}"
    type="password"
    label="密码"
    placeholder="请输入密码"
  />
  <view class="btn">
    <van-button type="primary" block loading="{{buttonLoading}}" bindtap="login" disabled="{{loginDisabled}}">登录</van-button>
  </view>
  </van-cell-group>

</view>

基本没有太大的代码变化，呈现了非常不错的显示效果。