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

相关推荐
SuperEugene3 分钟前
前端基础实战:JS/TS与Vue体系化扫盲(47 篇完整目录 + 避坑)
javascript·vue.js·前端框架·npm·ecmascript·状态模式
叶梅树9 小时前
DocsJS npmjs 自动化发布复盘(Trusted Publisher)
前端·npm
Kingexpand_com19 小时前
物联网APP开发实战:如何打造用户真正愿意用的智能硬件伴侣
物联网·小程序·app·智能硬件·物联网app定制开发
CHU72903521 小时前
家政同城服务APP前端功能玩法解析
前端·小程序
weixin_lynhgworld21 小时前
硬核功能赋能运营,定制盲盒小程序解锁沉浸式抽盒体验
小程序
前端嘣擦擦21 小时前
mac 安装 nvm + node + npm(国内镜像 + 官方安装步骤)
前端·macos·npm
灵机一物1 天前
灵机一物AI智能电商小程序-ReAct驱动的虚拟试穿智能体产品方案
人工智能·小程序
CHU7290351 天前
剧本杀组车约玩小程序前端功能版块设计及玩法介绍
前端·小程序
chushiyunen1 天前
pycharm创建桌面时间控件小程序
ide·小程序·pycharm
宁夏雨科网1 天前
SaaS系统搭建宠物用品小程序可行吗
小程序·商城小程序·微信商城·制作小程序·宠物用品小程序·宠物用品商城