uniapp implements H5 code scanning function

Call the camera and combine qrcode.js to parse the QR code to realize
the qrcode.js source code link

<!-- html部分(简单的icon图标) -->
<template>
		<view class="">
			<u-icon name="scan" size="100" @click="scanCode()"></u-icon>
		</view>

</template>
<script>
    // 引入qrcode.js (必须导出qrcode.js )
	var qrcode = require('../../static/js/qrcode.js');
	export default {
    
    
		data() {
    
    
			return {
    
    
			}
		},
		onLoad() {
    
    
		// 打印qrcode 查看是否引入成功
			console.log(qrcode)
		},
		methods: {
    
    
			scanCode() {
    
    
				let that = this
				// 调用uni提供的调用相机api
				uni.chooseImage({
    
    
					sizeType: ['original'],
					count: 1,
					success: function(res) {
    
    
						const tempFilePaths = res.tempFilePaths[0] // 获取到二维码图片的链接
						qrcode.decode(tempFilePaths); // 解析二维码图片
						qrcode.callback = function(res1) {
    
    
						   // 解析失败返回 error decoding QR Code
							if (res1 == "error decoding QR Code") {
    
    
								uni.showToast({
    
    
									title: "识别二维码失败,请重新上传!",
									duration: 2000,
									icon: 'none'
								})
							} else {
    
    
							// 解析成功返回二维码链接
								console.log(res1)
							}
						}
					}
				});
			},
		}
	}
</script>

Note: The file needs to be exported under qrcode.js

// qrcode.js文件
				case o:
					var m = this.getKanjiString(g);
					h.push(m);
					break
			}
		} while (true);
		return h
	})
};
module.exports = qrcode

Guess you like

Origin blog.csdn.net/z_jing0927/article/details/120672220