精华内容
下载资源
问答
  • uniapp中应用H5自定义二维码扫码界面

    千次阅读 2020-09-10 15:48:17
    uniapp中应用H5自定义二维码扫码界面最终效果pages配置组件代码 最终效果 pages配置 { "path": "components/barcode/scan-page", "style": { "navigationBarTitleText": "扫一扫" } } 组件代码 <template&...

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

    最终效果

    效果图

    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
    			} = params
    			if (tip) {
    				this.tip = tip
    			}
    			// #ifdef APP-PLUS
    			plus.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

    展开全文
  • Barcode模块管理条码(维码和二维码)扫描识别,支持常见的维码(如EAN13码)及二维码(如QR码)。通过调用设备的摄像头对条码进行扫描识别,扫描到条码后进行解码并返回码数据内容及码类型。 Barcode模块可使得...

    参考H5+的api文档
    Barcode模块管理条码(一维码和二维码)扫描识别,支持常见的一维码(如EAN13码)及二维码(如QR码)。通过调用设备的摄像头对条码进行扫描识别,扫描到条码后进行解码并返回码数据内容及码类型。
    Barcode模块可使得Web开发人员能快速方便调用设备的摄像头进行条码扫描识别,而不需要安装额外的扫描插件。规范建议条码识别引擎的支持规范定义的所有条码常量类型。

    demo1:

    如图效果展示:只实现了扫一扫功能
    在这里插入图片描述
    实现代码:

    <template>
    	<div class="msgbox">
        <div class="header">
          <div class="head_goback">
            <van-icon name="cross" size="20"  @click="back" />
          </div>
          <div class="title_head ellipsis">
              <span class="title_text">扫描二维码</span>
          </div>
        </div>
        <div class="Detail">
            <div id="bcid">
              <div style="width:400px;height:400px; background-color: #000; margin: 15% auto 5%; text-align: center"></div>
            </div>
            <p style="text-align: center">将二维码放入框内,即可自动扫描</p>
            <div style="text-align: center" class="sweep" @click="sweep">开始扫码</div>
        </div>  
    	</div>
    </template>
    <script>
    var scan = null;//必须放全局
    	export default {
    		data() {
    			return {
    				
    			}
    		},
    		mounted() {
          const self = this
          if (window.plus) {
            self.plusReady()
          } else {
            document.addEventListener('plusready', self.plusReady, false)
          }
            document.addEventListener('DOMContentLoaded', function () {
            // alert('DOMLoaded')
            self.domready = true
            self.plusReady()
          }, false)
          setTimeout(function () {
            self.sweep() // 扫码函数
          }, 1000)
    		},
        watch:{
          
        },
    		methods: {
    			//   点击返回并关闭
    			back: function() {
            const self = this
            self.$router.push({
                name:'myIndex'
            })
            self.scan.close(); //关闭条码识别控件
    			},
    			plusReady() {
            const self = this
            // 获取窗口
            self.scan = new plus.barcode.Barcode('bcid')
            self.scan.onmarked = self.onmarked
          },
          // 开始扫码
          sweep () {
            const self = this
            self.scan.start()
          },
          onmarked (type, result) {
            let t = this
            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
            }
            var result = result.replace(/\n/g, '')
            console.log(result) // 扫出来的值
            t.scan.close() //扫码成功后关闭扫码
            t.$router.push({// 跳转到对应的页面 
                name: '/processDetails',
                params: {
                    urlid: result,
                }
            })
    			}
    		},
    	}
    </script>
    <style scoped lang="less">
      .msgbox{
        background-color: #000;
        color: white;
        height: 100vh;
        overflow: hidden;
        .header{
          background-color: #000;
          height: 2.00533rem;
          width: 100%;
          text-align: center;
          line-height: 2.00533rem;
          display: flex;
          /*position: fixed;*/
          top:0;
          z-index: 99999;
          /deep/ .head_goback{
            padding-top: 10px;
            width: 10px;
            height: 10px;
            padding-left: 10px;
          }
          /deep/ .title_head{
            width: 92%;
            padding-top: 5px;
            text-align: center;
            color: white;
            font-size: 0.8533rem;
            letter-spacing: 2px;
          }
        }
        .Detail{
          width: 96%;
          margin: 0 auto;
          .session{
            .name{
              margin: 0.4rem 0;
              font-size: 0.4rem;
              color: #333333;
              font-weight: bold;
            }
            .useTutorials{
              background-color: #3998F7;
              border-radius: 5px;
            }
            .desc{
              margin: 0.4rem 0;
              font-size: 0.4rem;
              color: #333333;
              .title{
                font-weight: bold;
              }
              .intro{
                margin-top: 0.1rem;
              }
            }
          }
          p{
            font-size: 0.72rem;
          }
          .sweep{
            text-align: center;
            margin: 0.1rem auto;
            width:13.8667rem;
            height:1.7067rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius:1.024rem;
            font-size: 0.768rem;
            position: relative;
            z-index: 9999;
            color: white;
            background:#FF8C99;
            box-shadow:0px 6px 9px 0px rgba(255, 140, 153, 0.57);
            margin-top: 2rem;
          }
        }
        .start{
          text-align: center;
          margin: 0 auto;
          width:13.8667rem;
          height:1.7067rem;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius:1.024rem;
          font-size: 0.768rem;
          background:white;
          border: 2px solid rgba(255, 169, 163, 1);
          color: rgba(255, 169, 163, 1);
          margin-top: 0.64rem;
        }
      }
    </style>
    

    demo2:

    如图效果展示:除了扫一扫功能,右上角可选择本地图片识别
    在这里插入图片描述
    实现代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
    		<meta name="HandheldFriendly" content="true"/>
    		<meta name="MobileOptimized" content="320"/>
    		<title>Hello H5+</title>
    		<script type="text/javascript" src="../js/common.js"></script>
    		<script type="text/javascript">
    var ws=null,wo=null;
    var scan=null;
    // H5 plus事件处理
    function plusReady(){
    	// 获取窗口对象
    	ws=plus.webview.currentWebview();
    	wo=ws.opener();
    	// 开始扫描
    	ws.addEventListener('show', function(){
    		scan=new plus.barcode.Barcode('bcid');
    	    scan.onmarked=onmarked;
    	    scan.start({conserve:true,filename:'_doc/barcode/'});
    		createSubview();
    	}, false);
    	// 显示页面并关闭等待框
        ws.show('pop-in');
    }
    document.addEventListener('plusready', plusReady, false);
    
    // 二维码扫描成功
    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(/\r\n/g, '');
        wo.evalJS("scaned('"+ type +"','"+ result +"','"+ file +"');");
        back();
    }
    // 创建子窗口
    function createSubview(){
    	//
    }
    // 从相册中选择二维码图片 
    function scanPicture(){
        plus.gallery.pick(function(path){
    	    plus.barcode.scan(path,onmarked,function(error){
    			plus.nativeUI.alert('无法识别此图片');
    		});
        }, function(err){
            console.log('Failed: '+err.message);
        });
    }
    		</script>
    		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
    		<style type="text/css">
    #bcid {
    	width: 100%;
    	position: absolute;
    	top: 0px;
    	bottom: 0px;
    	text-align: center;
    }
    .tip {
    	color: #FFFFFF;
    	font-weight: bold;
    	text-shadow: 0px -1px #103E5C;
    }
    		</style>
    	</head>
    	<body style="background-color:#000000;">
    		<div id="bcid">
    			<div style="height:40%"></div>
    			<p class="tip">...载入中...</p>
    		</div>
    	</body>
    </html>
    
    

    demo3:

    如图效果展示:除了扫一扫功能,右上角可开启闪光灯功能
    在这里插入图片描述
    实现代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
    		<meta name="HandheldFriendly" content="true"/>
    		<meta name="MobileOptimized" content="320"/>
    		<title>Hello H5+</title>
    		<script type="text/javascript" src="../js/common.js"></script>
    		<script type="text/javascript">
    var ws=null,wo=null;
    var scan=null;
    // H5 plus事件处理
    function plusReady(){
    	// 获取窗口对象
    	ws=plus.webview.currentWebview();
    	nv=ws.getTitleNView();
    	wo=ws.opener();
    	// 开始扫描
    	ws.addEventListener('show', function(){
    		scan=new plus.barcode.Barcode('bcid',[plus.barcode.QR,plus.barcode.EAN8,plus.barcode.EAN13],{frameColor:'#00FF00',scanbarColor:'#00FF00'});
    	    scan.onmarked=onmarked;
    	    scan.start({conserve:true,filename:'_doc/barcode/'});
    		createSubview();
    	}, false);
    	// 显示页面并关闭等待框
        ws.show('pop-in');
    }
    document.addEventListener('plusready', plusReady, false);
    
    // 二维码扫描成功
    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(/\r\n/g, '');
        wo.evalJS("scaned('"+ type +"','"+ result +"','"+ file +"');");
        back();
    }
    // 创建子窗口
    var view = null;
    function createSubview(){
    	view = new plus.nativeObj.View('nbutton', {
    		bottom: '20px',
    		left: '30%',
    		width: '40%',
    		height: '44px'
    	}, [{
    		tag: 'rect',
    		id: 'rect',
    		rectStyles: {
    			radius: '8px',
    			color: 'rgba(255,0,0,0.8)'
    		}},{
    		tag: 'font',
    		id: 'text',
    		text: '暂 停',
    		textStyles: {
    			color: '#FFFFFF'
    		}
    	}]);
    	// 处理事件
    	view.addEventListener('click', function(e){
    		switchScan();
    	}, false);
    	view.addEventListener('touchstart', function(e){
    		view.drawRect({
    			radius: '8px',
    			color: 'rgba(255,0,0,0.5)'
    		}, {}, 'rect');
    	}, false);
    	view.addEventListener('touchend', function(e){
    		view.drawRect({
    			radius: '8px',
    			color: 'rgba(255,0,0,0.8)'
    		}, {}, 'rect');
    	}, false);
    	ws.append(view);
    }
    // 开关闪光灯 
    var bFlash = false;
    var AVCaptureDevice=null;
    var Camera=null;
    function switchFlash(){
    	bFlash = !bFlash;
    	scan.setFlash(bFlash);
    	ws.setStyle({titleNView: {
    		buttons: [{
    			fontSrc: '_www/helloh5.ttf',
    			text: (bFlash?'\ue400':'\ue401'),
    			fontSize: '18px',
    			onclick: 'javascript:switchFlash()'
    		}]
    	}});
    }
    // 切换扫描  
    var bScan = false;
    function switchScan(){
        if(bScan){
        	scan.start({conserve:true, filename:'_doc/barcode/'});
        	view&&(view.drawText('暂 停', {}, {color:'#FFFFFF'}, 'text'));
        }else{
        	scan.cancel();
        	view&&(view.drawText('开 始', {}, {color:'#FFFFFF'}, 'text'));
        }
        bScan=!bScan;
    }
    		</script>
    		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
    		<style type="text/css">
    #bcid {
    	width: 100%;
    	position: absolute;
    	top: 0px;
    	bottom: 0px;
    	text-align: center;
    }
    .tip {
    	color: #FFFFFF;
    	font-weight: bold;
    	text-shadow: 0px -1px #103E5C;
    }
    		</style>
    	</head>
    	<body style="background-color:#000000;">
    		<div id="bcid">
    			<div style="height:40%"></div>
    			<p class="tip">...载入中...</p>
    		</div>
    	</body>
    </html>
    
    

    注:转载请标明出处

    展开全文
  • 基于浏览器实现二维码扫码增强版-带视频演示Safari浏览器亲测效果基于H5流媒体,调用手机摄像头实现扫码基于URL Scheme,调用第三方APP实现扫码 模拟app扫码效果,支持前置摄像头后置摄像头切换,纯js+h5+css3实现,...


    模拟app扫码效果,支持前置摄像头后置摄像头切换,纯js+h5+css3实现,对接后端语言不限。还研究了借助其他app调用扫码效果更佳!

    Safari浏览器亲测效果

    浏览器支持二维码扫描效果

    基于H5流媒体,调用手机摄像头实现扫码

    实现原理:H5调用系统媒体设备》选择前置摄像头》捕获视频流》渲染到视频播放器》定时抓取视频截图》渲染到canvas》转换为图片流》使用图像识别库对图片流进行二维码识别
    优势:
    1.基于浏览器实现,轻便且维护方便无需安装或借助其他app 。
    2.PC端带有摄像头设备也可兼容。

    劣势:
    1.部分浏览器不兼容(随着浏览器的更新兼容度会越来越高)
    2.安全要求必须基于HTTPS访问。
    3.夜拍模式不能自主控制开启补光。

    基于URL Scheme,调用第三方APP实现扫码

    实现原理:app之间为提高相互之间的深度连接性,会向系统注册一种自身功能API的快捷方式,利用其提供的快捷方式可以调用指定的app功能,如微信扫码 支付宝扫码等。
    优势:
    1.借用现有app实现扫码能力,无需另外安装兼容性好。
    2.一键调用扫码,无需在应用间切换操作。
    3.可以从第三app打开的webview中调用其提供的api接口获取部分系统信息、用户信息等。

    劣势:
    1.存在浏览器和app之间的切换过程。
    2.依赖第三方接口可能存在更新变化。

    ** 建议:** 可以将方案1和方案2进行融合做兼容处理,提高其功能可用性。

    ↓↓↓↓↓附源码下载↓↓↓↓↓

    展开全文
  • uni-app 中应用H5+自定义二维码扫码界面

    万次阅读 热门讨论 2019-05-06 15:38:07
    前段时间因项目需求,要在uni-app的码uni.scanCode(OBJECT),中并没有自定的参数或者接口,所以自己用H5+搞了个码界面,这里做一下记录,就算是个轮子。 下面开始造轮子。 1,创建个.vue的页面文件。因为...

    前段时间因项目需求,要在uni-app的扫码uni.scanCode(OBJECT),中并没有自定的参数或者接口,所以自己用H5+搞了个扫码界面,这里做一下记录,就算是一个轮子。

    下面开始造轮子。

    1,创建一个.vue的页面文件。因为我这需求是全屏的扫码,所以在pages.json 中设置去掉原生导航栏

    2,开始在页面中绘制界面

    如图我们看到有内容,返回箭头,标题,提示文本信息,扫码框,打开手电动按钮等内容,

    虽然看上去是有这5部分,但是我们可以认为是二维码一层,文字及操作按钮是一层,

    A.二维码层创建

    // 创建二维码窗口
                createBarcode(currentWebview) {
                    barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
                        top: '0',
                        left: '0',
                        width: '100%',
                        height: '100%',
                        scanbarColor: '#1DA7FF',
                        position: 'static',
                        frameColor: '#1DA7FF'
                    });
                    barcode.onmarked = this.onmarked;
                    barcode.setFlash(this.flash);
                    currentWebview.append(barcode);
                    barcode.start();
                }

    // 扫码成功回调
                onmarked(type, result) {
                    var text = '未知: ';
                    switch (type) {
                        case plus.barcode.QR:
                            text = 'QR: ';
                            break;
                        case plus.barcode.EAN13:
                            text = 'EAN13: ';
                            break;
                        case plus.barcode.EAN8:
                            text = 'EAN8: ';
                            break;
                    }
                    plus.navigator.setFullscreen(false);
                    uni.navigateBack({
                        delta: 1
                    });
                    this.$eventHub.$emit(this.type, {
                        result: result
                    });
                    barcode.close();
                }

    // 创建操作按钮及tips
                createView(currentWebview) {
                    // 创建返回原生按钮
                    var backVew = new plus.nativeObj.View('backVew', {
                            top: '0px',
                            left: '0px',
                            height: '40px',
                            width: '100%'
                        },
                        [{
                            tag: 'img',
                            id: 'backBar',
                            src: 'static/backBar.png',
                            position: {
                                top: '2px',
                                left: '3px',
                                width: '35px',
                                height: '35px'
                            }
                        }]);
                    // 创建打开手电筒的按钮
                    var scanBarVew = new plus.nativeObj.View('scanBarVew', {
                            top: '60%',
                            left: '40%',
                            height: '10%',
                            width: '20%'

                        },
                        [{
                                tag: 'img',
                                id: 'scanBar',
                                src: 'static/scanBar.png',
                                position: {
                                    width: '28%',
                                    left: '36%',
                                    height: '30%'
                                }
                            },
                            {
                                tag: 'font',
                                id: 'font',
                                text: '轻触照亮',
                                textStyles: {
                                    size: '10px',
                                    color: '#ffffff'
                                },
                                position: {
                                    width: '80%',
                                    left: '10%'
                                }
                            }
                        ]);
                    // 创建展示类内容组件
                    var content = new plus.nativeObj.View('content', {
                            top: '0px',
                            left: '0px',
                            height: '100%',
                            width: '100%'

                        },
                        [{
                                tag: 'font',
                                id: 'scanTitle',
                                text: '扫码',
                                textStyles: {
                                    size: '18px',
                                    color: '#ffffff'
                                },
                                position: {
                                    top: '0px',
                                    left: '0px',
                                    width: '100%',
                                    height: '40px'
                                }
                            },
                            {
                                tag: 'font',
                                id: 'scanTips',
                                text: this.name,
                                textStyles: {
                                    size: '14px',
                                    color: '#ffffff',
                                    whiteSpace: 'normal'
                                },
                                position: {
                                    top: '90px',
                                    left: '10%',
                                    width: '80%',
                                    height: 'wrap_content'

                                }
                            }

                        ]);
                    backVew.interceptTouchEvent(true);
                    scanBarVew.interceptTouchEvent(true);
                    currentWebview.append(content);
                    currentWebview.append(scanBarVew);
                    currentWebview.append(backVew);

    backVew.addEventListener("click", function(e) { //返回按钮
                        uni.navigateBack({
                            delta: 1
                        });
                        barcode.close();
                        plus.navigator.setFullscreen(false);

                    }, false);

        var temp = this;
                    scanBarVew.addEventListener("click", function(e) { //点亮手电筒
                        temp.flash = !temp.flash;
                        if (temp.flash) {
                            scanBarVew.draw([{
                                    tag: 'img',
                                    id: 'scanBar',
                                    src: 'static/yellow-scanBar.png',
                                    position: {
                                        width: '28%',
                                        left: '36%',
                                        height: '30%'
                                    }
                                },
                                {
                                    tag: 'font',
                                    id: 'font',
                                    text: '轻触照亮',
                                    textStyles: {
                                        size: '10px',
                                        color: '#ffffff'
                                    },
                                    position: {
                                        width: '80%',
                                        left: '10%'
                                    }
                                }
                            ]);
                        } else {
                            scanBarVew.draw([{
                                    tag: 'img',
                                    id: 'scanBar',
                                    src: 'static/scanBar.png',
                                    position: {
                                        width: '28%',
                                        left: '36%',
                                        height: '30%'
                                    }
                                },
                                {
                                    tag: 'font',
                                    id: 'font',
                                    text: '轻触照亮',
                                    textStyles: {
                                        size: '10px',
                                        color: '#ffffff'
                                    },
                                    position: {
                                        width: '80%',
                                        left: '10%'
                                    }
                                }
                            ])
                        }
                        if (barcode) {
                            barcode.setFlash(temp.flash);
                        }
                    }, false)

    }

    将代码都贴出来看着比较繁琐,但是觉还是在这里记录一下,算是uni-app应用过程的学习笔记

    项目代码

     

     

    展开全文
  • 现有一个二维码二维码是通过QrCode生成的,二维码的内容是一个H5的页面链接,web 生成二维码的时候,手机微信扫一扫,如何让它认为本次扫做是在微信环境进行的 function isWechat() { var ua = window.navigator....
  • Custom-scanCode-for-uni-app uni-app中h5+自定义二维码扫码界面
  • 生成二维码的JavaScript代码--qrcode.js /*from tccdn minify at 2014-6-4 14:59:43,file:/cn/c/c/qrcode.js*/ /** * @fileoverview * - Using the 'QRCode for Javascript library' * - F...
  • H5界面通过js调android扫一扫功能,项目中自带H5代码,
  • 首先声明下本篇文章并没有彻底解决h5纯网页码问题,这里只是将我的研究过程,以及搜集到的有用资料记录下,以抛砖引玉,一来给后来人以参考,二来也为我以后继续研究做个记录,省的每次都从头开始研究。...
  • 步准备 (1)微信需要的公众服务号和商户号;沙箱有很多问题,所以本人以正式的配置实现,其中公众号需要配置授权路径 其中公众号需配置 商户号需到产品中心 -> 开发配置 -> 支付配置 ->添加JSAPI...
  • 调出摄像头,拍照保存到画布,定时传送到解析函数 ...解析函数是后台c# .net MVC 实现的,解析函数用到的二维码解析API依赖于第三方二维码库google zxing , 因此需要先引用类库:zxing.dll、zxing.presentation.dll
  • H5实现扫一扫

    万次阅读 2017-05-28 19:42:11
    H5实现扫一扫 在本案例主要利用H5自带的API navigator的getUserMedia方法获得摄像头,并通过createObjectURL将数据流复制给video标签的src。 Canvas标签只是图形容器,您必须使用脚本来绘制图形。此例中video标签...
  • 本经验是在微信中,用户点击支付直接跳转到浏览器中进行WAP支付,或者用码的形式变种成H5支付(因为支付宝的码付自身就带H5支付,可以通过截取代码演变)。下面就具体说一下操作方法把。          ...
  • 完美适应各平台(包括移动平台)的二维码插件,屏幕旋转自动适应,可以自定义码界面
  • 我们知道H5二维码页面链接跳转小程序可以登录微信公众平台,然后在开发设置里面进行配置,如下图: 我们配置规则http://a.aaa.com/a/b/,这时候需要在域名下创建a目录,b目录,然后在b目录下放入小程序校验文件,...
  • 浏览器扫码器 ,扫描二维码,浏览器调起二维码扫一扫功能,网页版扫一扫 https://download.csdn.net/download/qq_36992948/13188447
  • 二维码扫码问题

    2019-03-28 09:37:00
    昨天朋友问了个关于H5解析二维码的问题 研究了下,给出了两张方案 第种方案(后端解码实现) 项目用的MVC,下面上下代码 //前端主要个上传图片功能 //直接上后端解析代码 //File 图片路径 using ...
  • 类似于UC浏览器上面的扫一扫功能的实现?能获取二维码上面的信息!
  • H5实现扫一扫(二)

    万次阅读 2017-05-30 18:37:08
    H5实现扫一扫(二) 在我的上一篇博客中点击打开链接,提到ios系统不兼容问题,博主又找到了另一种调起摄像头的方法,对于手机类型、浏览器种类调起摄像头功能适应性比较好。   主要代码如下:(复制即可调起...
  • 以前写过篇设置微信二维码失效时间的博客,最近又要新增微信退款的功能,于是又重新整理了一下前面的微信二维码扫码支付功能,感觉整体的实现方式都能够掌控了,于是将具体的源码拿出来分享一下。 开发之前,一定...
  • 实例:js插件生成二维码手机扫一扫访问 日期:2017-04-15 范围:所有的前端界面 html代码:<script type="text/javascript" src="assets/js/qrcode.min.js"></script> ; float: left">
  • 二维码扫码跳转&页面重定向

    万次阅读 2018-04-28 10:25:42
    部分app对相关二维码可以定制一定的规范,比如用丰*App定制二维码,会打开对应微服务(H5)指定页面 url中的参数携带特殊符号需要encode加密处理。 踩过的坑 获取参数问题:微信码打开对应微服务时,以截取...
  • H5页面直接二维码插件 https://github.com/wkl007/vue-scan-demo
  • 通过个聚合二维码,支付宝码进入到生活号的首页,微信码进入微信公众号关注界面 思路: 判断用户使用的支付宝码还是微信码。这个比较容易,根据浏览器请求头里面的信息就可以识别 获取生活号和公众号首页...
  • 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全...我这边新建一个wechat.js用于调用扫一扫 var jweixin = require('@/components/app/jweixin'); // 我将下载的插件重命名为jweixin.js放在.
  • H5扫码特效,可以做二维码识别,银行卡识别,提交给接口
  • 用PHP+JS实现扫一扫,读取二维码内容,不用APP也能扫描二维码, 文档里已经设置好点击打开二维码图片,然后读取内容直接显示到文本框中,需要的可根据自己的需求直接修改。
  • uniapp扫码登录功能一、...3、 uniapp点击扫一扫 识别h5二维码的标识符 uid 把uid 和 用户名 密码 发给后端 4、后端将 uid 和账户和密码进行绑定 5、前端在扫码登录页面进行 轮询(轮询的时候 每隔几秒发送uid给后端)
  • 二维码扫描实例,h5调用手机端实现扫一扫功能,单独的一个html文件,必须运行到手机上,无其他js引用

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,916
精华内容 1,566
关键字:

h5二维码扫扫一扫