uniapp怎么调用扫一扫功能？

柔情只为你懂 2022-12-19 03:38 454阅读 0赞

1：新建一个uniapp项目，命名为test  
![1b7f307e47e00c0b066808563bd88d01.png][]  
可以看到，在开发工具HBuilderX里面，极速生成的模板目录结构如下  
![09bcfb73f65fa18dc7890c1e85d77ec6.png][]

2：打开pages底下的index.vue的组件，开始写代码。

我们都知道，无论用什么框架开发，都离不开文档，学会看文档，你就是一个合格的API工程师了。

官网文档：https://uniapp.dcloud.io/api/system/barcode

### uni.scanCode(OBJECT) ###

调起客户端扫码界面，扫码成功后返回对应的结果。

关于这些参数说明，就不一一的列举了，我相信大部分人都会，千万不要被这一行行一列列的不太懂的英文字母、参数劝退，认真你就输了。  
![1bcf262a9703f9885c65c5e39c869cd8.png][]

我们copy一下官方文档给的例子，放到自己的代码里面去，对，你没有看错，就是这些。  
![cab32558d64c13840281ccdf878143f8.png][]

index.vue代码如下

<template>
    	<view>
    		<button type="primary" @click="scanCode()">button</button>
    	</view>
    </template>
    <script>
    	export default {
    		data() {
    			return {
    			};
    		},
    		methods: {
    			scanCode() {
    				 // 允许从相机和相册扫码
    				 uni.scanCode({
    				     success: function (res) {
    				         console.log('条码类型：' + res.scanType);
    				         console.log('条码内容：' + res.result);
    				     }
    				 });
    			}
    		}
    	}
    </script>

3：开始运行  
如果你是这样的，运行到浏览器，虽然可以编译成功，

![4e45c103e2ce0b8ca94cea1e2db0244d.png][]

但是点击button按钮的时候，会发现存在这样的报错

[system] API `scanCode` is not yet implemented

![d20b4d0a2a8b04561941d97716abe415.png][]

因为uni.scanCode这个方法需要上真机上面调试哦，这就涉及到  
uniapp项目怎么连接手机调试了，上一篇已经写好了：传送门贴一下  
https://www.jianshu.com/p/07816dcec49d

4：调试结果  
在真机调试，如下  
![79eb8355b1d3aef96e36371e7f609606.png][]

完结，撒花~

![欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。][500G]

[1b7f307e47e00c0b066808563bd88d01.png]: /images/20221120/03743aea59e64bd3b48d1d240206ce21.png
[09bcfb73f65fa18dc7890c1e85d77ec6.png]: /images/20221120/85eb543d49dd40dca84f5c0ea8f24ab6.png
[1bcf262a9703f9885c65c5e39c869cd8.png]: /images/20221120/f292e3aec779486a968184d64da056fe.png
[cab32558d64c13840281ccdf878143f8.png]: /images/20221120/e29e7b565c644f899557c7e6f7d6d3fc.png
[4e45c103e2ce0b8ca94cea1e2db0244d.png]: /images/20221120/adbb6dd9503749b3a7eed4e558eca419.png
[d20b4d0a2a8b04561941d97716abe415.png]: /images/20221120/b5d1cd42a12246ca93ac13f094a1dd85.png
[79eb8355b1d3aef96e36371e7f609606.png]: /images/20221120/287e2af9511f4ee191d037dcc0756fcd.png
[500G]: https://img-blog.csdnimg.cn/20201105105307450.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70#pic_center