记录-uni-app App端半屏连续扫码 - Powered by Discuz! Archiver

各行业包装盒 發表於 2023-2-3 16:32:00

记录--uni-app App端半屏连续扫码

<h3 id="tid-QnSCH7"><span class="ne-text">这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助</span></h3>
<p><span class="ne-text"><img src="https://img2020.cnblogs.com/blog/2149129/202107/2149129-20210719135854680-672185839.jpg" width="135" height="252"></span></p>
<div>
<p>本文用一个简单的 demo 讲解 <strong>App端半屏连续扫码</strong> 的实现方式，包括（条形码、二维码等各种各样的码）。</p>
<p>我会从实现思路讲起，如果你比较急可以直接跳到 <strong>动手实现</strong> 章节获取代码。</p>
<h2 data-id="heading-1">开发和运行环境</h2>
<ul>
<li>开发工具：HBuilderX</li>
<li>前端框架：uni-app 我用了 vue3 的模式开发</li>
<li>前端延伸能力：HTML5+</li>
<li>运行环境：一加8（安卓手机）</li>
</ul>
<h2 data-id="heading-2">需求收集</h2>
<p>看到论坛上有人想在 <strong>App端</strong> 实现 <strong>连续扫码</strong> 功能。</p>
<p>认真看了下图，还是个 <strong>半屏</strong> 的扫码框。</p>
<p><img src="https://img2023.cnblogs.com/blog/2149129/202302/2149129-20230203163008140-1819285120.png" alt="" loading="lazy"></p>
<p> <img src="https://img2023.cnblogs.com/blog/2149129/202302/2149129-20230203163015521-1271861636.png" alt="" loading="lazy"></p>
<div>
<div>
<p>只是看到提了下需求，并没搜到多少解决方案。</p>
<p>于是我去 uni-app官网看了下，找到相关的内容：</p>
<ul>
<li><code><camera></code> 组件</li>
<li><code>uni.scanCode</code> 扫码的API</li>
</ul>
<p>但 <code><camera></code> 组件不支持 <code>App</code> 端使用（至少在写本文时不支持）；</p>
<p><code>uni.scanCode</code> 可以扫码，但会跳到另一个界面，并在全屏的模式下扫码，也不支持连续扫码。</p>
<p>当然，用 <code>uni.scanCode</code> 可以在扫码成功后再重新执行一次，这样就能实现连续扫码的功能，但界面会跳来跳去（跳到扫码界面，成功后又跳回app的界面，再执行又跳到扫码界面......）。</p>
<h2 data-id="heading-3">提炼需求</h2>
<p>根据上面的信息，提炼出3个关键词：</p>
<ul>
<li>App端</li>
<li>半屏</li>
<li>连续扫码</li>
</ul>
<p>我采用了 DCLOUD社区《uni-app怎么自定义扫码和连续扫》里的需求。粗略的写了下布局（我没有精细写样式）</p>
<p>最终实现的效果如下图所示</p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/acade18f2d9e4d839994e04f5ee8ae61~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?" alt="003.gif" class="medium-zoom-image" loading="lazy"></p>
<p>我用在线工具生成了2个二维码，内容分别为 “雷猴” 和 “鲨鱼辣椒”。</p>
<p>通过扫描二维码，把内容添加到页面中。</p>
<h1 data-id="heading-4">实现思路</h1>
<h2 data-id="heading-5">查文档</h2>
<p>既然 <code>uni-app</code> 的组件和API 都没有提供这方面的帮助，我就去插件市场看了下，要么只支持小程序，要么是收费的。</p>
<p>收费的？🤔🤔🤔 算了，大家都是打工人。</p>
<p>现在 <code>uni-app</code> 官方文档和插件市场两条路都走不通(主要是我穷)，那还有一条路：html5+</p>
<p><code>node.js</code> 可以理解为前端向服务端的延展， <code>html5+</code> 可以理解为前端向 <code>App</code> 的延展。</p>
<p>为了不浪费大家时间，我整理出本文要用到的 API 和模块。</p>
<p>打开 html5+ 可以找到 barcode 扫码模块，该模块有个 <code>create</code> 方法用来创建扫码识别控件。</p>
<p>但 <code>plus.barcode.create()</code> 方法又需要用到 <code>plus.webview</code> ，也就是会涉及到 <code>webview</code> 模块。</p>
<p><code>webview</code> 模块是用来管理应用窗口界面的，也就可以弄一个半屏的窗口出来。</p>
<h2 data-id="heading-6">整理</h2>
<p>相关方法都找到七七八八了，只需把逻辑整理好就可以编码了。</p>
<ol>
<li>【步骤1】弄一个窗口出来（半屏，或者你自己定个尺寸和定位吧）</li>
<li>【步骤2】弄一个扫码控件对象出来</li>
<li>【步骤3】将扫码控件添加到窗口</li>
<li>【步骤4】扫码成功后将结果添加到页面上</li>
<li>【步骤5】重新调用扫码方法</li>
</ol>
<h1 data-id="heading-7">动手实现</h1>
<p>我将上面5个步骤都在代码注释里标记出来了。</p>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><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',
   , // 只扫二维码
   {
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></pre>
</div>
</div>
</div>
<div>
<div>
<p>样式我没写得很精细，只是做了个粗糙的布局。</p>
<h1 data-id="heading-8">相关文档</h1>
<p>前端佬使用 <code>uni-app</code> 开发 App端，建议粗略过一遍 HTML5+ 文档，然后抽几个自己感兴趣的功能做个demo出来（这样能省钱，插件市场的东西也不便宜）。</p>
<h2 data-id="heading-9">扫码相关</h2>
<p>barcode 模块文档</p>
<p><code>plus.barcode.create</code> 的第二个参数是一个数组，里面可以设置需要识别的条码类型，可以同时支持多种条码。</p>
<p><code>barcode</code> 支持多种条码：</p>
<ul>
<li>QR: QR二维码，数值为0</li>
<li>EAN13: EAN条形码标准版，数值为1</li>
<li>EAN8: ENA条形码简版，数值为2</li>
<li>AZTEC: Aztec二维码，数值为3</li>
<li>DATAMATRIX: Data Matrix二维码，数值为4</li>
<li>UPCA: UPC条形码标准版，数值为5</li>
<li>UPCE: UPC条形码缩短版，数值为6</li>
<li>CODABAR: Codabar条形码，数值为7</li>
<li>CODE39: Code39条形码，数值为8</li>
<li>CODE93: Code93条形码，数值为9</li>
<li>CODE128: Code128条形码，数值为10</li>
<li>ITF: ITF条形码，数值为11</li>
<li>PDF417: PDF 417二维条码，数值为13</li>
</ul>
<p>我们在本例中主要用到 barcode.create 方法创建扫码控件。</p>
<p>本文只用了扫码成功的回调，在你的业务中可能还需要用到扫码失败的回调。</p>
<p>更多的配置和样式设置，建议自行查阅官方文档。本文的案例也有对扫码框做了颜色的调整（随便选了个颜色）。</p>
</div>
</div>
<h3>本文转载于：</h3>
<h3 id="tid-SwZPdd">https://juejin.cn/post/7072621583939928077</h3>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p> <img src="https://img2020.cnblogs.com/blog/2149129/202107/2149129-20210719144042684-15122820.jpg" width="212" height="209"></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/17089728.html

頁: [1]

琼殿技术论坛's Archiver

记录--uni-app App端半屏连续扫码