- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- 微信小程序引入Vant的方法及操作是什么
微信小程序引入Vant的方法及操作是什么
Admin 2022-07-09 群英技术资讯 1249 次浏览
这篇文章主要讲解了“微信小程序引入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的方法及操作是什么"的内容，大家可以关注群英网络的其它相关文章。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
vue-router安装步骤是什么，使用是怎样
vue-router安装步骤是什么，使用是怎样？一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！
-
详解深拷贝和浅拷贝的常用方法
这篇文章小编给大家分享的是深拷贝和浅拷贝的内容，下文介绍了变量类型与存储空间、深拷贝和浅拷贝的概念和深拷贝和浅拷贝的常用方法等等，文中示例介绍的很详细，感兴趣的朋友可以了解看看，下面让我们一起来学习一下吧！
-
vue框架中怎么制作圆形下载进度条
本文主要介绍了vue + element-ui + springboot 实现文件下载进度条展现功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
-
React请求远程数据的方式有几种，怎样实现？
这篇文章给大家分享的是React请求远程数据的相关内容，React中请求远程数据的方式有四种，具体怎样实现呢？文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。
-
jQuery中元素增加属性值的方法是什么，怎样实现？
这篇文章我们来了解jQuery中元素增加属性值的方法，给元素增加属性值是JavaScript学习中比较基础的内容，在jQuery中可以利用attr()方法来实现，下面我们来详细的了解看看怎样做，有需要的朋友可以参考。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
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核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
