微信小程序--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" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

相关推荐
tcdos2 天前
不止扫码 — 微信生态深度融合(登录 + 支付 + 消息)
后端·微信小程序
小徐_23332 天前
Wot UI 2.2.0 发布:Button 新增 subtle,VideoPreview 预览体验继续增强
前端·微信小程序·uni-app
蜗牛前端5 天前
codex 全流程开发上线的高颜值礼簿小程序
前端·微信小程序
Flynt7 天前
npm v12 来了:allowScripts 默认关闭,我的项目差点跑不起来
安全·npm·node.js
爱勇宝8 天前
我想认真做一件小事:让孩子和家长更好地互动
微信小程序·小程序·云开发
唯火锅不可辜负9 天前
避坑指南:iOS 下 scroll-view 嵌套 fixed 布局的“翻车”现场与修复
微信小程序
didiplus9 天前
运维人的随身神器:我把25个常用工具塞进了微信小程序
微信小程序
JuliusDeng9 天前
一文搞懂 `.npmrc`:npm 源、SSL 与 `_authToken` 配置避坑
npm·前端工程化
一份执念9 天前
uni-app 小程序分包限制处理与主包体积优化实战
前端·微信小程序
一份执念9 天前
ECharts 安装与使用完全指南:从全量引入到小程序分包优化
微信小程序·echarts