html做一个条码扫描页面,vue h5页面如何实现扫一扫功能，扫条形码获取编码

如图这是我在网上找的一个方法，使用h5的Barcode实现扫码的功能，但代码报错 'plus' is not defined ，是什么原因呢？，现在在手机上真机测试点击扫描也没反应，没调取摄像头，有老师知道什么原因吗？需求是前端实现扫一扫，扫条形码获取条形码的编码，大佬们有没有做过这种的？

...载入中...

1.创建控件

2.开始扫描

3.结束扫描

4.关闭控件

export default {

name: 'scan',

data () {

return {

codeUrl: ''

}

created () {

mounted () {

this.startRecognize()

methods: {

// 创建扫描控件

startRecognize () {

let that = this

if (!window.plus) return

that.scan = new plus.barcode.Barcode('codeId')

that.scan.onmarked = onmarked

function onmarked (type, result, file) {

console.log('remarked')

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

console.log(result)

that.closeScan()

}

that.startScan()

// 开始扫描

startScan () {

const _ts = this

if (!window.plus) return

_ts.scan.start()

// 关闭扫描

cancelScan () {

const _ts = this

if (!window.plus) return

_ts.scan.cancel()

// 关闭条码识别控件

closeScan () {

const _ts = this

if (!window.plus) return

_ts.scan.close()

}

.scan {

height: 100%;

}

#codeId {

height: 100%;

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;

}

html做一个条码扫描页面,vue h5页面如何实现扫一扫功能，扫条形码获取编码相关推荐

现学现卖做一个炫酷的动态背景页面
很喜欢酷炫的页面,自从看了抖音的主页之后(如下)(链接),就决定要也做一个牛逼的动态背景页面对...背景是视频,而且还有音效,太牛逼了然后决定自己做一个,废话不说,先弄代码: 这里为了设计简便,用 ...
VUE H5页面微信/QQ/微博分享连接设置
VUE H5页面微信/QQ/微博分享连接设置问题想改变分享的标题.副标题.图片以及重定向打开的地址? 解决第一步:在项目控制台里面 npm i -S weixin-js-sdk ( 然后视情况 ...
前端的小玩意（9.5）——做一个仿360工具箱的web页面（完结篇，可以跑起来的工具箱）
前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小 ...
前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）
前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小 ...
Hybrid App中原生页面 VS H5页面（分享）
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有" ...
Android精华篇 - App中原生页面 VS H5页面
现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Native App(原生app,后面都用"原生ap ...
Hybrid App中原生页面 VS H5页面
Hybrid App中原生页面 VS H5页面现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Native ...
小程序web-view跳转H5页面，H5页面通过事件返回小程序页面
小程序页面: //url为H5页面路径 H5页面跳转小程序页面 npm install weixin-js-sdk 在使用的vue单页面内引入:import wx from 'weixin-js-sd ...
html 5 调用手机条码扫描,vue h5页面如何实现扫一扫功能，扫条形码获取编码
如图这是我在网上找的一个方法,使用h5的Barcode实现扫码的功能,但代码报错 'plus' is not defined ,是什么原因呢?,现在在手机上真机测试点击扫描也没反应,没调取摄像头,有老 ...
vue H5页面制作微信公众号前期准备
首先vue项目的搭建过程就不说了接下来进入正题最重要的是配置成手机端页面也就是h5页面: vue项目中在index.html中配置 <meta name="viewport&quo ...

html做一个条码扫描页面,vue h5页面如何实现扫一扫功能，扫条形码获取编码

html做一个条码扫描页面,vue h5页面如何实现扫一扫功能，扫条形码获取编码相关推荐

最新文章

热门文章