微信小程序引入Vant第三方组件库

简介: 微信小程序引入Vant第三方组件库

第一步:检查环境


检查node.js和npm是否安装并且npm镜像源是否切换

第二步:设置微信小程序


在微信小程序详情里面勾选使用npm模块

第三步:在微信小程序项目的根目录下创建


package.json


npm init -y
//这句话的意思是创建package.json文件并且全部yes

第四步:输入第三方组件库的安装npm命令


npm i @vant/weapp -S --production
//我这里安装的是vant组件

第五步:在微信小程序中构建npm包


在微信小程序里面选择工具里面的构建npm

第六步:检查vant是否引入成功


这时候会发现多了一个miniprogram_npm文件夹,查看下面是否有@vant文件夹

第七步:使用vant组件


//复制vant里面按钮到index.wxml
<van-button type="info">信息按钮</van-button>
//然后在app.json或index.json中引入组件
//写到index.json只能在当前页面用,写到app.json是所有页面都可用
//app.json默认没有usingComponents,所以需要自己复制过去
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

第八步:关闭微信小程序基础样式


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

相关文章
|
8天前
|
资源调度 小程序 前端开发
【微信小程序】-- 使用 npm 包 - Vant Weapp(四十一)
【微信小程序】-- 使用 npm 包 - Vant Weapp(四十一)
|
5天前
|
数据采集 小程序 数据挖掘
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
|
8天前
|
小程序
【微信小程序6】引入第三方UI的方法(ColorUi)
【微信小程序6】引入第三方UI的方法(ColorUi)
36 0
|
8天前
|
前端开发 NoSQL 数据库
设计 QQ、微信等第三方账号登陆
设计 QQ、微信等第三方账号登陆
20 0
设计 QQ、微信等第三方账号登陆
|
8天前
|
小程序
小程序中使用weui组件库(一)
小程序中使用weui组件库(一)
|
8天前
|
小程序 开发者
小程序中使用weui组件库
小程序中使用weui组件库
|
8天前
|
开发框架 小程序 JavaScript
高颜值微信小程序 UI 组件库!
高颜值微信小程序 UI 组件库!
140 1
|
8天前
|
小程序 开发者
微信小程序使用vant组件所出现的一些问题
微信小程序使用vant组件所出现的一些问题
51 0
|
5月前
|
存储 小程序
微信小程序vant框架自定义tabbar实现跳转
全网并没有找到一篇可自定义图标的tabbar。 又都是复制的。。。 哎,于是我就来首发第一篇
106 0
|
8天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。

热门文章

最新文章