纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

微信小程序引入Vant框架 微信小程序引入Vant框架的全过程记录

性感的小肥猫   2021-06-08 我要评论
想了解微信小程序引入Vant框架的全过程记录的相关内容吗性感的小肥猫在本文为您仔细讲解微信小程序引入Vant框架的相关知识和一些Code实例欢迎阅读和指正我们先划重点:微信小程序使用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框架

总结


相关文章

猜您喜欢

  • java五子棋游戏 java实现简易的五子棋游戏

    想了解java实现简易的五子棋游戏的相关内容吗yexiann在本文为您仔细讲解java五子棋游戏的相关知识和一些Code实例欢迎阅读和指正我们先划重点:java,五子棋下面大家一起来学习吧..
  • OpenCV图像分割与分水岭算法 C++中实现OpenCV图像分割与分水岭算法

    想了解C++中实现OpenCV图像分割与分水岭算法的相关内容吗进击的Explorer在本文为您仔细讲解OpenCV图像分割与分水岭算法的相关知识和一些Code实例欢迎阅读和指正我们先划重点:OpenCV图像分割,OpenCV,分水岭算法下面大家一起来学习吧..

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式