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

最新推荐文章于 2024-01-17 18:22:35 发布

原创

最新推荐文章于 2024-01-17 18:22:35 发布 · 2.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#js

这是一个使用DCloud HBuilderX实现的wap2app扫码功能页面，通过HTML、JS和CSS代码展示了如何创建并启动扫码控件，以及扫码成功后的回调处理。页面可以自定义返回内容，并根据不同的参数执行不同的操作，如登录、核销等。此外，还实现了手电筒开关功能。

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: ';