uni-app实现 app 小程序 手机端H5扫码功能

首先 扫码这个功能小程序和App都是有现成的方法 但是H5是不行的
我们可以看这样一段代码

<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>

这里 我们用了条件编译
App和小程序中的代码是 一样的 他们都可以正常执行scanCode进行扫码

至于H5手机端界面 我用web-view套了个百度的链接进来
其实 大家可以参考我的文章
vue实现二维码识别功能 读取二维码内容
做一个vue项目上线 然后用web-view将链接套进来 变向完成H5的扫码

但是

web-view是只有手机端能支持访问的
如果是WEB PC端

那就没办法了 uni本身也就是解决手机端问题 还是不要做完美主义 或者想我写一套什么都能用 不然vue和react早就没人用了文章来源地址https://www.toymoban.com/news/detail-677685.html

到了这里，关于uni-app实现 app 小程序 手机端H5扫码功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！