自定义扫码_zxing 自定义扫码界面 - CSDN
精华内容
参与话题
  • 微信小程序自定义扫码功能界面

    千次阅读 2020-03-19 11:35:08
    小程序的一个扫码页面,扫码界面一直开着,同时可以处理其他功能,如下: 由于直接调用微信的scanCode,无法自定义界面,所以只能使用原生组件camera,完成这个功能,关于扫描框的四个角的图片,就自己画一下吧,...

    小程序的一个扫码页面,扫码界面一直开着,同时可以处理其他功能,如下:

    由于直接调用微信的scanCode,无法自定义界面,所以只能使用原生组件camera,完成这个功能,关于扫描框的四个角的图片,就自己画一下吧,中间的移动横线,使用了小程序的动画功能,在原生camera组件上,覆盖需要用到cover-view和cover-image,同时加入了提示音
     

    /**scan.wxss**/
    .scan-view {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: #B9BEC4;
      position: fixed;
      align-items: center;
      justify-content: space-around;
    }
    
    .scan-border {
      width: 94%;
      height: 94%;
      border: 6rpx solid #08FDFE;
      border-radius: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .scan-camera {
      width: 500rpx;
      height: 500rpx;
      border-radius: 6rpx;
      margin: 30rpx;
    }
    
    .cover-corner {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
    }
    
    .cover-left-top {
      left: 0;
      top: 0;
    }
    
    .cover-right-top {
      right: 0;
      top: 0;
    }
    
    .cover-left-bottom {
      left: 0;
      bottom: 0;
    }
    
    .cover-right-bottom {
      right: 0;
      bottom: 0;
    }
    
    .scan-animation {
      position: absolute;
      top: -10rpx;
      left: 10rpx;
      width: 480rpx;
      height: 8rpx;
      background-color: #08FDFE;
      border-radius: 50%;
    }
    
    <!--scan.wxml-->
    <view class="scan-view">
      <view class='scan-border'>
        
        <camera class='scan-camera' mode="scanCode" binderror="cameraError" bindscancode='scancode' frame-size='large'>
          <cover-image class='cover-corner cover-left-top' src='/images/left-top.png'></cover-image>
          <cover-image class='cover-corner cover-right-top' src='/images/right-top.png'></cover-image>
          <cover-image class='cover-corner cover-left-bottom' src='/images/left-bottom.png'></cover-image>
          <cover-image class='cover-corner cover-right-bottom' src='/images/right-bottom.png'></cover-image>
          
          <cover-view class='scan-animation' animation="{{animation}}"></cover-view>
        </camera>
        <!-- 这里可以处理其他内容 -->
      </view>
    </view>
    
    
    // scan.js
    // 移动动画
    let animation = wx.createAnimation({});
    // 提示音
    let innerAudioContext = wx.createInnerAudioContext()
    innerAudioContext.src = '/images/beep.mp3'
    
    Page({
      data: {
        
      },
      onLoad: function () {
        
      },
      onShow(){
        this.donghua()
      },
      donghua(){
        var that = this;
    	// 控制向上还是向下移动
        let m = true
    	
        setInterval(function () {
          if (m) {
            animation.translateY(250).step({ duration: 3000 })
            m = !m;
          } else {
            animation.translateY(-10).step({ duration: 3000 })
            m = !m;
          }
    
          that.setData({
            animation: animation.export()
          })
        }.bind(this), 3000)
      },
      scancode(e){
        // 提示音
        innerAudioContext.play()
        // 校验扫描结果,并处理
        let res = e.detail.result
      }
    })

     

    展开全文
  • 修改cordova的BarcodeScan插件的扫码界面,替换掉插件引入的第三方库libs文件夹下的com.google.zxing.client.android.captureactivity.jar文件的zxing_4.1.8.jar文件,达到美化扫码界面目的。
  • 最近有个需求,小程序的一个扫码页面,扫码界面一直开着,同时可以处理其他功能,如下: 由于直接调用微信的scanCode,无法自定义界面,所以只能使用原生组件camera,完成这个功能,关于扫描框的四个角的图片,就...

    最近有个需求,小程序的一个扫码页面,扫码界面一直开着,同时可以处理其他功能,如下:
    在这里插入图片描述
    在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述
    由于直接调用微信的scanCode,无法自定义界面,所以只能使用原生组件camera,完成这个功能,关于扫描框的四个角的图片,就自己画一下吧,中间的移动横线,使用了小程序的动画功能,在原生camera组件上,覆盖需要用到cover-view和cover-image,同时加入了提示音

    scan.wxss

    /**scan.wxss**/
    .scan-view {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: #B9BEC4;
      position: fixed;
      align-items: center;
      justify-content: space-around;
    }
    
    .scan-border {
      width: 94%;
      height: 94%;
      border: 6rpx solid #08FDFE;
      border-radius: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .scan-camera {
      width: 500rpx;
      height: 500rpx;
      border-radius: 6rpx;
      margin: 30rpx;
    }
    
    .cover-corner {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
    }
    
    .cover-left-top {
      left: 0;
      top: 0;
    }
    
    .cover-right-top {
      right: 0;
      top: 0;
    }
    
    .cover-left-bottom {
      left: 0;
      bottom: 0;
    }
    
    .cover-right-bottom {
      right: 0;
      bottom: 0;
    }
    
    .scan-animation {
      position: absolute;
      top: -10rpx;
      left: 10rpx;
      width: 480rpx;
      height: 8rpx;
      background-color: #08FDFE;
      border-radius: 50%;
    }
    

    scan.wxml

    <!--scan.wxml-->
    <view class="scan-view">
      <view class='scan-border'>
        
        <camera class='scan-camera' mode="scanCode" binderror="cameraError" bindscancode='scancode' frame-size='large'>
          <cover-image class='cover-corner cover-left-top' src='/images/left-top.png'></cover-image>
          <cover-image class='cover-corner cover-right-top' src='/images/right-top.png'></cover-image>
          <cover-image class='cover-corner cover-left-bottom' src='/images/left-bottom.png'></cover-image>
          <cover-image class='cover-corner cover-right-bottom' src='/images/right-bottom.png'></cover-image>
          
          <cover-view class='scan-animation' animation="{{animation}}"></cover-view>
        </camera>
        <!-- 这里可以处理其他内容 -->
      </view>
    </view>
    
    

    scan.js

    // scan.js
    // 移动动画
    let animation = wx.createAnimation({});
    // 提示音
    let innerAudioContext = wx.createInnerAudioContext()
    innerAudioContext.src = '/images/beep.mp3'
    
    Page({
      data: {
        
      },
      onLoad: function () {
        
      },
      onShow(){
        this.donghua()
      },
      donghua(){
        var that = this;
    	// 控制向上还是向下移动
        let m = true
    	
        setInterval(function () {
          if (m) {
            animation.translateY(250).step({ duration: 3000 })
            m = !m;
          } else {
            animation.translateY(-10).step({ duration: 3000 })
            m = !m;
          }
    
          that.setData({
            animation: animation.export()
          })
        }.bind(this), 3000)
      },
      scancode(e){
        // 提示音
        innerAudioContext.play()
        // 校验扫描结果,并处理
        let res = e.detail.result
      }
    })
    
    
    展开全文
  • uni-app ,实现自定义扫码(plus.barCode),解决低版本安卓设备首屏加载黑屏,提升优化加载速度 支持扫码二维码,一维码,文章下方有GitHub完整案例代码 看看效果图先 可以打开设备摄像头,扫码速度,扫一扫速度...

    uni-app ,实现自定义扫码(plus.barCode),解决低版本安卓设备首屏加载黑屏,提升优化加载速度

    支持扫码二维码,一维码,文章下方有GitHub完整案例代码

    看看效果图先

    可以打开设备摄像头,扫码速度,扫一扫速度极快,非全屏扫码可以自定义 高度值 

    GitHub有完整案例在此

    看看实现的扫码的核心代码吧

    <template>
    </template>
    <script>
    	var barcode = null;
    	export default {
    		data() {
    			return {
    				name: '', //要在扫码界面自定义的内容
    				flash: false, //是否打开摄像头
    				type: ''
    
    			};
    		},
    		onLoad(d) {
    			var n = d.text;
    			this.type = d.type;
    			console.log(this.type,'type');
    			// if (n) {
    			// 	this.name = n;
    			// }
    			var pages = getCurrentPages();
    			var page = pages[pages.length - 1];
    			// #ifdef APP-PLUS
    			plus.navigator.setFullscreen(true); //全屏
    			var currentWebview = page.$getAppWebview();
    			this.createBarcode(currentWebview); //创建二维码窗口
    			this.createView(currentWebview); //创建操作按钮及tips界面
    			// #endif
    		},
    		
    		methods: {
    			// 扫码成功回调
    			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);
    				
    				
    				//兄弟传参
    				// this.$eventHub.$emit(this.type, {
    				// 	result: result
    				// });				
    				
    				uni.$emit(this.type, {
    					result: result
    				})
    				console.log(this.type,result,'this.type');
    				uni.navigateBack({
    					delta: 1
    				});
    				barcode.close();
    			},
    			// 创建二维码窗口
    			createBarcode(currentWebview) {
    				//自定义窗口大小
    				//条码类型常量数组,默认情况支持QR、EAN13、EAN8类型。 通过此参数可设置扫码识别支持的条码类型(注意:设置支持的条码类型越多,扫描识别速度可能将会降低)
    				barcode = plus.barcode.create('barcode', [plus.barcode.QR, plus.barcode.EAN13,plus.barcode.EAN8], {
    					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();
    			},
    			// 创建操作按钮及tips
    			createView(currentWebview) {
    				// 创建返回原生按钮
    				var backVew = new plus.nativeObj.View('backVew', {
    						top: '0px',
    						left: '0px',
    						height: '40px',
    						width: '100%'
    					},
    					[{
    						tag: 'img',
    						id: 'backBar',
    						src: 'static/images/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/images/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/images/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/images/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)
    
    			}
    		},
    		onBackPress() {
    			// #ifdef APP-PLUS
    			// 返回时退出全屏
    			barcode.close();
    			console.log("onBackPress");
    			plus.navigator.setFullscreen(false);
    			// #endif
    		},
    		onUnload() {
    			
    			console.log("onUnload");
    			plus.navigator.setFullscreen(false);
    		}
    
    
    	};
    </script>
    
    <style scoped>
    </style>
    

    支持付费解答,各种小程序,混合app,h5,网站都可接单,外包也可

    知识无底,学海无涯,创作不易,喜欢给点个赞吧~

    当然请我喝杯奶茶我也不介意啦~

     

     

     

     

    展开全文
  • 资源在github的0420中 添加流程: gradle中添加依赖: //ZXingcompile 'com.google.zxing:core:3.3.0' ... 复制资源文件:(包括raw中的beep.ogg(声音),value中的attrs,ids.xml,string,color等) ...

    资源在github的0420中
    添加流程:

    1. gradle中添加依赖:

    //ZXing
    compile 'com.google.zxing:core:3.3.0'

    1. 将包com.google.zxing复制到自己项目的路劲中。
    2. 复制资源文件:(包括raw中的beep.ogg(声音),value中的attrs,ids.xml,string,color等)
    3. 在mainfeast中注册activity并添加相机权限:

    <activity android:name="com.google.zxing.activity.CaptureActivity" android:theme="@style/Theme.AppCompat.DayNight.NoActionBar"/> <uses-permission android:name="android.permission.VIBRATE" /> <!-- 震动权限 --> <uses-permission android:name="android.permission.CAMERA" /> <uses-feature android:name="android.hardware.camera" /> <!-- 使用照相机权限 --> <uses-feature android:name="android.hardware.camera.autofocus" /> <!-- 自动聚焦权限 -->

     

    1. 代码中使用:

    调用时:

    Intent intent = new Intent(MainActivity.this, CaptureActivity.class);
    startActivityForResult(intent, REQUEST_CODE);

     

    Activity中的回调:

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (resultCode == RESULT_OK) { //RESULT_OK = -1
            Bundle bundle = data.getExtras();
            String scanResult = bundle.getString("qr_scan_result");
            Toast.makeText(MainActivity.this, scanResult, Toast.LENGTH_LONG).show();
        }
    }

     

    如果想要更改扫描框的UI,可以进行如下设置:

    在CameraManager中的getFramingRect中设置:

    其中:

    //修改之后
    int width = screenResolution.x * 7 / 10;  //设置扫描区域占屏幕的区域,分子越大区域越大
    int height = screenResolution.y * 7 / 10;

    在其中:

    int leftOffset = (screenResolution.x - width) / 2;      //设置扫描框距离左边的位置
    int topOffset = (screenResolution.y - height) / 4;

     

    代码实例:https://github.com/766464365/0420

    展开全文
  • 重点 测试版本不需要发布也可以进行测试 测试阶段不发布,只能扫描测试链接中的地址中的二维码,其他的就算符合规范也不可以 如果是要动态匹配参数,那么动态部分必定是/后面的字符串 如果是要动态匹配参数,那么...
  • 自定义微信登录扫码样式解决办法

    万次阅读 热门讨论 2017-08-12 10:54:36
    PC微信扫码登录近期做一个PC端微信扫码登录的需求,微信扫码有两种方式,一种是新开一个二维码页面,另一种是内嵌入产品网页。本次以内嵌二维码为例,具体怎样在页面中显示一个登陆二维码,文档说的很清楚,就不赘述...
  • 在上篇文章实现微信扫码获取带指定参数时,微信公众号后台启用了服务器配置,导致之前设置好的微信自定义菜单失效。 开启了服务器配置,就无法用之前的方式在微信公众平台配置自定义菜单 此时,我们要通过接口来...
  • uni-app 自定义扫码界面

    千次阅读 2019-08-09 03:18:37
    在实际开发中,平台提供的默认扫码界面,并不能满足一些自定义的需求。例如: 非全屏显示 扫码界面文字国际化 扫码框的颜色调整 微信小程序等小程序平台,可以通过 <camera> 组件来实现部分自定义的需求。...
  • Android--自定义扫码功能,调用ZXing3.1

    千次阅读 2016-08-29 08:51:44
    ZXing3.1的使用(限制最低版本19,即android4.4) 参考资料:http://blog.csdn.net/eclipsexys/article/details/47834865(我没看文章,直接下的源码自己边运行边分析的) ...新建一个将zxin
  • 网站接入微信二维码登录 (nodejs)

    万次阅读 2018-02-09 12:04:33
    自定义样式(内嵌入二维码) 如果需要对二维码的样式进行自定义,则需要在实例化WxLogin 对象时传入自定义的外部css链接,注意这个href 需要 https 链接。 具体步骤 步骤1:在页面中先引入如下JS文件(支持...
  • 自定义ZXing扫码框样式

    千次阅读 2017-12-28 16:47:05
    新接手的项目里面使用了ZXing扫码框架,使用的库为zxing-android-embedded. 接到需求要求修改扫码框样式,如图: 主要有3个问题: 1.修改扫码框之外的样式. 2.动态改变扫码框大小 3.修改扫码框样式,给四周...
  • 微信开放平台网页扫码登录,把相关JS放去进去后,,发现模式的二维码宽度是280px的,对我来说太宽了, 按照官方的说法, 自定义一个样式,把网址填入href里就行了,如下这样:  var obj = new WxLogin({  ...
  • 本文介绍微信支付下的扫描二维码并输入自定义金额的支付的开发过程。 注意 微信支付现在分为v2版和v3版,2014年9月10号之前申请的为v2版,之后申请的为v3版。V3版的微信支付没有paySignKey参数。v2的相关介绍请...
  • 笔者之前对微信上的开发也是一窍不通,一顿浑水摸鱼后大概明白了,网页上可以弄个按钮,点击下就调用,然而并不是随便让你调用的,这个严格来说叫做微信提供的jssdkapi,是他提供的接口,那么就得遵循他...
  • 内嵌式js微信扫码登录及自定义样式

    千次阅读 2018-07-28 22:02:18
    关于微信扫码登录网站的功能介绍,请阅读官方文档【网站应用微信登录开发指南】 根据官方文档我们知道微信扫码登录有两种方式 一种是跳转到一个大黑屏二维码界面进行扫码登录: (参见博客:PHP实现跳转式微信...
  • 二维码框架Zxing的使用及自定义

    万次阅读 多人点赞 2018-07-01 22:59:05
    项目需要一个二维码扫描功能 关于二维码的扫描,我之前就听说过ZXing了(虽然从来没用过) ...否则你就无法自定义ZXing,并且你还会遇到某些问题——比如二维码扫描图片是横屏的。 幸运的是这些问题我都...
  • 第三方ZXing库zxing-android-embedded使用及自定义

    万次阅读 热门讨论 2017-09-08 09:55:06
    一、关于ZXing现在一维码二维码在我们的日常生活中使用如此的广泛,所以拥有扫码功能的APP变得非常普遍,一个安卓APP需要扫码功能就要用到zxing了,zxing是谷歌开源的让开发者更方便使用摄像头的库,而我们常用的...
  • h5打开手机扫码功能

    万次阅读 2016-03-03 15:29:21
    1.解决的问题: ...1.能够在微博客户端呼起摄像头...web端或者是 h5端可以直接完成扫码的工作; 3.缺点: 图片不清晰很容易解析失败(拍照扫描图片需要镜头离二维码的距离很近),相对于 native 呼起的摄
  • spring boot 扫码自定义配置

    千次阅读 2020-05-02 15:54:08
    org.springframework.boot.autoconfigure.EnableAutoConfiguration=\ org.springframework.context.ApplicationListener=\ org.springframework.boot.env.EnvironmentPostProcessor=\
1 2 3 4 5 ... 20
收藏数 18,128
精华内容 7,251
关键字:

自定义扫码