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

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

<template>  <view><button @click="scan">扫描button><view v-if="result">{{result}}view><button @click="scan">扫描button><view v-if="result">{{result}}view><view><web-view :src="'http://www.baidu.com'">web-view>view>  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://blog.csdn.net/weixin_45966674/article/details/130945631