以下是使用 weapp-qrcode-canvas-2d 库的二维码组件代码, IOS测试了两个设备,苹果15pro 和 苹果14pro 都是白屏,麻烦大佬给看下原因,感谢🙏
// 版本号
"@tarojs/taro": "3.6.29",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"weapp-qrcode-canvas-2d": "^1.1.4"
// node 版本
"node": "v18.16.0"
// 这是Taro下的关于二维码的代码片段
import { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import drawQrcode from 'weapp-qrcode-canvas-2d'
import { View, Text, Canvas, Button, Image } from '@tarojs/components'
import './style.scss';
// 倒计时
let intervalId;
export default ({
value = '',
countInit = 60,
onUpdate = () => { },
onClick = () => { },
style = {},
className = '',
}: any) => {
// 倒计时每秒记录
const [count, setCount] = useState(countInit);
// 倒计时每秒记录
const [tempImgPath, setTempImgPath] = useState('');
// 绘制二维码,并启动倒计时
const initQRCode = () => {
const query = Taro.createSelectorQuery().select('#myQrcode')
query.fields({ node: true, size: true }).exec((res) => {
const canvas = res[0].node;
const drawOptios = {
canvas: canvas,
canvasId: 'myQrcode',
width: 260,
padding: 30,
background: '#ffffff',
foreground: '#000000',
text: value,
}
// 首次生成二维码
drawQrcode(drawOptios);
setTimeout(() => {
const imgInfo = {
canvas: canvas,
canvasId: 'myQrcode',
x: 0,
y: 0,
width: 300,
height: 300,
destWidth: 300,
destHeight: 300,
success: (res) => {
setTempImgPath(res.tempFilePath)
},
}
// 生成临时图片
Taro.canvasToTempFilePath(imgInfo);
}, 1000)
countdown(countInit, () => {
// 倒计时结束,销毁二维码
})
})
}
// 倒计时函数
const countdown = (seconds, callback) => {
let timer = seconds;
// 计时前清除定时器
clearInterval(intervalId);
setCount(countInit);
// 计时开始
intervalId = setInterval(() => {
timer--;
setCount(timer);
if (timer <= 0) {
clearInterval(intervalId);
callback();
}
}, 1000);
}
// 监听二维码内容,内容变动,重新生成二维码
useEffect(() => {
initQRCode();
}, [value])
return (<View className={`qr-code-wrap ${className}`} style={style}>
<View className={`qr-code-node`} onClick={onClick}>
{/* 二维码 */}
<Canvas type="2d" className='myQrcode' id="myQrcode" style={{ display: 'none' }}>
您的设备不支持Canvas画布
</Canvas>
<Image src={tempImgPath} className={`myQrcode ${count < 1 && 'blur-style'}`} />
{/* 提示文案 */}
<View className='qr-code-tip'>
{
count > 0 ? <>
有效期剩余<Text style={{ color: '#00f' }}> {count} </Text>秒
</> : '二维码已过期,请刷新二维码'
}
</View>
</View>
{
onUpdate && <Button type='primary' className='qr-code-update-btn' onClick={onUpdate}>立即刷新</Button>
}
</View>)
}
你好,请提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
.qr-code-wrap {
overflow: hidden;
.qr-code-node {
display: block;
border-radius: 24px;
background-color: #fff;
width: 520px;
margin: 12px auto;
padding: 12px;
position: relative;
box-shadow: 0 0 6px 6px #ddd;
.myQrcode {
display: flex;
justify-content: center;
align-items: center;
width: 520px;
height: 520px;
position: relative;
&.blur-style {
filter: blur(8px);
}
}
.qr-code-tip {
text-align: center;
margin: 12px 0;
color: #999;
}
}
.qr-code-update-btn {
margin-top: 60px;
width: 540px;
}
}
padding: 24px;