HBuilderX wap2app 5+app扫码功能页面的实现调摄像头扫二维码

DCloud HBuilderX wap2app 5+app扫码功能页面的实现，html页面，跳到这个页面即可扫码，扫了以后再带参数返回想要返回的页面。<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="maximum

QQ4770851

1661人浏览 · 2021-07-22 12:00:40

QQ4770851 · 2021-07-22 12:00:40 发布

DCloud HBuilderX wap2app 5+app扫码功能页面的实现，html页面，跳到这个页面即可扫码，扫了以后再带参数返回想要返回的页面。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,initial-scale=1.0" />
		<title>扫二维码</title>
		<link rel="stylesheet" href="assets/index.css">
		<style>
			.bg {
				background-color: #eee
			}

			.fr {
				float: right;
			}

			.gray {
				color: #888;
			}

			.mxje {
				font-size: 14px;
				color: #ff4960;
				line-height: 35px;
				float: right;
			}

			.van-nav-bar {
				background-image: linear-gradient(to right, #2d76ff, #2abaff);
			}

			.van-nav-bar__title,
			.van-nav-bar .van-icon {
				color: #fff;
			}

			.van-cell .van-button {
				float: right
			}

			.block {
				overflow: auto;
				zoom: 1;
				text-align: center
			}

			.tico {
				margin: 0 2px 0 0;
				top: 2px;
			}

			.errmsg {
				color: #ee0a24
			}
		</style>
		<script src="assets/vue.min.js"></script>
		<script src="assets/vant.min.js"></script>
		<script src="assets/axios.min.js"></script>
		<script src="assets/main.js"></script>
	</head>
	<body>
		<div id="app">
<script>
	/*document.addEventListener('plusready', function() {
		var barcode = null;

		// 扫码成功回调
		function 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;
			}
			alert(text + result);

		}

		// 创建Barcode扫码控件
		function createBarcode() {
			if (!barcode) {

				// plus.navigator.setFullscreen(true); //全屏
				barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
					top: '0px',
					left: '0px',
					width: '100%',
					height: '100%',
					position: 'static'
				});
				barcode.onmarked = onmarked;
				plus.webview.currentWebview().append(barcode);
			}
			barcode.start();
		}

		createBarcode();
	});*/

	var barcode = null;
	var app = new Vue({
				el: '#app',
				data: {
					name: '自定义', //要在扫码界面自定义的内容
					flash: false, //是否打开摄像头
					type: '',
				},
				mounted() {
					document.addEventListener('plusready', ()=>{
						this.onLoad();
						// console.log('44');
					});
				},
				methods: {
					onLoad() {
						var n = "扫描二维码";
						this.type = "scan-listener";
						if (n) {
							this.name = n;
						}
						// var pages = getCurrentPages();
						// var page = pages[pages.length - 1];
						// #ifdef APP-PLUS
						// plus.navigator.setFullscreen(true); //全屏
						var currentWebview = plus.webview.currentWebview();
						this.createBarcode(currentWebview); //创建二维码窗口

						this.createView(currentWebview); //创建操作按钮及tips界面

						// #endif
					},
					// 扫码成功回调
					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;
							case plus.barcode.CODE39:
								text = 'CODE39: ';
								break;
						}
						// plus.navigator.setFullscreen(false);

						//这是登录时扫码获取税号
						if(getQueryString('ref')=='login'){
							this.getContent(result);
						}else if(getQueryString('ref')=='write_off'){ //核销扫码
							this.getWriteOffCode(result);
						}else if(getQueryString('ref')=='voice_box'){ //绑定扫码
							var strs=result.split(",");
							window.location.href="voice_box.html?sn="+strs[0];
						}

						barcode.close();
					},
					// 创建二维码窗口
					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();
					},
					getContent(url){
						vant.Toast.loading({
							duration: 0,
							message: '加载中...',
							forbidClick: true,
							loadingType: 'spinner',
						});
						let self=this;
						axios({
							method:'post',
							url:'/api/getData',
							data:{
								'url':url,
							}
						}).then(function(res){
							vant.Toast.clear();
							vant.Toast({message:res.data.msg,closeOnClick:true});
							if (res.data.code==1) {
								window.location.href="login.html?no="+res.data.data;
								/*if (!plus.webview.getWebviewById('login')){
									plus.webview.create("login.html?taxno="+res.data.data,"login");
								}
								setTimeout(()=> {
									 plus.webview.show("login");
								},500);*/
							}else{
								vant.Toast({message:res.data.msg,closeOnClick:true});
							}

						});
					},
					getWriteOffCode(sn){
						window.location.href="write_off.html?sn="+sn;

					},
					// 创建操作按钮及tips
					createView(currentWebview) {
						// 创建返回原生按钮
						var backVew = new plus.nativeObj.View('backVew', {
								top: '13px',
								left: '0px',
								height: '40px',
								width: '100%'
							},
							[{
								tag: 'img',
								id: 'backBar',
								src: 'assets/img/left.png',
								position: {
									top: '15px',
									left: '3px',
									width: '25px',
									height: '25px'
								}
							}]);
						// 创建打开手电筒的按钮
						var scanBarVew = new plus.nativeObj.View('scanBarVew', {
								top: '55%',
								left: '40%',
								height: '10%',
								width: '20%'
							},
							[{
									tag: 'img',
									id: 'scanBar',
									src: 'assets/img/sdt.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: '13px',
								left: '0px',
								height: '100%',
								width: '100%'
							},
							[/*{
									tag: 'font',
									id: 'scanTitle',
									text: '扫码',
									textStyles: {
										size: '18px',
										color: '#ffffff'
									},
									position: {
										top: '13px',
										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) { //返回按钮
							plus.webview.close('scanPage');
							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: 'assets/img/sdt.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: 'assets/img/sdt.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();
					plus.navigator.setFullscreen(false);
					// #endif
				},
				onUnload() {
					plus.navigator.setFullscreen(false);
				}
			});
</script>
		</div>
	</body>
</html>