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

相关推荐
speedoooo7 小时前
在现有App里嵌入一个AI协作者
前端·ui·小程序·前端框架·web app
万岳科技系统开发14 小时前
私域直播小程序源码的整体架构设计与实现思路
学习·小程序
ee82ee14 小时前
uniapp小程序底部键盘唤起问题处理,包含间隙处理,动画处理
微信小程序
qq_124987075315 小时前
基于springboot健康养老APP的设计与实现(源码+论文+部署+安装)
java·spring boot·后端·mysql·微信小程序·毕业设计
小信丶16 小时前
解决 pnpm dev 报错:系统禁止运行脚本的问题
前端·vue.js·windows·npm
汤姆yu16 小时前
基于微信小程序的驾校预约与学习系统
学习·小程序·驾校预约
夏源16 小时前
【微信小程序】实现引入 Echarts 并实现更新数据
微信小程序
speedoooo17 小时前
未来的App不再需要菜单栏?
前端·ui·容器·小程序·web app
猿究院_xyz17 小时前
微信小程序与echarts联动安卓真机测试出现黑色阴影
前端·javascript·微信小程序·小程序·echarts
小邋遢2.018 小时前
vscod 执行npm build报错:Error: Cannot find module ‘vite‘
前端·npm·node.js