checksaosao(){
?? ? ? ? //兼容h5的掃碼頁面
/*#ifdef H5*/
uni.$u.route(`/pages/my/saoma`)
return;
/*#endif*/
uni.scanCode({
success: function (res) {
console.log('條碼類型：' + res.scanType);
console.log('條碼內(nèi)容：' + res.result);
let {
type,
uid,
} = JSON.parse(res.result);
console.log(type,uid);
if(type){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//掃碼成功跳轉(zhuǎn)輸入金額頁面
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: {
//返回結(jié)果
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');
//需要加載時間建議延時一點(diǎn)再獲取設(shè)備列表
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(`啟用相機(jī)失敗:${err}`)
});
},
//動態(tài)創(chuàng)建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('用戶點(diǎn)擊確定');
uni.navigateTo({
url: '/pages/my/bindCard'
})
} else if (res.cancel) {
console.log('用戶點(diǎn)擊取消');
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('用戶點(diǎn)擊確定');
uni.navigateTo({
url: '/pages/my/bindCard'
})
} else if (res.cancel) {
console.log('用戶點(diǎn)擊取消');
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個字段在傳給后端，注意掃碼哪個二維碼加個白色邊距，不然可能會掃碼不了文章來源：http://www.zghlxwxcb.cn/news/detail-774509.html
，這個我是h5游覽器展示的，實(shí)際手機(jī)的h5可以掃碼的，app端用uniapp的那個官方api的那個文章來源地址http://www.zghlxwxcb.cn/news/detail-774509.html
到了這里，關(guān)于uniapp掃碼功能兼容h5的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
