首先 扫码这个功能小程序和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早就没人用了