微信小程序开发模式(微信小程序引入Vant框架的全过程记录)
微信小程序开发模式
微信小程序引入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框架的文章就介绍到这了,更多相关微信小程序引入Vant框架内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- 微信小程序存token(小程序开发实现access_token统一管理)
- 微信小程序可以用百度的echarts吗(uniapp在微信小程序中使用ECharts的方法)
- 微信小程序中的代码怎么编辑(微信小程序新手入门之自定义组件的使用)
- 9小时搞定微信小程序开发(关于加快微信小程序开发的一些小建议)
- 微信小程序数学公式(微信小程序计算器实例详解)
- flask项目微信小程序(Python Flask 搭建微信小程序后台详解)
- 微信小程序获取手机信息(微信小程序获取手机号的踩坑记录)
- 微信小程序scrollview 截图(微信小程序scroll-view不能左右滑动问题的解决方法)
- 微信小程序双人游戏横屏(微信小程序实现拼图游戏)
- 微信小程序ui聊天窗口(微信小程序实现简单聊天室)
- 微信小程序企业微信打卡(使用Python实现企业微信的自动打卡功能)
- 微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)
- 微信小程序即时聊天功能怎么实现(微信小程序实现聊天室功能)
- 宝塔小程序制作(宝塔面板微信小程序使用图文教程)
- 微信小程序获取时间(微信小程序wxs日期时间处理的实现示例)
- 微信小程序日期选择器有星期天(微信小程序 滚动选择器时间日期详解及实例代码)
- 法国面包(法国面包法棍)
- 微信(微信分身)
- 双十二(双十二和双十一哪个划算)
- 佛肚竹盆景的养护之道(佛肚竹盆景的养护之道)
- 包水饺(包水饺手法怎么包视频)
- 越南河粉(越南河粉来自哪里)
热门推荐
- 常见的web服务器有哪些(web服务器是什么?web服务器怎么设置)
- python中的迭代器详解(Python通过for循环理解迭代器和生成器实例详解)
- js编写简单网页计算器(js实现网页计算器)
- dedecms怎么设置栏目(DEDECMS实现在标签中嵌套调用SQL的方法)
- C# 文件压缩与解压
- kubernetes云(云原生技术kubernetesK8S简介)
- sqlserver表分区缺点(SQL Server 公用表表达式CTE实现递归的方法)
- vue插槽的分类(vue具名插槽的基本使用实例)
- 宝塔面板phpMyAdmin错误教程(宝塔面板phpMyAdmin报错502 Bad Gateway nginx解决方法)
- vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9