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

相关推荐
T011561815 分钟前
全栈项目实战手记|艺培场馆课时预约小程序底层安全、交互、分包全量迭代复盘
安全·小程序·bug·前端实战·全栈项目实战手记·小程序实战
奶油喜多多24 分钟前
教育小程序定制开发指南:从需求梳理到上线运维
运维·小程序
2601_9499506332 分钟前
在线刷题用什么小程序?认识一下能导资料、AI出题的练题簿
人工智能·学习·小程序·刷题·小程序推荐
paopaokaka_luck1 小时前
基于springboot3+vue3+uniapp的河南非遗数字图谱小程序(协同过滤算法、数字图谱展示、ECharts 图形化分析)
java·前端·spring boot·学习·小程序·uni-app·echarts
晴天161 小时前
Node.js 中 `npm install` 命令分析-Day30
前端·npm·node.js
_Rookie._14 小时前
Package.json 的imports 和 exports
npm
Ai-_Man17 小时前
千问能否电脑批量导出?深度拆解「AI导出鸭」如何让这件事从“反人性”变成“优雅”
人工智能·ai·小程序
泠曦れいひ21 小时前
在当前项目中安装Vite
前端框架·npm·node.js
Joseph 乔21 小时前
【NVM】node 和 nvm 卸载(安装 node & nvm & npm & cnpm & yarn 及配置)
npm·node.js
太阳之神aboluo21 小时前
微信小程序 (1) 基础用法
微信小程序·小程序