注册有礼

微信小程序引入Vant的方法及操作是什么

Admin 2022-07-09 群英技术资讯 1079 次浏览

上一篇：useEffect的使用导致闭包怎么办，如何解决 下一篇：Vue中如何引入iconfont图标库，操作是怎样的
这篇文章主要讲解了“微信小程序引入Vant的方法及操作是什么”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。


前言

有时候会觉得微信小程序原生的ui差了那么一点点感觉，那么能不能引入三方框架呢？本文以引入Vant来进行举例，共包含8个步骤。不管是不是云开发项目都一样使用。

实现步骤

1. 打开微信小程序的开发工具，进入项目。在项目的根目录文件上点击右键。选择在终端中打开。(注意是根目录)

2. 在命令窗口中键入npm init。然后所有配置都按默认配置进行，只需点击回车键即可。

3. 在命令窗口中键入npm install进行构建，成功之后会在根目录下生成 package.json 和 package-lock.json 文件

4. 接下来继续安装 Vant框架 ，步骤可根据官网进行操作vant-contrib.gitee.io/vant-weapp/…

　4.1 npm i @vant/weapp -S --production

　4.2 npm i vant-weapp -S --production

　4.3 修改 app.json

　4.4 修改 project.config.json

5. 回到微信开发者工具，在“工具”一栏中找到“构建npm”。等待构建成功即可。

6. 最后我们要使用 npm 模块, 在"详情"中找到使用 "npm 模块" 勾选即可

7. 使用Vant组件, 在app.json或index.json中引入组件，详细介绍见 Vant官网快速上手

8. 在页面中使用，直接引入组件即可。

・・・ 小插曲 ・・・

　　由于我这个是测试号AppId建的项目，是没有使用云开发的。导致到后面步骤操作完之后就报错了！报错信息如下图（1）；这时候我才发现这项目目录跟我另外一个云开发的项目的文件目录不一样，导致文件找不到，具体啥原因我也不晓得。但是我在云开发项目上是成功的了，如下图（2）；步骤是和以上写的步骤一模一样。

由此得出结论，大家尽量使用正式的AppId(即小程序公共平台中注册成功后的AppId)。避免越到后面麻烦越大。

　　原本想着用云开发项目再操作一遍，把最后成功的效果放上来，而不是记录一篇有问题的笔记。但是想了想这样也还不错，警醒自己下次不要再犯这个错误。所以最终还是以这篇博客呈现给大家。希望也可以起到一个提醒大家的作用，注意细节，不要粗心大意。

・・・ 神奇的一幕 ・・・

　　第二天我打开微信开发者工具发现，测试号AppId的项目又可以了，控制台报错信息也没有了。这个就很尴尬了呀！不太了解是咋回事（如果有大佬知道，请直接拿答案丢我吧!不敢说话...）。直接上图，如下图（3）；

图（1）： 报错信息

图（2）：含云开发项目成功使用Vant组件

图（3）：测试号AppId成功使用Vant框架

总结



上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"微信小程序引入Vant的方法及操作是什么"的内容，大家可以关注群英网络的其它相关文章。 群英智防CDN，智能加速解决方案
标签： 微信小程序引入Vant

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：useEffect的使用导致闭包怎么办，如何解决 下一篇：Vue中如何引入iconfont图标库，操作是怎样的

猜你喜欢

云活动 云活动

推荐内容

相关标签

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
产品与服务 云服务器 智防系统 服务器租用 服务器托管 虚拟主机
帮助中心 注册与购买 备案问题 鹰云服务器问题 服务器托管问题 域名问题 高防服务器问题 服务器租用问题
关于群英 群英简介 公司动态 资质荣誉 发展历程 群英环境 汇款信息 备案中心 联系我们
其他 数据中心 生态合作
友情链接
友链合作 群英网络 智帝云 主机评测 idc公司 商城系统 跨境电商 主机吧 酷库博客 OA系统 腾讯企业邮箱 锐成信息 sdwan

关注或联系群英网络

7x24小时售前：400-678-4567

7x24小时售后：0668-2555666

24小时QQ客服

群英微信公众号

CNNIC域名投诉举报处理平台

服务电话：010-58813000

服务邮箱：service@cnnic.cn

投诉与建议：0668-2555555

Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有

增值电信经营许可证 : B1.B2-20140078    粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008

免费拨打 400-678-4567
免费拨打 400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服