uni扫码功能,兼容小程序,app,h5

项目场景：

配合后端管理系统的工单二维码,在手机上快速的查找工单

---

非h5的扫码功能

可以直接使用uniapp的API uni.scanCode(OBJECT)

// 允许从相机和相册扫码
uni.scanCode({
	success: function (res) {
		console.log('条码类型：' + res.scanType);
		console.log('条码内容：' + res.result);
		
	}
});

h5的扫码功能

用的是vue-qrcode-reader文档地址

vue2

因为最新版本不支持vue2,只支持vue3
注意只在h5的时候进行引用注册和使用

npm install --save vue-qrcode-reader@2.3.18

<!-- #ifdef H5 -->
<view class="reader-box" v-if="showCode" >
	<QrcodeStream @detect="onDetect">
		<view class="reader"></view>
		</QrcodeStream>
</view>
<!-- #endif -->

// #ifdef H5
import {QrcodeStream} from 'vue-qrcode-reader';
// #endif
components: {
   // #ifdef H5
    QrcodeStream
    // #endif
},
methods: { 
  onDetect(detectedCodes){
   //回调返回一个Promise
   detectedCodes.then(res=>{
       //res.content就是获取的内容
        if (res.content) {
       
      })
  }
}
<style>
.reader-box {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
    z-index: 100;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.reader {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 100%;
	}

</style>