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

相关推荐
咸虾米_23 分钟前
解决getLocation获取当前的地理位置,报错:getLocation:fail auth deny及方法封装
微信小程序·uniapp·用户授权api
低代码布道师26 分钟前
少儿舞蹈小程序需求规格说明书
低代码·小程序·规格说明书
IceyWu1 小时前
uniapp小程序 LivePhoto(实况图片)实现详解
微信小程序·uni-app
浩星5 小时前
react+taro打包到不同小程序
react.js·小程序·taro
Jun28118 小时前
微信小程序初探之数据绑定
微信小程序
顾辰逸you18 小时前
uniapp--咸虾米壁纸(三)
前端·微信小程序
大包子20 小时前
小程序分享(下载)海报随记
微信小程序
996幸存者21 小时前
下拉、上拉选择器 支持搜索、删除、自定义选择内容、任意对象字段映射
微信小程序·uni-app
diygwcom1 天前
AI实现超级客户端打印 支持APP 网页 小程序 调用本地客户端打印
小程序
zkmall1 天前
ZKmall模块商城的推荐数据体系:从多维度采集到高效存储的实践
小程序·架构·开源·代码规范