Vant Weapp 小程序UI组件库的安装，以及引用商品导航栏组件

2024-11-29 来源：个人技术集锦

Vant Weapp

轻量、可靠的小程序 UI 组件库。

实习在做一个商城类的微信小程序，刚好在B站上看的视频看到直接引用Vant Weapp中的代码，并在组件中声明就可以直接使用Vant Weapp组件库中有的组件，刚好我需要做一个商品详情页底部的导航栏，然后开始尝试安装配置,在这里分享一下我的详细安装配置使用Vant组件的过程，希望可以给你带来一点帮助。

安装

这边我就大概表述一下我的步骤：我是通过npm安装的

1.取得微信小程序的npm 支持

 //npm//
npm init
npm install / npm install --production

2.修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3.修改project.config.json

在 project.config.json 文件中添加：

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

4. 构建 npm

# 通过 npm 安装
npm i vant-weapp -S --production

接着点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件

构建成功就会直接出现：

这里我构建的时候其实遇到了挺多问题的，搜了很多文章最后才解决

使用

1.引入组件

只需要在 app.json 或你需要使用 vant 的页面中的 json 文件进行组件的注册即可使用了，这里我记忆引用了两个组件了，供你参考一下

#app.json
"usingComponents": {
  "van-goods-action": "@vant/weapp/goods-action/index",
  "van-goods-action-icon": "@vant/weapp/goods-action-icon/index",
  "van-goods-action-button": "@vant/weapp/goods-action-button/index"
}

2.使用组件

注册引入组件后，在对应的页面wxml文件中直接使用组件

#xx.wxml
van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />
  <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />
  <van-goods-action-button
    text="加入购物车"
    type="warning"
    bind:click="onClickButton"
  />
  <van-goods-action-button text="立即购买" bind:click="onClickButton" />
</van-goods-action>

其中的 bind:click=" " 方法需要按自己的需求在对应的 js 文件中编写,方法我现在还没完善

#xx.js
 onClickIcon() {
    Toast('点击图标');
  },

  onClickButton() {
    Toast('点击按钮');

我引用的是一个商品底部导航组件，效果如下：

同样也有其他的样式选择

提示信息：设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

自定义按钮颜色：通过color属性可以自定义按钮的颜色，支持传入linear-gradient渐变色。

总结

里面包含了 基础组件表单组件反馈组件展示组件导航组件业务组件 很多实用的组件，就像我直接引用的这个商品导航组件，如果让我自己编写其实实现下来要挺多时间的，这样直接引用组件真的非常方便，强烈推荐去看一下Vant Weapp的官方文档。

目前我现在的工作是我的第一份实习工作，做的所有的事情几乎都是初次接触，包括上面提到的node.js 的安装配置，现在的这份实习给实习生的开发工作前端偏多，目前接触到Vue和小程序的很多配置都需要在网上找各种的文章，不过现在也是发现的多看官方文档是一件好事，但是在配置开发的过程中还是难免会遇到各种个样的问题，对于初学者来说处理一些报错的问题需要到处搜索文章解决真的挺费时间的，所以我也尽可能的写的详细，如果你看到这里还有疑问的话可以再联系我，第一次做小程序开发我也还有很多很多要学习的。

.徐

显示全文

全部栏目