在Vue项目里如何实现扫描二维码的功能
最编程
2024-02-22 08:09:50
...
<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>
推荐阅读
-
对话NGC蔡岩：从机制创新到价值沉淀，解析DeFi产品开发逻辑 |链捕手 - 真正的DeFi产品首先要有足够的安全性和稳定性，如果能在此基础上有一些功能创新，那就非常好了。像 Uniswap 这样逐渐成为 DeFi 基础架构的产品，可遇而不可求。 链式捕手：固定利率协议之前关注度比较高，但观察下来发现，大部分协议还是类似于传统金融CDO（抵押债务凭证）的玩法，风险系数很高，您如何理解这块业务的价值和风险？ 蔡岩：确实有些定息协议类似CDO玩法，背后绑定一个债券，但并不是所有的定息协议都是这样的玩法，像这种CDO玩法的主要代表项目是88mph，背后绑定的是Aave、Compoud这样的借贷协议，在此基础上做定息和浮息债券；像APWine，背后同样是Aave，它会发行期货收益代币来锁定你的收益；Notional本身是做借贷市场的，在此基础上做定息协议。 非 CDO 的玩法，比如 Horizon，更像是一个利率撮合器，背后需要用户通过拍卖产生更合适的目标收益率；像 Saffron、BarnBridge 等是通过风险分级来定义不同的收益率。总的来说，创新还是挺多的。 价值层面是创新和想象力，因为在传统金融领域，比如银行做固定收益证券，或者评级机构给风险分级，这些业务都非常大，利润也很丰厚。而 DeFi 的对口业务给了类似业务很大的想象空间。尤其是固定利率协议的成熟产品不多，尝试各种微创新是很有意义的。 风险程度还是要具体到不同的玩法，比如，在 Aave、Compoud 等借贷协议的固定利率协议背后，如果这些借贷协议受到攻击，与之绑定的固定利率协议也会受损。 同样，如果自己做借贷市场，可能更需要更强的开发能力。再有，如果该程序的机制或参数设计不当，同样会导致协议运行不稳定，并可能造成大量用户清盘。 总的来说，风险在于固定利率协议的设计，这是一个非常复杂的过程，需要不断地尝试和出错。 链式捕捉器：刚刚提到背后是Aave/Compound的固定费率协议风险较大，您认为Aave最大的不确定性和创新点分在哪里？ 蔡岩：其实爱钱进一直被认为是走在行业前列的项目，他们的迭代速度非常快，比如率先尝试闪贷、推出新的经济激励模式、推出目前业内首个安全模块、尝试L2解决方案等等。 而在主要的借贷业务上，他们又十分谨慎，比如在抵押率、清算系数等风险参数的设计上相对于其他借贷协议较为保守，并不会存在为了吸引更多借贷资金而降低风险的要求。 与许多 DeFi 项目一样，即使 Aave 进行了多次审计，也无法保证不存在漏洞。前段时间，Aave 刚进入 V2 阶段时，白帽黑客就指出了某个漏洞。 之前的创新点可能是闪电借贷，这是当时业内独一无二的新产品功能，也为 Aave 带来了不少收益。当然，也有人批评闪电贷只能方便黑客实现资金效益的最大化，但工具本身并没有错，未来闪电贷肯定会有更多的应用场景。 其次是安全模块的设计，这有点像项目本身的储备金库，保障项目的安全性，这也是爱维开创的先河。说实话，目前大多数项目都没有做到代币模式的良性或正向运营，也做不到像Aave一样的安全模块，这是一个不小的门槛。 Chaincatcher从某种程度上来说，挖矿模式是DeFi财富效应的根本支撑，但Aave的CEO却说挖矿机制带来的动力是不可持续的，您怎么看这个观点？ 蔡岩："挖矿机制 "不可能失效，因为它是一种激励机制，或者说是项目冷启动的一种方式。但流动性开采亚博体育手机客户端不会一直高涨。比如去年11月的流行性挖矿高APY持续了一两个月就崩盘了，导致DeFi市场大幅回调。 Aave、Uniswap、Synthetix等项目真正爆发进入市值前15名也是在今年2月，我更倾向于这是头部DeFi长期价值的体现。虽然大家都喜欢抢高APY的矿机，但我个人很少参与挖矿，所以我并不觉得流动性挖矿是DeFi的基本面支撑。
-
在Vue中，如何使用Moment.js实现活动倒计时的功能
-
在Vue项目里，用docx-preview插件实现在Express后端预览Word文档的方法
-
如何在Vue中实现二维码生成、长按跳转与扫描预览功能的通俗解释
-
如何在H5页面中利用HTML5的qrcode功能实现实体二维码的扫描与识别
-
在React Native项目中，利用expo实现二维码扫描功能时遇到失败情况
-
在Vue项目里如何实现扫描二维码的功能
-
在 Vue 的移动端应用中实现扫码功能（支持条形码扫描）
-
在H5网页中轻松实现扫描二维码的功能指南
-
探究H5纯网页在非微信环境中通过扫描二维码实现的功能实践与探讨