checksaosao(){
//兼容h5的扫码页面
/*#ifdef H5*/
uni.$u.route(`/pages/my/saoma`)
return;
/*#endif*/
uni.scanCode({
success: function (res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
let {
type,
uid,
} = JSON.parse(res.result);
console.log(type,uid);
if(type){
//扫码成功跳转输入金额页面
uni.$u.route(`/pages/my/amountEntered`, {
uid: uid,
type:type,
})
}else{
uni.$u.toast('未识别到二维码，请重新尝试！')
}
}
})
},saoma.vue 页面 （这个页面用兼容h5扫码的）
<template>
<view class="scan size">
<u-navbar title="扫码" :autoBack="true" bgColor="black"></u-navbar>
<view class="sectionview"><view id="qr-reader" style="width:100%;height:100%;"></view></view>
<view class="footer">
<view style="margin-top: 60rpx;" class="btn" @click="getCameras">扫码</view> </view>
<u-toast ref="uToast" />
</view>
</template>
<script>
export default {
data() {
return {
codeUrl: '',
cameraId: '',
};
},
mounted() {
this.current = this.$route.query.current || 0;
this.init();
},
beforeDestroy() {
this.stop();
},
methods: {
//返回结果
getCode(res) {
let {
type,
uid,
} = JSON.parse(res);
console.log(type,uid);
if(type){
uni.$u.route(`/pages/my/amountEntered`, {
uid: uid,
type:type,
})
}else{
uni.$u.toast('未识别到二维码，请重新尝试！')
}
},
init() {
this.AddJs('https://blog.minhazav.dev/assets/research/html5qrcode/html5-qrcode.min.js');
//需要加载时间建议延时一点再获取设备列表
setTimeout(() => {
this.getCameras();
}, 1000);
},
stop() {
this.html5QrCode
.stop()
.then(ignore => {
// QR Code scanning is stopped.
console.log('QR Code scanning stopped.');
})
.catch(err => {
// Stop failed, handle it.
console.log('Unable to stop scanning.');
});
},
start() {
this.html5QrCode = new Html5Qrcode('qr-reader');
this.html5QrCode
.start(
this.cameraId, // retreived in the previous step.
{
fps: 10, // sets the framerate to 10 frame per second
qrbox: 250 // sets only 250 X 250 region of viewfinder to
// scannable, rest shaded.
},
qrCodeMessage => {
// do something when code is read. For example:
if (qrCodeMessage) {
uni.$u.toast('扫码成功')
this.getCode(qrCodeMessage);
this.stop();
}
},
errorMessage => {
// parse error, ideally ignore it. For example:
// console.log(`QR Code no longer in front of camera.`);
}
)
.catch(err => {
// Start failed, handle it. For example,
console.log(`Unable to start scanning, error: ${err}`);
uni.$u.toast(`扫码失败:${err}`)
});
},
getCameras() {
console.log(Html5Qrcode.getCameras());
Html5Qrcode.getCameras()
.then(devices => {
/**
* devices would be an array of objects of type:
* { id: "id", label: "label" }
*/
if (devices && devices.length) {
if (devices.length > 1) {
this.cameraId = devices[1].id;
} else {
this.cameraId = devices[0].id;
}
console.log(this.cameraId, 'cameraId');
this.start();
}
})
.catch(err => {
console.log(err)
uni.$u.toast(`启用相机失败:${err}`)
});
},
//动态创建script的方法
AddJs(url) {
//console.log( 'url：',url);
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.type = 'text/javascript';
document.body.appendChild(script);
script.onload = () => {
resolve();
};
});
}
}
};
</script>
<style lang="less">
.scan {
width: 100%;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
.footer {
position: fixed;
bottom: 50rpx;
width: 100%;
display: flex;
justify-content: center;
}
}
.btn{
width: 460upx;
height: 80upx;
line-height: 80upx;
margin: 0 auto;
margin-top: 60upx;
border-radius: 40upx;
border: 0;
font-size: 32upx;
outline: 0;
background: linear-gradient(to right, #52DB93, #6B81F8, #C668F5) !important;
color: #FFFFFF;
text-align: center;
}
</style>
还有个二维码页面 receiptPayment.vue
<template>
<view class="main">
<!-- 收付款码 -->
<u-navbar title="收付款码" :autoBack="true"></u-navbar>
<!-- #ifdef APP-->
<view style="height: 80px;"></view>
<!-- #endif -->
<view class="yuanmao_tabs">
<u-tabs :current="defaultTab" class="tabs" :list="list1" @click="click" lineWidth="100rpx" activeStyle="color: white" itemStyle="width:25%;height:100rpx" ></u-tabs>
</view>
<view class="container flexColumn flexAiCenter w100p" v-if="selectTabValue==0">
<view class="flex flexJcCenter fs24 litit">付款码</view>
<view class="flex flexJcCenter fs24 litit">暂无付款码</view>
<!-- <view v-if="inviteLink2" class="qrcode">
<tki-qrcode
ref="qrcode"
:val="inviteLink2"
:size="400"
:showLoading="true"
:loadMake="true"
background="#FFF"
@result="qrR" />
</view> -->
<!-- <u--image :src="boardTempPath2" width="590rpx" height="850rpx" :fade="false" @load="onoff='1'"
bgColor="#111"></u--image> -->
<view class="" style="opacity: 0;z-index: -99;">
<l-painter style="display: none;" isCanvasToTempFilePath @success="canvasDone2($event)"
customStyle="border-radius:30rpx;width:295px;position:fixed;left:0%">
<l-painter-view css="width:400px;height:900rpx;background: #222222;border-radius:30rpx;">
<l-painter-view>
<l-painter-image src="/static/haibao.png"
css="width:700rpx;height:1100rpx;position:absolute;top:-170rpx;left:50rpx;right:0;">
</l-painter-image>
</l-painter-view>
<l-painter-qrcode :text="inviteLink2"
css="width:270rpx;height:300rpx;color:#fff;position:absolute;left:265rpx;top:350rpx;">
</l-painter-qrcode>
</l-painter-view>
</l-painter>
</view>
<view style="margin-top: 60rpx;" class="btn" @click="savecode(boardTempPath2)">保存二维码</view>
</view>
<view class="container flexColumn flexAiCenter w100p" v-if="selectTabValue==1">
<view class="flex flexJcCenter fs24 litit">收款码</view>
<view v-if="inviteLink1" class="qrcode">
<tki-qrcode
ref="qrcode"
:val="inviteLink1"
:size="400"
:lv="3"
:showLoading="true"
:loadMake="true"
background="#FFF"
@result="qrR1" />
</view>
<!-- <u--image :src="boardTempPath1" width="590rpx" height="850rpx" :fade="false" @load="onoff='1'"
bgColor="#111"></u--image> -->
<view class="" style="opacity: 0;z-index: -99;">
<l-painter isCanvasToTempFilePath @success="canvasDone1($event)"
customStyle="border-radius:30rpx;width:295px;position:fixed;left:0%">
<l-painter-view css="width:400px;height:900rpx;background: #fff;border-radius:30rpx;">
<l-painter-view>
<l-painter-image src="/static/haibao.png"
css="width:700rpx;height:1100rpx;position:absolute;top:-170rpx;left:50rpx;right:0;">
</l-painter-image>
</l-painter-view>
<l-painter-qrcode :text="inviteLink1"
css="width:270rpx;height:300rpx;color:#000;position:absolute;left:265rpx;top:350rpx;">
</l-painter-qrcode>
</l-painter-view>
</l-painter>
</view>
<view style="margin-top: 60rpx;" class="btn" @click="savecode(boardTempPath1)">保存二维码</view>
</view>
</view>
</template>
<script>
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
import config from '@/config.js'
export default {
components:{
tkiQrcode
},
data() {
return {
inviteLink1:'',
inviteLink2:'',
img1:'',
img2:'',
list1: [
// {
// name: '付款码',
// value: 0
// },
{
name: '收款码',
value: 1
}],
defaultTab: 0,
selectTabValue: 1,
boardTempPath1: '',
boardTempPath2: '',
}
},
onLoad() {
this.loadSeries();
},
onShow(){
// this.loadSeries();
},
mounted() {
// this.loadSeries();
// setInterval(_ => {
// this.loadSeries();
// }, 30e3)
},
methods: {
canvasDone1(e) {
console.log(e,'-------------------------')
this.boardTempPath1 = e;
// this.loadSeries()
},
canvasDone2(e) {
console.log(e)
this.boardTempPath2 = e;
// this.loadSeries()
},
loadSeries() {
//type 1-收款码；2-付款码
this.$axios.post('/payment/getLink',{type:1}).then(data => {
console.log(data)
// 绑定银行卡
if(data.code==100){
uni.showModal({
title:"提示",
content:"您未绑定银行卡,是否前往绑定？",
success:(res)=>{
if (res.confirm) {
console.log('用户点击确定');
uni.navigateTo({
url: '/pages/my/bindCard'
})
} else if (res.cancel) {
console.log('用户点击取消');
uni.switchTab({
url: '/pages/index/index-new'
})
}
}
})
}
data.data.type=1;
this.inviteLink1 = JSON.stringify(data.data);
console.log(this.inviteLink1)
})
this.$axios.post('/payment/getLink',{type:2}).then(data => {
// 绑定银行卡
if(data.code==100){
uni.showModal({
title:"提示",
content:"您未绑定银行卡,是否前往绑定？",
success:(res)=>{
if (res.confirm) {
console.log('用户点击确定');
uni.navigateTo({
url: '/pages/my/bindCard'
})
} else if (res.cancel) {
console.log('用户点击取消');
uni.switchTab({
url: '/pages/index/index-new'
})
}
}
})
}
data.data.type=2;
this.inviteLink2 = JSON.stringify(data.data);
console.log(this.inviteLink2)
})
setTimeout(_=>{
this.loadSeries
},30e3)
},
copy(){
//#ifdef H5
//#endif
},
qrR(e){
// console.log(e,'二维码')
this.img1=e;
},
qrR1(e){
// console.log(e,'二维码')
this.img2=e;
},
click(item) {
console.log('item', item.value);
if (this.selectTabValue != item.value)this.selectTabValue = item.value;
},
//保存图片到相册
savecode(path){
console.log(`savecode`,path)
//#ifdef H5
uni.$u.toast(`长按二维码保存`)
//#endif
//#ifdef APP-PLUS
uni.saveImageToPhotosAlbum({
filePath:path,
success() {
uni.$u.toast(`保存成功`)
}
})
//#endif
},
}
}
</script>
<style lang="scss" scoped>
page {
padding: 60px 10px;
.container {
width: 90%;
margin: 70rpx auto;
background: #222222;
border-radius: 20rpx;
padding: 20rpx 0rpx 80rpx 0rpx;
.qrcode{
margin-top: 0px;
padding: 10px;
background-color: white;
}
.litit{
margin: 30rpx 0;
}
.btn{
width: 260upx;
height: 60upx;
line-height: 60upx;
margin: 0 auto;
margin-top: 60upx;
border-radius: 40upx;
border: 0;
font-size: 26upx;
outline: 0;
background: linear-gradient(to right, #52DB93, #6B81F8, #C668F5) !important;
color: #FFFFFF;
text-align: center;
}
}
}
.yuanmao_tabs .u-tabs__wrapper__nav__line {
background: linear-gradient(to right, #52DB93, #6B81F8, #C668F5) !important;
}
</style>
h5 兼容扫码用htm-qrcode的
通过扫码获取到 uid:, type2个字段在传给后端，注意扫码哪个二维码加个白色边距，不然可能会扫码不了文章来源：https://www.toymoban.com/news/detail-774509.html
，这个我是h5游览器展示的，实际手机的h5可以扫码的，app端用uniapp的那个官方api的那个文章来源地址https://www.toymoban.com/news/detail-774509.html
到了这里，关于uniapp扫码功能兼容h5的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
