開發和運行環境

開發工具：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 >
    <view >掃碼結果</view>
	<view >
	  <view v-for="item in list" :key="item" >
		{{ 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端半屏連續掃碼

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

開發和運行環境

需求收集

提煉需求

實作思路

查檔案

整理

動手實作

相關檔案

掃碼相關

本文轉載于：

https://juejin.cn/post/7072621583939928077

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，