小程序使用 组件库 vant-weapp详细教程

简介: 小程序使用 组件库 vant-weapp详细教程

要说到小程序开发过程中用到的UI组件库,我第一个想到的就是vant,因为对于我来说,这个组件库里面的UI界面比较符合我的审美,颜值还不错,另外最重要的是,里面的功能比较齐全,项目之中要用到的一些需求,在这里都可以找到并且直接使用,就很nice了。


话不多说,记录一下这个框架的使用~

1:打开微信开发者工具,填写自己的appid和项目名称,选择不使用云服务,新建一个项目。

 


 

2:右击在选择在终端打开

 

进入项目的根目录底下,注意,一定要进入根目录哦,使用cd ../返回上一级目录~

 

3:小程序已经支持使用 npm 安装第三方包,

这里通过 npm 安装

1、第一步:npm init
   2、第二步:npm install --production
   3、第三步: 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": "../../miniprogram_npm/vant-weapp/button/index"
  }
}

使用npm i @vant/weapp安装的时候,到时候在在app.json或index.json中引入组件,需要使用这样的路径(推荐,因为这个可以直接抄文档,不需要改变引入路径的~)

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

4:在微信开发工具执行npm 构建,点击工具里面,构建npm

 

 


构建过程需要等待一会儿,不要捉急


 

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

如果构建完如果编译报错,再构建一次就好了


 

5:使用vant-weapp

看文档上的代码,来实现一个小按钮,照着文档复制粘贴即可~就是这么的任性


app.jsonindex.json中引入组件

上面说了,我是用 npm i @vant/weapp -S --production这种方式安装的,所以引入路径可以直接使用文档上,直接粘贴,不需要修改路径~

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

 

然后再copy一下wxml的代码

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

好了,这个时候就已经可以了

 

相关文章
|
29天前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
57 1
微信小程序:轻松实现时间轴组件
|
1月前
|
XML 小程序 前端开发
小程序制作教程
小程序制作教程
60 3
小程序制作教程
|
28天前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
366 1
|
29天前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
56 0
微信小程序:自定义关注公众号组件样式
|
1月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
51 1
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
172 1
|
1月前
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
50 1
|
2月前
|
小程序 容器
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
本文介绍了微信小程序中常用组件的使用方法,包括view、scroll-view、swiper与swiper-item、text与rich-text、button以及image组件。详细解释了各组件的功能、属性以及如何在小程序页面中进行使用。
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
|
1月前
|
小程序 前端开发 JavaScript
小程序入门之认识view和text组件
小程序入门之认识view和text组件
47 0
|
3月前
|
JSON 小程序 前端开发
终于搞懂了!微信小程序的渲染机制及组件使用
【8月更文挑战第8天】微信小程序的渲染机制及组件使用
140 3
终于搞懂了!微信小程序的渲染机制及组件使用

热门文章

最新文章