使用APICloud+vue+vantUI项目实战--实现二维码扫描功能

本次的教程主要是简介如何在APICloud中去使用vue和vantUI来搭建项目。在网上搜索了很多关于vantUI的使用方法，但是都是在vue脚手架的项目中使用的，vant如何在APICloud中去使用，网上找到的基本上都是不完整的，所以这次特意来填补这个空缺。

步骤一：去官网创建好自己的APICloud项目，并使用APICloud IDE编辑器导入项目。

APICloud的官网平台登陆    https://www.apicloud.com/

下载APICloud IDE           http://www.apicloud.com/dev

关于如何去创建APICloud的应用及APICloud IDE编辑器的下载，请参考另一篇博客，这里我就不重复去讲解了。https://blog.csdn.net/qq_40976321/article/details/100068706

步骤二：访问vant官网，项目中引入vue和vant的CDN

Vant官方文档 ： https://youzan.github.io/vant/#/zh-CN/quickstart

 

来到vant的官方文档中，我们选择快速上手—方式四 通过CDN引入—在Script中去引入声明注册Vue和vant。（到这里，很多人都会很纳闷，为什么不是应该按照步骤来，先通过指令在项目中安装vant呢？--原因：通过指令在项目中安装vant是vue脚手架项目中的使用方法，我们在APICloud中使用，就直接使用方法四的方式引入就可以了）。

通过CDN引入vue和vant

在自己的项目中引入vue和vant的CDN，并声明使用。

引用之后记得注册使用vue和vant

 

步骤三：在APICloud官网中往项目中添加扫码Scanner模块

--（1）在APICloud官网中添加Scanner模块

--(2)添加完模块之后，记得重新云编译一下

--（3）再到模块中—自定义loader—再次编译—编译完成后扫码下载（云编译之后，再这个编译，顺序别乱）

当项目中已经添加了新的模块，我们本地也需要同步一下

选择项目—右击—代码管理—从云端同步，这样同步之后，我们就可以调用扫码功能了。

 

步骤四：设置界面布局，及调用vue和vantUI实现扫码

--（1）设置基本样式

使用vantUI的按钮样式，先去官网找对应样式并复制到项目中

循环遍历这里我采用vant中的list列表

（注意：在vant的官网中很多的UI使用的是单标签形式，如list列表中的<van-cli />这种形式，但是在实际的应用中使用这种单标签可能会使得无法正常显示，所以我们尽量使用<van-cli ></van-cli>来，这样基本上就不会出现不正常形式）不清楚的去看下面这张图片，自己亲自动手试试就很清楚了。）

手机样式效果：

--（2）调用扫码模块

--（3）通过v-for将扫到的码循环展示出来

--（4）效果展示：

希望本教程能够对您有所帮助，能够更好属性vantUI的使用

项目源码链接：https://pan.baidu.com/s/1Uf6Zv_yx5deSkgUwejZ08Q

提取码：e5nf