特效QQ消息XML生成工具，qq卡片代码生成器，QQ卡片XML消息生成工具

原创

用户11696336

发布于 2025-06-24 12:19:25

9260

下载地址：https://www.pan38.com/share.php?code=pvvmX 提取码：6672 【仅供学习参考】

完整的QQ特效消息XML生成工具实现，包含多种卡片模板和动态效果，前端界面提供实时预览功能，支持多种卡片模板切换。模板库包含4种基础卡片类型，支持文本、图片、动画和交互按钮。


<!DOCTYPE html>
<html>
<head>
    <title>QQ特效卡片生成器</title>
    <style>
        .editor-container { display: flex; margin: 20px; }
        .panel { flex: 1; padding: 15px; }
        textarea { width: 100%; height: 400px; }
        .preview { border: 1px dashed #ccc; min-height: 200px; }
    </style>
</head>
<body>
    <h1>QQ特效卡片生成器</h1>
    <div class="editor-container">
        <div class="panel">
            <h3>XML编辑器</h3>
            <textarea id="xmlEditor"></textarea>
        </div>
        <div class="panel">
            <h3>效果预览</h3>
            <div id="preview" class="preview"></div>
        </div>
    </div>
    <script>
        // 模板数据
        const templates = {
            basic: `<msg serviceID="1" templateID="1">
                <item layout="0">
                    <title>普通卡片</title>
                    <summary>这是基础卡片内容</summary>
                </item>
            </msg>`,
            
            rich: `<msg serviceID="2" templateID="2">
                <item layout="2" bgType="1" bgColor="#FFEEEE">
                    <title color="#FF0000">特效卡片</title>
                    <summary>带背景色的卡片</summary>
                    <picture cover="https://example.com/image.jpg"/>
                </item>
            </msg>`,
            
            animation: `<msg serviceID="3" templateID="3">
                <item layout="5" animation="shake">
                    <title>动态卡片</title>
                    <summary>会晃动的卡片效果</summary>
                </item>
            </msg>`
        };

        // 初始化编辑器
        document.getElementById('xmlEditor').value = templates.basic;
        updatePreview();
        
        function updatePreview() {
            document.getElementById('preview').innerHTML = 
                parseCard(document.getElementById('xmlEditor').value);
        }
    </script>
</body>
</html>


<!-- 基础文本卡片 -->
<msg serviceID="1" templateID="1" brief="[文本卡片]">
    <item layout="0">
        <title>标题文字</title>
        <summary>这里是卡片正文内容，支持多行文本显示</summary>
    </item>
</msg>

<!-- 图文混合卡片 -->
<msg serviceID="2" templateID="2" brief="[图文卡片]">
    <item layout="2" bgType="1" bgColor="#F0F8FF">
        <title color="#1E90FF">带图片的卡片</title>
        <summary>左侧显示文字，右侧显示图片</summary>
        <picture cover="https://example.com/pic.jpg" 
                width="120" height="120"/>
    </item>
</msg>

<!-- 动态特效卡片 -->
<msg serviceID="3" templateID="3" brief="[动态卡片]">
    <item layout="5" animation="bounce">
        <title color="#FF4500">特效标题</title>
        <summary>这个卡片会有弹跳动画效果</summary>
        <picture cover="https://example.com/animated.gif"/>
    </item>
</msg>

<!-- 多元素组合卡片 -->
<msg serviceID="4" templateID="4" brief="[组合卡片]">
    <item layout="3">
        <title>多功能卡片</title>
        <summary>包含多个交互元素</summary>
        <buttons>
            <button action="view" data="https://example.com">查看详情</button>
            <button action="share">分享</button>
        </buttons>
    </item>
</msg>


<!-- 弹跳动画 -->
<msg serviceID="10" templateID="10">
    <item layout="5" animation="bounce" duration="1000">
        <title>弹跳效果</title>
        <summary>卡片会上下弹跳3次</summary>
    </item>
</msg>

<!-- 渐显动画 -->
<msg serviceID="11" templateID="11">
    <item layout="6" animation="fade" duration="800">
        <title>渐显效果</title>
        <summary>卡片会慢慢显示出来</summary>
    </item>
</msg>

<!-- 摇动特效 -->
<msg serviceID="12" templateID="12">
    <item layout="7" animation="shake" intensity="5">
        <title>摇动效果</title>
        <summary>收到消息时会左右摇晃</summary>
    </item>
</msg>

<!-- 粒子特效 -->
<msg serviceID="13" templateID="13">
    <item layout="8" animation="particle" effect="confetti">
        <title>庆祝特效</title>
        <summary>显示时会伴随彩带效果</summary>
    </item>
</msg>

 QQCardParser {
    constructor(xmlString) {
        this.xmlString = xmlString;
        this.cardData = null;
    }

    parse() {
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(this.xmlString, "text/xml");
        
        // 提取基础信息
        const msg = xmlDoc.getElementsByTagName('msg')[0];
        this.cardData = {
            serviceID: msg.getAttribute('serviceID'),
            templateID: msg.getAttribute('templateID'),
            brief: msg.getAttribute('brief') || '',
            layout: '0'
        };

        // 解析内容项
        const item = msg.getElementsByTagName('item')[0];
        if (item) {
            this.cardData.layout = item.getAttribute('layout') || '0';
            this.cardData.title = this.getNodeText(item, 'title');
            this.cardData.summary = this.getNodeText(item, 'summary');
            this.cardData.animation = item.getAttribute('animation');
        }

        return this.cardData;
    }

    getNodeText(parent, tagName) {
        const nodes = parent.getElementsByTagName(tagName);
        return nodes.length > 0 ? nodes[0].textContent : '';
    }

    generatePreview() {
        if (!this.cardData) this.parse();
        
        let html = `<div class="qq-card" data-layout="${this.cardData.layout}">`;
        html += `<h3>${this.cardData.title}</h3>`;
        html += `<p>${this.cardData.summary}</p>`;
        
        if (this.cardData.animation) {
            html += `<script>applyAnimation('${this.cardData.animation}')</script>`;
        }
        
        html += `</div>`;
        return html;
    }
}

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

代码生成工具

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

代码生成工具

登录后参与评论

0 条评论

热度

特效QQ消息XML生成工具，qq卡片代码生成器，QQ卡片XML消息生成工具

特效QQ消息XML生成工具，qq卡片代码生成器，QQ卡片XML消息生成工具

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐