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