关于前端:uniapp-App端半屏连续扫码

点赞 + 关注 + 珍藏 = 学会了

本文用一个简略的 demo 解说 App 端半屏间断扫码 的实现形式，包含（条形码、二维码等各种各样的码）。

我会从实现思路讲起，如果你比拟急能够间接跳到 入手实现 章节获取代码。

开发工具：HBuilderX
前端框架：uni-app 我用了 vue3 的模式开发
前端延长能力：HTML5+
运行环境：一加 8（安卓手机）

看到论坛上有人想在 App 端 实现 间断扫码 性能。

认真看了下图，还是个半屏的扫码框。

只是看到提了下需要，并没搜到多少解决方案。

于是我去 uni-app 官网看了下，找到相干的内容：

<camera> 组件
uni.scanCode 扫码的 API

但 <camera> 组件不反对 App 端应用（至多在写本文时不反对）；

uni.scanCode 能够扫码，但会跳到另一个界面，并在全屏的模式下扫码，也不反对间断扫码。

当然，用 uni.scanCode 能够在扫码胜利后再从新执行一次，这样就能实现间断扫码的性能，但界面会跳来跳去（跳到扫码界面，胜利后又跳回 app 的界面，再执行又跳到扫码界面 ……）。

依据下面的信息，提炼出 3 个关键词：

App 端
半屏
间断扫码

我采纳了 DCLOUD 社区《uni-app 怎么自定义扫码和间断扫》里的需要。粗略的写了下布局（我没有精密写款式）

最终实现的成果如下图所示

我用在线工具生成了 2 个二维码，内容别离为“雷猴”和“鲨鱼辣椒”。

通过扫描二维码，把内容增加到页面中。

既然 uni-app 的组件和 API 都没有提供这方面的帮忙，我就去插件市场看了下，要么只反对小程序，要么是免费的。

免费的？🤔🤔🤔 算了，大家都是打工人。

当初 uni-app 官网文档和插件市场两条路都走不通(次要是我穷)，那还有一条路：html5+

node.js 能够了解为前端向服务端的延展，html5+ 能够了解为前端向 App 的延展。

为了不节约大家工夫，我整顿出本文要用到的 API 和模块。

关上 html5+ 能够找到 barcode 扫码模块，该模块有个 create 办法用来创立扫码辨认控件。

但 plus.barcode.create() 办法又须要用到 plus.webview，也就是会波及到 webview 模块。

webview 模块是用来治理利用窗口界面的，也就能够弄一个半屏的窗口进去。

相干办法都找到七七八八了，只需把逻辑整顿好就能够编码了。

【步骤 1】弄一个窗口进去（半屏，或者你本人定个尺寸和定位吧）
【步骤 2】弄一个扫码控件对象进去
【步骤 3】将扫码控件增加到窗口
【步骤 4】扫码胜利后将后果增加到页面上
【步骤 5】从新调用扫码办法

我将下面 5 个步骤都在代码正文里标记进去了。

<template>
  <view class="page">
    <view class="title"> 扫码后果 </view>
    <view class="result_list">
      <view v-for="item in list" :key="item" class="result_li">
        {{item}}
      </view>
    </view>
  </view>
</template>

<script setup>
import {onReady} from '@dcloudio/uni-app'
import {ref} from 'vue'

let webView = null // webview 容器
let barcode = null // 扫码框

const list = ref([]) // 扫码后果 - 列表

// 扫码胜利回调
function onmarked(type, result) {
  //【步骤 4】将扫码后果增加到 list 里
  list.value.push(result)

  //【步骤 5】1 秒后再从新开启扫码
  setTimeout(() => {barcode.start()
  }, 1000)
}

// 创立窗口和扫码控件
function createBarcode() {
  //【步骤 1】判断有没有创立过 webview 容器，如果没有就执行创立操作
  if (!webView) {
    webView = plus.webview.open(
      '','barCodeBox',
      {
        top: '60px',
        width: '100%',
        height: '200px'
      }
    )
  }

  //【步骤 2】判断有没有创立过 扫码框，如果没有就执行创立操作
  if(!barcode){
    barcode = plus.barcode.create(
      'barcode',
      [plus.barcode.QR], // 只扫二维码
      {
        top:'0px',
        left:'0px',
        width: '100%',
        height: '200px',
        position: 'static',
        scanbarColor: '#f1c01f',
        frameColor: '#c0ff01'
      }
    )

    barcode.onmarked = onmarked // 扫码后果回调函数

    //【步骤 3】将扫码框增加到 webview 里
    plus.webview.getWebviewById('barCodeBox').append(barcode)
  }

  barcode.start() // 开始扫码}

// 在页面加载时，提早 300 毫秒执行创立扫码框函数
onReady(() => {setTimeout(() => {createBarcode()
  }, 300)
})
</script>

<style>
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 200px 20rpx 0;
}

.title {
  font-size: 50rpx;
  color: #333;
}

.result_list {
  flex: 1;
  overflow-y: auto;
  box-sizing: border-box;
  padding-top: 20rpx;
}

.result_li {
  box-sizing: border-box;
  margin-bottom: 20rpx;
  padding: 10rpx 20rpx;
  border: 1px solid #7298c8;
  border-radius: 10rpx;
  font-size: 40rpx;
}
</style>

款式我没写得很精密，只是做了个毛糙的布局。

前端佬应用 uni-app 开发 App 端，倡议粗略过一遍 HTML5+ 文档，而后抽几个本人感兴趣的性能做个 demo 进去（这样能省钱，插件市场的货色也不便宜）。

barcode 模块文档

plus.barcode.create 的第二个参数是一个数组，外面能够设置须要辨认的条码类型，能够同时反对多种条码。

barcode 反对多种条码：

QR: QR 二维码，数值为 0
EAN13: EAN 条形码标准版，数值为 1
EAN8: ENA 条形码简版，数值为 2
AZTEC: Aztec 二维码，数值为 3
DATAMATRIX: Data Matrix 二维码，数值为 4
UPCA: UPC 条形码标准版，数值为 5
UPCE: UPC 条形码缩短版，数值为 6
CODABAR: Codabar 条形码，数值为 7
CODE39: Code39 条形码，数值为 8
CODE93: Code93 条形码，数值为 9
CODE128: Code128 条形码，数值为 10
ITF: ITF 条形码，数值为 11
PDF417: PDF 417 二维条码，数值为 13

咱们在本例中次要用到 barcode.create 办法创立扫码控件。

本文只用了扫码胜利的回调，在你的业务中可能还须要用到扫码失败的回调。

更多的配置和款式设置，倡议自行查阅官网文档。本文的案例也有对扫码框做了色彩的调整（轻易选了个色彩）。

webview 模块文档

👍《执行 vue create 时到底做了什么》

👍《Vue3 过 10 种组件通信形式》

👍《Vite 搭建 Vue2 我的项目（Vue2 + vue-router + vuex）》

👍《前端须要的收费在线 api 接口》

如果本文对你有帮忙，也心愿你能够点赞关注珍藏 ~ 这对我很有用 ~

点赞 + 关注 + 珍藏 = 学会了

关于前端:uniapp-App端半屏连续扫码

本文简介

开发和运行环境

需要收集

提炼需要

实现思路

查文档

整顿

入手实现

相干文档

扫码相干

创立窗口

举荐浏览