收藏
回答

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>)
}
回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员--许涛
    社区技术运营专员--许涛
    05-27

    你好,请提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    05-27
    有用
    回复 4
    • 番茄炒蛋
      番茄炒蛋
      05-28
      Taro  框架 react 代码,改成小程序原生代码导入代码片段吗?
      05-28
      回复
    • 社区技术运营专员--许涛
      社区技术运营专员--许涛
      05-28回复番茄炒蛋
      H5还是小程序呢?
      05-28
      回复
    • 番茄炒蛋
      番茄炒蛋
      05-28回复社区技术运营专员--许涛
      是小程序,但是Taro框架编译出来的,没办法写到代码片段里去,大佬能否本地跑一下,我贴了整个组件的代码,下面是样式代码,贴到taro项目里可以直接运行,麻烦大佬帮忙看下
      05-28
      回复
    • 社区技术运营专员--许涛
      社区技术运营专员--许涛
      05-29回复番茄炒蛋
      请移步Taro社区
      05-29
      回复
登录 后发表内容