专栏首页编程微刊uniapp怎么调用扫一扫功能?

uniapp怎么调用扫一扫功能?

1:新建一个uniapp项目,命名为test

可以看到,在开发工具HBuilderX里面,极速生成的模板目录结构如下

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

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

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

uni.scanCode(OBJECT)

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

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

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

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:开始运行 如果你是这样的,运行到浏览器,虽然可以编译成功,

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

[system] API `scanCode` is not yet implemented

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

4:调试结果 在真机调试,如下

完结,撒花~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序新方法 open-type获取头像昵称

    小程序自上线以来,官方一直在调整API,因此也出现了一批被废弃的接口,作为程序员的我们,此时此刻千万不能为这不断的变化而感到头疼,应当与时俱进,不断的更新自己的...

    祈澈菇凉
  • 小程序云开发实战一:小程序扫一扫获取到图书ISBN码(图书条形码)

    接触到云函数已经有一段时间了,之前一直在看api,现在自己跟着网络上的资料和视频学习,做了一个小项目,类似于豆瓣读书系列。 具体是这样的一个流程,后面会一步步...

    祈澈菇凉
  • 小程序动端组件库Vant Weapp的使用

    Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用

    祈澈菇凉
  • 10万元奖金,开启“智源粒子分类赛”下半时,三篇高分Baseline带你突破瓶颈!

    高能质子对撞中会产生大量粒子团喷注(jet),喷注可以根据其不同内在特性分为胶体喷注、轻夸克喷注、魅夸克喷注、美夸克喷注。

    大数据文摘
  • 盘点:数据新闻的七种生产模式

    大数据文摘
  • 【Hive】再看看如何将宽表转换成长表

    长宽格式数据之间相互转换使用到的函数,可以叫做表格生成函数。前面已经介绍了在Hive中如何将长格式数据转换成宽格式数据,现介绍一下在Hive中如何将宽格式数据...

    1480
  • Phalcon入门教程之安装

    Marser
  • 走进AI时代的文档识别技术 之文档重建

    ? 导读:作者系腾讯QQ研发中心——CV应用研究组的totoralin。本文主要介绍基于深度学习的文档重建框架,通过文档校正、版面分析、字体识别和阅读排序将纸...

    腾讯技术工程官方号
  • 【前端攻略--HTML/CSS】html 文档流的理解

    理解好文档流,有助于我们对css中定位和浮动的理解。什么是文档流呢,经过我看过的一些文章,加入自己的理解。我得出文档流的定义如下:

    小Gy
  • 文字上右下环绕广告的写法

    很久一段时间,我都在寻求一种文字从上-右-下方向环绕广告位的一个办法,而在找到之前,基本都是利用发布编辑器的所见即所得模式来实现广告的环绕。或者是利用程序截取一...

    练小习

扫码关注云+社区

领取腾讯云代金券