微信小程序--28(npm包)

目录

一、小程序对npm的支持与限制,

[二、什么是Vant Weapp](#二、什么是Vant Weapp)

三、安装Vant组件库

(一)通过npm安装

(二)构建npm包

[(三)修改 app.json](#(三)修改 app.json)


一、小程序对npm的支持与限制,

小程序已经支持使用npm第三方包,目的就是为了提高小程序的开发效率。但在小程序使用过程中,会有一些限制:

  • 首先它不支持node.js内置库的包
  • 其次它不支持依赖于浏览器内置对象的包
  • 最后它也不支持依赖于C++插件的包
  • 因此供小程序使用的包数量较少

二、什么是Vant Weapp

它是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应用。运用了MIT开源许可协议,对商业使用较友好

介绍 - Vant Weapp (vant-ui.github.io)

三、安装Vant组件库

在小程序项目中,安装Vant组件库步骤如下:

详细步骤可以参考https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang

(一)通过npm安装

1、初始化package包

2、安装并指定版本号

reason: certificate has expired报错

解决办法:输入npm config set strict-ssl false ,之后再次输入npm i @vant/weapp@1.3.3 -S --production,安装成功

(二)构建npm包

打开微信开发者工具,点击工具--》构建npm,并勾选使用npm模块的选项,构建完成后,就可以引入组件了

(三)修改 app.json

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

相关推荐
小羊Yveesss10 小时前
2026年微信小程序搭建一般需要多长时间?不同方案周期和延期点
微信小程序·小程序
禾高网络12 小时前
互联网医院|AI 互联网医院成品开发系统
java·大数据·人工智能·小程序
小羊Yveesss13 小时前
2026年微信小程序搭建算什么费用?年费、设计费、开发费和维护费
微信小程序·小程序
屑曦晨17 小时前
npm 全局包迁移指南:从系统目录到用户目录
npm·node.js
2501_9159184119 小时前
PerfDog 太贵?iOS 性能监控工具的功能对比与选择
android·ios·小程序·https·uni-app·iphone·webview
码农客栈1 天前
小程序学习(二十六)之“订单详情”
小程序
weixin_440058311 天前
2026知识付费小程序:年费全包零抽成,录播题库全功能覆盖
小程序·apache·小程序开发
小羊Yveesss1 天前
2026年微信小程序后端怎么搭建?后台、数据、接口和运维怎么选
运维·微信小程序·小程序
小皮虾1 天前
小程序首页性能优化实战:从 4 秒到 1.8 秒
前端·微信小程序
HackTwoHub1 天前
ARL灯塔重构版:支持APP/小程序/WEB资产同步扫描
人工智能·安全·web安全·网络安全·小程序·重构·自动化