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

我心飞翔 分类:javascript

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

微信图片_20210414151439.jpg

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

1618552019(1).png

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

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

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

image.png

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

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

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

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

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

屏幕截图 2021-04-16 143202.png
构建完会生成一个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.jsonindex.json中引入组件,推荐在app.json中引入公共组件,各个文件下的index.json引入该文件单独使用的组件

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

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

接下来效果图

image.png

逼已装完,告辞!!

image.png

回复

我来回复
  • 暂无回复内容