uni-app renderjs中显示svga格式文件报错

uni-app renderjs中显示svga格式文件报错

开发环境 版本号 项目创建方式
Windows Windows Feature Experience Pack 120.2212.3530.0 HBuilderX 
产品分类：uniapp/H5

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.13

浏览器平台：Chrome

浏览器版本：93.0.4577.63

示例代码：

``` html
<template>  
    <view>  
        <view id="giftCanvas"></view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        methods: {  

        }  
    }  
</script>  

<script module="svga" lang="renderjs">  
    import SVGA from '../../util/svga.min.js'  
    export default {  
        mounted() {  
            this.initSVGA()  
        },  
        methods: {  
            initSVGA(newValue, oldValue, ownerInstance, instance) {  
                console.log(newValue);  
                let player = new SVGA.Player('#giftCanvas');  
                let parser = new SVGA.Parser('#giftCanvas');  
                parser.load('https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga', (videoItem) => {  
                    player.loops = 1 // 设置循环播放次数是1  
                    player.setVideoItem(videoItem);  
                    player.startAnimation();  
                })  
            }  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    #giftCanvas {  
        width: 100%;  
        height: 600rpx;  
        margin: auto;  
    }  
</style>

操作步骤： 直接运行即可

预期结果： 显示svga格式文件

实际结果： 报错，未显示

bug描述： uniapp 使用renderjs 加载svga动画格式文件，报错Cannot set properties of undefined (setting ‘width’)" Cannot read properties of undefined (reading ‘requestAnimationFrame’)


更多关于uni-app renderjs中显示svga格式文件报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

view换成div

更多关于uni-app renderjs中显示svga格式文件报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


解决没？我也是一样的问题

解决了么

解决了么 报错 TypeError: null is not an object (evaluating ‘h.input.length’)

在uni-app的renderjs中使用SVGA库时，遇到的Cannot set properties of undefined和Cannot read properties of undefined错误，通常是由于SVGA库对DOM环境的依赖与renderjs的执行环境不兼容导致的。renderjs虽然运行在视图层，但其JavaScript环境与标准的Web环境仍存在差异，SVGA库可能依赖了某些未完全支持的API或全局对象。

主要原因分析：

  1. DOM操作限制：SVGA库内部可能直接操作了document或window对象，而renderjs环境对这些对象的支持有限。
  2. Canvas上下文问题：SVGA依赖于Canvas API，在renderjs中创建Canvas元素时，其上下文（context）可能未正确初始化。
  3. 全局对象缺失：requestAnimationFrame等全局方法在renderjs中可能不可用或行为不一致。

解决方案：

  1. 使用原生组件替代：对于SVGA动画，建议使用<video>标签直接播放（如果已转换为视频格式），或通过原生插件实现。
  2. 调整Canvas初始化：确保Canvas元素在renderjs的mounted生命周期后完全渲染，再初始化SVGA。尝试将初始化代码包裹在setTimeout或this.$nextTick中：
    mounted() {
    this.$nextTick(() => {
        this.initSVGA();
    });
}
  3. 降级SVGA库版本：尝试使用更早版本的SVGA库（如1.x版本），某些版本对非标准环境兼容性更好。
  4. 环境检测与模拟：在renderjs中手动模拟缺失的全局对象，例如：
    if (typeof requestAnimationFrame === 'undefined') {
    window.requestAnimationFrame = (cb) => setTimeout(cb, 16);
}
  5. 避免使用renderjs：考虑使用WebView组件加载独立HTML页面来运行SVGA，或通过条件编译在H5端直接使用标准Web API。

代码调整示例：

<script module="svga" lang="renderjs">
import SVGA from '../../util/svga.min.js'
export default {
    mounted() {
        // 模拟缺失的API
        if (typeof requestAnimationFrame === 'undefined') {
            window.requestAnimationFrame = (cb) => setTimeout(cb, 16);
        }
        // 延迟初始化确保DOM就绪
        setTimeout(() => this.initSVGA(), 100);
    },
    methods: {
        initSVGA() {
            const canvas = document.querySelector('#giftCanvas');
            if (!canvas) return;
            let player = new SVGA.Player(canvas);
            let parser = new SVGA.Parser(canvas);
            parser.load('https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga', (videoItem) => {
                player.loops = 1;
                player.setVideoItem(videoItem);
                player.startAnimation();
            });
        }
    }
}
</script>
回到顶部