更新记录

1.2.7（2026-06-19）

  • web端优化

1.2.6（2026-06-19）

  • 重要更新： 从1.2.6开始调整自定义文字和图片字段传参为JSON数组字符串格式，可同时修改多个图层
  • 安卓端优化自定义文字场景，文字被截断的问题
  • 已知问题优化

1.2.5（2026-04-16）

  • 修复安卓端动画完成回调闪退的问题
查看更多

平台兼容性

uni-app(4.66)

Vue2 Vue3 Chrome Chrome插件版本 Safari Safari插件版本 app-vue app-nvue Android iOS iOS插件版本 鸿蒙
√ √ √ 1.2.2 √ 1.2.2 - √ 5.0 12 1.2.2 -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - - -

uni-app x(4.66)

Chrome Chrome插件版本 Safari Safari插件版本 Android iOS iOS插件版本 鸿蒙 微信小程序
√ 1.2.2 √ 1.2.2 5.0 12 1.1.0 - -

xwq-svga-view

开发文档说明

接入步骤

01、将插件导入项目！

02、页面加入调用插件代码！

03、提交云端打自定义基座！

uniappX项目打包前先在manifest.json加上以下配置

"app" : {
        "distribute" : {
            "modules" : {
                "uni-fileSystemManager" : {},
            }
    }
 }

参数说明

属性 类型 默认值 必填 描述
source string - Y 资源地址（项目static目录文件或网络地址）
loops number 0 Y 循环次数
autoPlay boolean false N 自动播放
dynamiText JSONString - N 自定义文本内容(数据格式需要JSON对象格式，例：'[{"size":28,"color":"#ff0000","text":"自定义内容","keyName":"GuangHuan"}]'),注意：从1.2.6版本开始调整为JSON数组字符串格式，支持同时修改多个图层
dynamicImage JSONString - N 替换指定key的图片内容,支持本地图片和网络地址(数据格式需要JSON对象格式，例：'[{"url":"/static/logo.jpg","keyName":"xin02"}]'),注意：从1.2.6版本开始调整为JSON数组字符串格式，支持同时修改多个图层
hiddenKeyName string - N 隐藏对应key的图片
finished ()=>void - N 播放完成回调函数

方法说明

  • start 开始动画
  • pause 暂停动画
  • continuePlay 继续动画

uniappX项目使用例子

<template>
    <view class="page">
        <scroll-view>
        <xwq-svga-view v-if="showSvga" ref="svga" :hiddenKeyName="hiddenKeyName" :dynamicText="dynamiText" :dynamicImage="dynamicImage" hiddenKeyName="张三11" :source="source" :loops="loops" :autoPlay="autoPlay" :style="{width:'414px',height:'350px'}" @finished="svgaFinish"></xwq-svga-view>
        <button @click="start">开始动画</button>
        <button @click="pause">暂停动画</button>
        <button @click="continuePlay">继续动画</button>
        </scroll-view>
    </view>
</template>

<script lang="uts">

    export default {
        data() {
            return {
                showSvga:true,
                // source:"https://www.example.com/files/web/pic/demo/car.svga?raw=true",
                source:"/static/angel.svga",
                loops:1,
                autoPlay:false,//自动播放动画
                dynamiText:'[{"size":28,"color":"#ff0000","text":"自定义内容","keyName":"GuangHuan"}]',
                dynamicImage:'[{"url":"/static/logo.jpg","keyName":"xin02"}]',
                // dynamicImage:'{"url":"https://www.example.com/files/web/pic/jns/danger_icon.png?raw=true","keyName":"xin02"}',
                hiddenKeyName:'keyName'
            }
        },
        methods: {
            //暂停动画
            stop(){
                let svgaC = (this.$refs["svga"] as XwqSvgaViewElement);
                svgaC.stop();
            },
            //开始动画
            start(){
                let svgaC = (this.$refs["svga"] as XwqSvgaViewElement);
                svgaC.start();
            },
            //暂停动画
            pause(){
                let svgaC = (this.$refs["svga"] as XwqSvgaViewElement);
                svgaC.pause();
            },
            //继续动画
            continuePlay(){
                let svgaC = (this.$refs["svga"] as XwqSvgaViewElement);
                svgaC.continue();
            },
            //动画完成
            svgaFinish(){
                console.log('动画完成')
            },
        }
    }
</script>

<style>
    .page{
        background-color:#f2f2f2;
        height:100%;
    }
.pic-wrap{
    margin-top:50px;
    width:100%;
    justify-content: center;
    align-items: center;
}

.qr-code{
    width:100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

</style>

uniapp项目使用例子(注意：组件只能在nvue页面内引用)

<template>
    <view>
        <xwq-svga-view v-if="showSvga" ref="svga" :hiddenKeyName="hiddenKeyName" :dynamicText="dynamiText"
            :dynamicImage="dynamicImage" :source="source" :loops="loops" :autoPlay="autoPlay"
            :style="{width:'100%',height:'350px'}" @finished="svgaFinish"/>
        <button @click="start">开始动画</button>
        <button @click="pause">暂停动画</button>
        <button @click="continuePlay">继续动画</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showSvga: false,
                autoPlay: true,
                // source: "https://www.example.com/files/web/pic/demo/car.svga?raw=true",
                source:plus.io.convertLocalFileSystemURL("/static/angel.svga"),
                loops: 1,
                dynamiText: '',
                dynamicImage: '',
                hiddenKeyName: 'keyName'
            }
        },

        mounted() {
            const dynamiText_tem=[{
                size:18,
                color:"#ff00FF",
                text:"自定义名称",
                keyName:"GuangHuan"
            }];

            const dynamicImage_tem=[{
                url:plus.io.convertLocalFileSystemURL("/static/logo.png"),
                keyName:"xin02",
            }];
            this.dynamiText=JSON.stringify(dynamiText_tem);
            this.dynamicImage=JSON.stringify(dynamicImage_tem);

            this.showSvga=true;
        },
        methods: {
            stop() {
                let svgaC = this.$refs.svga;
                svgaC?.stop();
            },
            start() {
                this.showSvga=true;
                let svgaC = this.$refs.svga;
                svgaC?.start();
            },
            pause() {
                let svgaC = this.$refs.svga;
                svgaC?.pause();
            },
            continuePlay() {
                let svgaC = this.$refs.svga;
                svgaC?.continue();
            },
            svgaFinish() {
                console.log('动画完成===');
                this.showSvga=false;
            }
        }
    }
</script>

<style>

</style>

其他插件预览

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉
加载更多...