微信小程序系列——引入第三方组件库vant

简介: 微信小程序系列——引入第三方组件库vant

前言

在引入之前,需要安装nodejs作为运行环境,具体操作网上可以搜得到!

以引入vant为例:


step1 右键miniprogram,选择“在终端打开选项”


step2 初始化npm

输入npm init,下面的选择都用回车即可

在项目中产生package.json文件即为成功

step3 安装vant

使用命令 npm i vant-weapp -S --production

step4 构建npm

点击微信开发者工具中的“工具”,选择“构建npm”选项

结果:

项目中多出来一个文件夹miniprogram_npm:

step5 使用npm模块

点击开发者工具右上角“详情”,勾选使用npm模块:

step6 测试

在json文件中引入button

{
  "usingComponents": {
    "van-button": "vant-weapp/button"
  }
}
2. "usingComp

wxml:

<van-button type="primary">按钮</van-button>

结果


step7 解决问题

测试过程中出现了问题:

重复第4步,构建npm就行了!

OK, GAME OVER

相关文章
|
3月前
|
小程序 搜索推荐 JavaScript
微信小程序使用Vant
微信小程序使用Vant
152 2
|
3月前
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
52 1
|
3月前
|
SQL 监控 小程序
在微信小程序中使用 Vant 时如何防止 SQL 注入攻击?
在微信小程序中使用 Vant 时如何防止 SQL 注入攻击?
173 58
|
3月前
|
小程序 前端开发
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
本文介绍了在微信小程序中使用Vant Weapp组件库时,如何将外部的icon作为图标引入的步骤。包括在项目中创建静态资源文件夹、在iconfont官网添加图标并生成在线链接、下载iconfont代码并解压到小程序目录中、修改iconfont.wxss文件将本地链接替换为在线链接、在全局样式文件中引入iconfont.wxss样式,以及在页面中使用图标的方法。
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
260 1
|
2月前
|
JSON 小程序 前端开发
vant weapp 在小程序中的使用
vant weapp 在小程序中的使用
114 1
|
3月前
|
小程序 JavaScript 前端开发
微信小程序安装和使用 Vant Weapp 组件库
本文介绍了如何在微信小程序中安装和使用Vant Weapp组件库,包括通过npm安装、构建npm、修改配置文件以及在小程序中使用Vant Weapp提供的组件。
微信小程序安装和使用 Vant Weapp 组件库
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
731 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
765 1
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
155 7

热门文章

最新文章