uni-app implements the H5 code scanning function of the app applet on the mobile phone

First of all, there are ready-made methods for the function of scanning codes, such as applets and apps, but H5 is not acceptable.
We can look at such a piece of code

<template>
  <view>
	<!-- #ifdef MP-WEIXIN -->
		<button @click="scan">扫描</button>
		<view v-if="result">{
   
   {result}}</view>
	<!-- #endif -->
	<!-- #ifdef APP-PLUS -->
		<button @click="scan">扫描</button>
		<view v-if="result">{
   
   {result}}</view>
	<!-- #endif -->
	<!-- #ifdef H5 -->
		<view>
			<web-view :src="'http://www.baidu.com'"></web-view>
		</view>
	<!-- #endif -->
  </view>
</template>

<script>
  export default {
      
      
    data() {
      
      
      return {
      
      
        result: ''
      }
    },
    methods: {
      
      
        scan() {
      
      
	        // #ifdef H5
		        uni.showModal({
      
      
			        title: '提示',
			        content: '抱歉H5界面暂不支持扫码功能',
					showCancel: false,
					confirmText: '确定'
		        });
	        // #endif
	        // #ifdef MP-WEIXIN
		        uni.scanCode({
      
      
		          success: (res) => {
      
      
		        	this.result = res.result;
		          }
		        });
	        // #endif
			// #ifdef APP-PLUS
			  uni.scanCode({
      
      
				success: (res) => {
      
      
				this.result = res.result;
				}
			  });
			// #endif
      }
    }
  }
</script>

Here we use conditional compilation.
The code in the app and the applet are the same. They can execute scanCode normally to scan codes.

As for the H5 mobile interface, I used the web-view to set a Baidu link in.
In fact, you can refer to my article
Vue realizes the QR code recognition function to read the content of the QR code,
make a Vue project online, and then use the web-view to set the link. Come in and change direction to complete the H5 code scanning

But

web-view can only be accessed on the mobile terminal.
If it is on the WEB PC terminal,

there is no way. Uni itself is to solve the problem on the mobile terminal. Don’t be perfectionist or think that I can write a set that can be used for everything, otherwise vue and react will be early. no one will use it