vue实现扫码功能
程序员文章站
2022-03-25 15:45:00
最近在项目中碰见一个打开摄像头扫码的功能,项目最后打包成app,用的是hbuilder打的包,刚好hbuilder打包集成h5+sdk,就可以直接用人家的sdk了。
demo地址:...
最近在项目中碰见一个打开摄像头扫码的功能,项目最后打包成app,用的是hbuilder打的包,刚好hbuilder打包集成h5+sdk,就可以直接用人家的sdk了。
demo地址:
代码实现:
<template> <div class="scan"> <div id="bcid"> <div style="height:40%"></div> <p class="tip">...载入中...</p> </div> <footer> <button @click="startrecognize">1.创建控件</button> <button @click="startscan">2.开始扫描</button> <button @click="cancelscan">3.结束扫描</button> <button @click="closescan">4.关闭控件</button> </footer> </div> </template> <script type='text/ecmascript-6'> let scan = null; export default { data() { return { codeurl: '', } }, methods: { //创建扫描控件 startrecognize() { let that = this; if (!window.plus) return; scan = new plus.barcode.barcode('bcid'); scan.onmarked = onmarked; function onmarked(type, result, file) { switch (type) { case plus.barcode.qr: type = 'qr'; break; case plus.barcode.ean13: type = 'ean13'; break; case plus.barcode.ean8: type = 'ean8'; break; default: type = '其它' + type; break; } result = result.replace(/\n/g, ''); that.codeurl = result; alert(result); that.closescan(); } }, //开始扫描 startscan() { if (!window.plus) return; scan.start(); }, //关闭扫描 cancelscan() { if (!window.plus) return; scan.cancel(); }, //关闭条码识别控件 closescan() { if (!window.plus) return; scan.close(); }, } } </script> <style lang="less"> .scan { height: 100%; #bcid { width: 100%; position: absolute; left: 0; right: 0; top: 0; bottom:3rem; text-align: center; color: #fff; background: #ccc; } footer { position: absolute; left: 0; bottom: 1rem; height: 2rem; line-height: 2rem; z-index: 2; } } </style>
预览:
打开hbuilder,新建项目,将目录指向 /dist ,然后右键转换成移动app,真机usb连接运行
效果图:
通过这个例子,像其他的调用手机原生功能如:语音输入、摇一摇、摄像头、文件系统、微信分享等也可以通过上述方式实现。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。