QQ卡片XML消息生成工具，qq卡片链接在线生成器，用Js即可实现效果
原创
QQ卡片XML消息生成工具，qq卡片链接在线生成器，用Js即可实现效果
原创
用户11696336
发布于 2025-06-24 12:23:19
发布于 2025-06-24 12:23:19
下载地址：https://www.pan38.com/share.php?code=pvvmX 提取码：3328 【仅供学习】
基于JavaScript实现的QQ卡片XML消息生成工具完整代码，包含前端界面和核心功能实现。
这个QQ卡片XML消息生成工具提供了完整的可视化界面，支持多种卡片类型，包括普通卡片、天气卡片、音乐卡片和新闻卡片。用户可以通过表单输入卡片内容，实时预览效果，并生成可直接在QQ中使用的XML代码。
代码实现了以下核心功能：
- 多种卡片模板支持
- 实时预览功能
- XML代码生成
- 一键复制功能
- 响应式设计适配不同设备
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ卡片XML消息生成器</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background-color: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea, select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #12b7f5;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0e9fd8;
}
.preview {
margin-top: 20px;
border: 1px dashed #ccc;
padding: 15px;
border-radius: 5px;
background-color: #fafafa;
}
.code-output {
margin-top: 20px;
background-color: #f0f0f0;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>QQ卡片XML消息生成器</h1>
<div class="form-group">
<label for="cardType">卡片类型:</label>
<select id="cardType">
<option value="normal">普通卡片</option>
<option value="weather">天气卡片</option>
<option value="music">音乐卡片</option>
<option value="news">新闻卡片</option>
</select>
</div>
<div class="form-group">
<label for="title">标题:</label>
<input type="text" id="title" placeholder="输入卡片标题">
</div>
<div class="form-group">
<label for="content">内容:</label>
<textarea id="content" rows="4" placeholder="输入卡片内容"></textarea>
</div>
<div class="form-group">
<label for="imageUrl">图片URL:</label>
<input type="text" id="imageUrl" placeholder="输入图片链接">
</div>
<div class="form-group">
<label for="jumpUrl">跳转链接:</label>
<input type="text" id="jumpUrl" placeholder="输入点击后跳转的链接">
</div>
<div class="form-group">
<label for="themeColor">主题颜色:</label>
<input type="color" id="themeColor" value="#12b7f5">
</div>
<button onclick="generateCard()">生成卡片</button>
<button onclick="copyToClipboard()">复制代码</button>
<div class="preview">
<h3>预览效果</h3>
<div id="cardPreview"></div>
</div>
<div class="code-output">
<h3>XML代码</h3>
<textarea id="xmlOutput" rows="10" readonly style="width: 100%;"></textarea>
</div>
</div>
<script>
// 卡片模板库
const cardTemplates = {
normal: {
template: (data) => `
<msg serviceID="1" templateID="1" action="web" brief="${data.title}" sourceMsgId="0" url="${data.jumpUrl}" flag="0" adverSign="0" multiMsgFlag="0">
<item layout="2" advertiser_id="0" aid="0">
<title>${data.title}</title>
<summary>${data.content}</summary>
<picture cover="${data.imageUrl}"/>
</item>
<source name="QQ卡片消息" icon="https://qzonestyle.gtimg.cn/qzone/space_item/orig/13/100541_d3d3.jpg" url="" action="web" a_actionData="" i_actionData="" appid="-1"/>
</msg>
`,
preview: (data) => `
<div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden; max-width: 300px; background-color: white;">
<img src="${data.imageUrl || 'https://via.placeholder.com/300x150?text=无图片'}" style="width: 100%; height: 150px; object-fit: cover;">
<div style="padding: 10px;">
<h3 style="margin: 0 0 5px 0; color: ${data.themeColor};">${data.title}</h3>
<p style="margin: 0; color: #666; font-size: 14px;">${data.content}</p>
</div>
</div>
`
},
weather: {
template: (data) => `
<msg serviceID="1" templateID="12345" action="web" brief="天气预报" sourceMsgId="0" url="${data.jumpUrl}" flag="0" adverSign="0" multiMsgFlag="0">
<item layout="2" advertiser_id="0" aid="0">
<title>${data.title || '天气预报'}</title>
<summary>${data.content || '点击查看详细天气信息'}</summary>
<picture cover="${data.imageUrl || 'https://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/weather/day/00.png'}"/>
</item>
<source name="天气服务" icon="https://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/weather/day/00.png" url="" action="web" a_actionData="" i_actionData="" appid="-1"/>
</msg>
`,
preview: (data) => `
<div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden; max-width: 300px; background-color: white;">
<img src="${data.imageUrl || 'https://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/weather/day/00.png'}" style="width: 100%; height: 150px; object-fit: cover;">
<div style="padding: 10px; background-color: ${data.themeColor}; color: white;">
<h3 style="margin: 0 0 5px 0;">${data.title || '天气预报'}</h3>
<p style="margin: 0; font-size: 14px;">${data.content || '点击查看详细天气信息'}</p>
</div>
</div>
`
},
music: {
template: (data) => `
<msg serviceID="1" templateID="67890" action="web" brief="音乐分享" sourceMsgId="0" url="${data.jumpUrl}" flag="0" adverSign="0" multiMsgFlag="0">
<item layout="2" advertiser_id="0" aid="0">
<title>${data.title || '音乐分享'}</title>
<summary>${data.content || '点击播放这首歌曲'}</summary>
<picture cover="${data.imageUrl || 'https://y.gtimg.cn/mediastyle/global/img/album_300.png'}"/>
</item>
<source name="QQ音乐" icon="https://y.gtimg.cn/mediastyle/global/img/album_300.png" url="" action="web" a_actionData="" i_actionData="" appid="-1"/>
</msg>
`,
preview: (data) => `
<div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden; max-width: 300px; background-color: white;">
<div style="display: flex;">
<img src="${data.imageUrl || 'https://y.gtimg.cn/mediastyle/global/img/album_300.png'}" style="width: 100px; height: 100px; object-fit: cover;">
<div style="padding: 10px; flex: 1;">
<h3 style="margin: 0 0 5px 0; color: ${data.themeColor};">${data.title || '音乐分享'}</h3>
<p style="margin: 0; color: #666; font-size: 14px;">${data.content || '点击播放这首歌曲'}</p>
<div style="margin-top: 10px; width: 30px; height: 30px; background-color: ${data.themeColor}; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
<span style="color: white; font-size: 12px;">▶</span>
</div>
</div>
</div>
</div>
`
},
news: {
template: (data) => `
<msg serviceID="1" templateID="54321" action="web" brief="${data.title}" sourceMsgId="0" url="${data.jumpUrl}" flag="0" adverSign="0" multiMsgFlag="0">
<item layout="2" advertiser_id="0" aid="0">
<title>${data.title}</title>
<summary>${data.content}</summary>
<picture cover="${data.imageUrl}"/>
</item>
<source name="新闻资讯" icon="https://mat1.gtimg.com/www/mobi2016/image/logo_qq.png" url="" action="web" a_actionData="" i_actionData="" appid="-1"/>
</msg>
`,
preview: (data) => `
<div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden; max-width: 300px; background-color: white;">
<img src="${data.imageUrl || 'https://via.placeholder.com/300x150?text=无图片'}" style="width: 100%; height: 150px; object-fit: cover;">
<div style="padding: 10px;">
<div style="display: flex; align-items: center; margin-bottom: 5px;">
<img src="https://mat1.gtimg.com/www/mobi2016/image/logo_qq.png" style="width: 20px; height: 20px; margin-right: 5px;">
<span style="font-size: 12px; color: #999;">腾讯新闻</span>
</div>
<h3 style="margin: 0 0 5px 0; color: ${data.themeColor};">${data.title}</h3>
<p style="margin: 0; color: #666; font-size: 14px;">${data.content}</p>
</div>
</div>
`
}
};
// 生成卡片
function generateCard() {
const cardType = document.getElementById('cardType').value;
const title = document.getElementById('title').value;
const content = document.getElementById('content').value;
const imageUrl = document.getElementById('imageUrl').value;
const jumpUrl = document.getElementById('jumpUrl').value;
const themeColor = document.getElementById('themeColor').value;
const data = {
title,
content,
imageUrl,
jumpUrl,
themeColor
};
// 生成XML
const xml = cardTemplates[cardType].template(data);
document.getElementById('xmlOutput').value = xml;
// 显示预览
const preview = cardTemplates[cardType].preview(data);
document.getElementById('cardPreview').innerHTML = preview;
}
// 复制到剪贴板
function copyToClipboard() {
const xmlOutput = document.getElementById('xmlOutput');
xmlOutput.select();
document.execCommand('copy');
alert('XML代码已复制到剪贴板！');
}
// 初始化
document.addEventListener('DOMContentLoaded', function() {
generateCard();
});
</script>
</body>
</html>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号