最终效果

pages配置

{"path": "components/barcode/scan-page","style": {"navigationBarTitleText": "扫一扫"}
}

组件代码

<template><view><!-- 扫码页面 --><!-- #ifndef APP-PLUS --><view class="wrap"><view class="u-tips-color">请在app中打开</view></view><!-- #endif --></view>
</template><script>export default {data() {return {barcode: null,flash: false,tip: '将二维码放入框中，即可自动扫描',}},onShow() {// 页面展示时，重新启动扫描检测if (this.barcode) {this.barcode.start()}},onLoad(params) {const {tip} = paramsif (tip) {this.tip = tip}// #ifdef APP-PLUSplus.navigator.setFullscreen(true); //全屏let currentWebview = this.$scope.$getAppWebview();this.createBarcode(currentWebview)this.createTipInfoView(currentWebview)this.createFlashBarView(currentWebview)// #endif},mounted() {},methods: {/*** 创建二维码* @param {Object} currentWebview*/createBarcode(currentWebview) {if (!this.barcode) {this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {top: `0px`,left: '0px',height: `100%`,width: '100%',position: 'absolute',background: '#FFCC00',frameColor: '#FFCC33',scanbarColor: '#FFCC33',});this.barcode.onmarked = this.onmarked;this.barcode.setFlash(this.flash);//此处未演示扫码成功回调的地址设置，实际请参考HTML5Plus API自行处理  //注意扫码区域需为正方形，否则影响扫码识别率  currentWebview.append(this.barcode);}this.barcode.start()},/*** 创建提示信息* @param {Object} currentWebview*/createTipInfoView(currentWebview) {const content = new plus.nativeObj.View('content', {top: '0px',left: '0px',height: '100%',width: '100%'},[{tag: 'font',id: 'scanTips',text: this.tip,textStyles: {size: '14px',color: '#ffffff',whiteSpace: 'normal'},position: {top: '90px',left: '10%',width: '80%',height: 'wrap_content'}}]);currentWebview.append(content);},// 创建 开关灯按钮createFlashBarView(currentWebview) {const openImg = this.crtFlashImg('static/yellow-scanBar.png')const closeImg = this.crtFlashImg('static/scanBar.png')const scanBarVew = new plus.nativeObj.View('scanBarVew', {top: '65%',left: '40%',height: '10%',width: '20%',},closeImg);scanBarVew.interceptTouchEvent(true);currentWebview.append(scanBarVew);scanBarVew.addEventListener("click", (e) => { //点亮手电筒this.flash = !this.flash;if (this.flash) {scanBarVew.draw(openImg);} else {scanBarVew.draw(closeImg)}if (this.barcode) {this.barcode.setFlash(this.flash);}}, false)},crtFlashImg(imgsrc) {return [{tag: 'img',id: 'scanBar',src: imgsrc,position: {width: '28%',left: '36%',height: '30%'}}, {tag: 'font',id: 'font',text: '轻触照亮',textStyles: {size: '10px',color: '#ffffff'},position: {width: '80%',left: '10%'}}]},// 扫码成功回调onmarked(type, result) {console.log('条码类型：' + type);console.log('条码内容：' + result);// 业务代码// 核对扫描结果// 判断是否是正确的格式// 不正确则跳转到 错误页面}}}
</script><style scoped>.wrap {height: calc(100vh);/* #ifdef H5 */height: calc(100vh - var(--window-top));/* #endif */display: flex;flex-direction: column;justify-content: center;align-items: center;}
</style>

参考资料
h5 barcode

uniapp中应用H5自定义二维码扫码界面相关推荐

uni-app相机组件实现自定义二维码扫描
入坑uni-app写小程序,项目需要自定义的二维码扫码页面. template部分 <template><view><view class="scanCode ...
Zxing生成自定义二维码样式
Zxing生成自定义二维码样式现在几乎每个app都带有二维码,但是google提供的zxing包,只给我们提供了核心的二维码算法,而开发过程中经常有自定义二维码的样式的需求,这时候我们就要自己写工具 ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
Android 自定义二维码
Android生成二维码使用的是zxing. 1.加入依赖,或者自己选择zxing版本:Releases · zxing/zxing · GitHub dependencies {...impleme ...
VUE微信H5生成二维码海报保存在本地相册
VUE微信H5生成二维码海报保存在本地相册一.效果二.说明公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需 ...
Java实现一行代码生成二维码，可传输到前端展示，可自定义二维码样式，可设置图片格式，可对二维码添加图片，可对二维码添加文字，可以设置二维码大小、字体大小、字体颜色、边框颜色、边框大小等等
Java实现一行代码生成二维码,可传输到前端展示,可自定义二维码样式,可设置图片格式,可对二维码添加图片,可对二维码添加文字,可以设置二维码大小.字体大小.字体颜色.边框颜色.边框大小等等. 0.准备 ...
spring boot高性能实现二维码扫码登录(中)——Redis版
前言本打算用CountDownLatch来实现,但有个问题我没有考虑,就是当用户APP没有扫二维码的时候,线程会阻塞5分钟,这反而造成性能的下降.好吧,现在回归传统方式:前端ajax每隔1秒或2秒发 ...
微信扫码登录自定义二维码样式
微信扫码登录自定义二维码样式前言 Java生成data-url 1.工具类pom 2.代码实现将data-url赋值给href 前言今天在做web端扫码登录时,前端需要定义二维码的样式.官方文档 ...
微信扫码登录自定义二维码显示信息
微信扫码登录,自定义二维码显示信息 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js& ...

uniapp中应用H5自定义二维码扫码界面

uniapp中应用H5自定义二维码扫码界面

最终效果

pages配置

组件代码

uniapp中应用H5自定义二维码扫码界面相关推荐

最新文章

热门文章