小程序安装第三方组件库 如:vant

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序安装第三方组件库 如:vant相关的知识,希望对你有一定的参考价值。

参考技术A

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#bu-zou-yi-tong-guo-npm-an-zhuang

vant 小程序组件库

第一步 先npm init 回车 初始化新建package.json文件包
如果微信开发者工具无法输入命令 打开cmd面板 cd d:/ 进入目录 cd users 知道进入小程序项目目录输入命令
第二步 ## 安装

将 app.json 中的 "style": "v2" 去除,小程序的 新版基础组件 强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

开发者工具创建的项目, miniprogramRoot 默认为 miniprogram , package.json 在其外部,npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为\'./\'即可

打开微信开发者工具,点击 工具 -> 构建 npm ,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。

如果你使用 typescript 开发小程序,还需要做如下操作,以获得顺畅的开发体验。

请将 path/to/node_modules/@vant/weapp 修改为项目的 node_modules 中 @vant/weapp 所在的目录。

使用时:

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#yin-ru-zu-jian
vant小程序使用说明文档
在 app.json 或 index.json 中引入组件,详细介绍见 快速上手 。

"usingComponents":
"van-button": "@vant/weapp/button/index"

以上是关于小程序安装第三方组件库 如:vant的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序——引入Vant组件库

vant组件库 vue及小程序

微信小程序引入第三方UI组件

微信小程序中使用vant组件库(超详细)

微信小程序导入Vant-Weapp组件库及出错处理

二.移动端组件库