微信小程序+Vant的踩坑之旅

大概在一年前做微信小程序的时候,老大说要用UI框架,后来试了几个,感觉并不尽人意,在下不才，简单的分析一下。

1. WeUI(开发文档：github.com/Tencent/weu…)虽然看起来使用较简单,不过从开发角度来说，文档不够直接，使用不是很方便，再一个就是如果要更丰富漂亮的UI效果,需要修改WeUI的样式或自定义CSS,果断放弃
2. iView Weapp(开发文档：weapp.iviewui.com/docs/guide/…)UI组件比较丰富,美中不足的是页面风格比较固定、修改起来比较困难。输入框在模拟器下经常无法输入,用户体验极其不好
3. ColorUI(开发文档参考：www.color-ui.com)enenen,视觉效果很漂亮,可针对自己的需求，直接修改或覆盖CSS样式。就是缺少文档😶。。。广告比较多而已啦😶。。。那当然选择原谅它啦，毕竟开源不易,还是要支持一下的👍
4. TaroUI(开发文档:taro-ui.jd.com/#/)这个不多说,各位客官知道它神通广大就行,一套代码多端运行,牛批👍。但是————上手难度较高,开发中出现问题定位困难。如果用在微信小程序开发上，大材小用，杀鸡焉用宰牛刀！
5. Vant Weapp(youzan.github.io/vant-weapp/…)视觉效果虽然不是最好的,但胜在文档详细,唯一不算缺点的缺点是依赖于Vue开发,对Vue不熟悉的不建议使用

好了,接下来步入正题👉

第一次根据官网指示安装Vant框架的过程可谓是九九八十一难,我直呼好家伙,差点从入门到放弃😮经过本人扒官方文档和各种网上各种五花八门的入坑教程,终是运行起来了。由于当时没有记录问题的习惯,直到最近又要用到这个框架,所以我决定痛定思痛把这个坑给埋上。官网的步骤我就不一一操作了,你们可以自行实验。接着操作起来👉

1.如上图所示是项目创建后的默认文件

2.打开终端输入npm init。完成后你的项目根目录下会出现名为package.json的文件 3.npm install --production。根目录出现名为package-lock.json的文件

4.npm i @vant/weapp -S --production 或者 npm i vant-weapp -S --production

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

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

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

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

4.再微信开发者工具执行npm 构建，点击工具里面，构建npm

构建完会生成一个miniprogram_npm文件夹

特别强调一点：如果是最新版的微信开发工具，直接构建npm是不成功的

Vant官方解释👉
👀 将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
👀 修改 project.config.json
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}
注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可

大功告成，接着再构建一次

5.使用Vant中的按钮组件,在app.json或index.json中引入组件,推荐在app.json中引入公共组件,各个文件下的index.json引入该文件单独使用的组件

引入组件
{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

在wxml中使用
<view>
  <van-button type="primary">按钮</van-button>
</view>

接下来效果图

逼已装完，告辞！！