- weapp-qrcode-canvas-2d 生成二维码,IOS【真机调试】报错, 如何处理?
生产二维码的库【weapp-qrcode-canvas-2d 】, https://gitee.com/wbkfzwk/weapp-qrcode-canvas-2d ,预览版本安卓和IOS都正常,但是真机调试下IOS设备报错,无法绘制二维码,安卓下正常,报错如下图: [图片] 麻烦官方给一个解决方案,感谢🙏
06-11 - Taro下使用 weapp-qrcode-canvas-2d 绘制二维码 IOS 下空白什么情况 ?
以下是使用 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>) }
05-24