refactor(MessageRecord): 重构小程序消息解析逻辑
移除冗余的小程序消息解析代码，统一使用 parseWeappMsgStr 方法处理 简化缩略图获取逻辑，直接使用 parsedData.previewImage
This commit is contained in:
超级老白兔
@@ -341,103 +341,6 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
|
||||
|
||||
// 尝试解析JSON格式的消息
|
||||
if (trimmedContent.startsWith("{") && trimmedContent.endsWith("}")) {
|
||||
// 首先尝试使用parseWeappMsgStr解析小程序消息
|
||||
try {
|
||||
const parsedData = parseWeappMsgStr(trimmedContent);
|
||||
|
||||
// 检查是否为小程序消息
|
||||
if (parsedData.type === "miniprogram" && parsedData.appmsg) {
|
||||
console.log(parsedData);
|
||||
|
||||
const { appmsg } = parsedData;
|
||||
const title = appmsg.title || "小程序消息";
|
||||
const appName =
|
||||
appmsg.sourcedisplayname || appmsg.appname || "小程序";
|
||||
|
||||
// 获取缩略图URL
|
||||
let thumbUrl = "";
|
||||
if (appmsg.weappinfo && appmsg.weappinfo.thumburl) {
|
||||
thumbUrl = appmsg.weappinfo.thumburl
|
||||
.replace(/[`"']/g, "")
|
||||
.replace(/&/g, "&");
|
||||
}
|
||||
|
||||
// 获取小程序类型
|
||||
const miniProgramType =
|
||||
appmsg.weappinfo && appmsg.weappinfo.type
|
||||
? parseInt(appmsg.weappinfo.type)
|
||||
: 1;
|
||||
|
||||
// 根据type类型渲染不同布局
|
||||
if (miniProgramType === 2) {
|
||||
// 类型2：图片区域布局
|
||||
return (
|
||||
<div
|
||||
className={`${styles.miniProgramMessage} ${styles.miniProgramType2}`}
|
||||
>
|
||||
<div
|
||||
className={`${styles.miniProgramCard} ${styles.miniProgramCardType2}`}
|
||||
>
|
||||
<div className={styles.miniProgramAppTop}>
|
||||
{appName}
|
||||
</div>
|
||||
<div className={styles.miniProgramTitle}>{title}</div>
|
||||
{thumbUrl && (
|
||||
<div className={styles.miniProgramImageArea}>
|
||||
<img
|
||||
src={thumbUrl}
|
||||
alt="小程序图片"
|
||||
className={styles.miniProgramImage}
|
||||
onError={e => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = "none";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.miniProgramContent}>
|
||||
<div className={styles.miniProgramIdentifier}>
|
||||
小程序
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
// 默认类型：横向布局
|
||||
return (
|
||||
<div
|
||||
className={`${styles.miniProgramMessage} ${styles.miniProgramType1}`}
|
||||
>
|
||||
<div className={styles.miniProgramCard}>
|
||||
{thumbUrl && (
|
||||
<img
|
||||
src={thumbUrl}
|
||||
alt="小程序缩略图"
|
||||
className={styles.miniProgramThumb}
|
||||
onError={e => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = "none";
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className={styles.miniProgramInfo}>
|
||||
<div className={styles.miniProgramTitle}>{title}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.miniProgramApp}>{appName}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (parseError) {
|
||||
console.warn(
|
||||
"parseWeappMsgStr解析失败，使用备用解析方法:",
|
||||
parseError,
|
||||
);
|
||||
}
|
||||
|
||||
// 备用解析方法：处理其他格式的消息
|
||||
const messageData = JSON.parse(trimmedContent);
|
||||
|
||||
// 处理文章类型消息
|
||||
@@ -488,104 +391,86 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
|
||||
);
|
||||
}
|
||||
|
||||
// 处理包含contentXml的小程序消息格式
|
||||
if (messageData.contentXml && messageData.type === "miniprogram") {
|
||||
const xmlContent = messageData.contentXml;
|
||||
// 处理小程序消息 - 统一使用parseWeappMsgStr解析
|
||||
if (messageData.type === "miniprogram" && messageData.contentXml) {
|
||||
try {
|
||||
const parsedData = parseWeappMsgStr(trimmedContent);
|
||||
|
||||
// 从XML中提取title
|
||||
const titleMatch = xmlContent.match(/<title>([^<]*)<\/title>/);
|
||||
const title = titleMatch ? titleMatch[1] : "小程序消息";
|
||||
if (parsedData.appmsg) {
|
||||
const { appmsg } = parsedData;
|
||||
const title = appmsg.title || "小程序消息";
|
||||
const appName =
|
||||
appmsg.sourcedisplayname || appmsg.appname || "小程序";
|
||||
|
||||
// 从XML中提取type字段
|
||||
const typeMatch = xmlContent.match(
|
||||
/<weappinfo>[\s\S]*?<type>(\d+)<\/type>[\s\S]*?<\/weappinfo>/,
|
||||
);
|
||||
const miniProgramType = typeMatch ? parseInt(typeMatch[1]) : 1;
|
||||
// 获取小程序类型
|
||||
const miniProgramType =
|
||||
appmsg.weappinfo && appmsg.weappinfo.type
|
||||
? parseInt(appmsg.weappinfo.type)
|
||||
: 1;
|
||||
|
||||
// 从XML中提取thumburl或使用previewImage
|
||||
const thumbUrlMatch = xmlContent.match(
|
||||
/<thumburl>\s*([^<]*?)\s*<\/thumburl>/,
|
||||
);
|
||||
let thumbUrl = thumbUrlMatch ? thumbUrlMatch[1].trim() : "";
|
||||
|
||||
// 如果thumburl为空或无效，使用previewImage
|
||||
if (!thumbUrl || thumbUrl === "`" || thumbUrl.includes("`")) {
|
||||
thumbUrl = messageData.previewImage || "";
|
||||
}
|
||||
|
||||
// 清理URL中的特殊字符
|
||||
thumbUrl = thumbUrl.replace(/[`"']/g, "").replace(/&/g, "&");
|
||||
|
||||
// 从XML中提取appname或使用默认值
|
||||
const appNameMatch =
|
||||
xmlContent.match(/<appname\s*\/?>[^<]*<\/appname>/) ||
|
||||
xmlContent.match(
|
||||
/<sourcedisplayname>([^<]*)<\/sourcedisplayname>/,
|
||||
);
|
||||
const appName = appNameMatch ? appNameMatch[1] : "小程序";
|
||||
|
||||
// 根据type类型渲染不同布局
|
||||
if (miniProgramType === 2) {
|
||||
// 类型2：图片区域布局（小程序昵称、图片、标题、小程序标识）
|
||||
return (
|
||||
<div
|
||||
className={`${styles.miniProgramMessage} ${styles.miniProgramType2}`}
|
||||
>
|
||||
<div
|
||||
className={`${styles.miniProgramCard} ${styles.miniProgramCardType2}`}
|
||||
>
|
||||
{/* 小程序昵称 */}
|
||||
<div className={styles.miniProgramAppTop}>{appName}</div>
|
||||
{/* 标题 */}
|
||||
<div className={styles.miniProgramTitle}>{title}</div>
|
||||
{/* 图片 */}
|
||||
{thumbUrl && (
|
||||
<div className={styles.miniProgramImageArea}>
|
||||
// 根据type类型渲染不同布局
|
||||
if (miniProgramType === 2) {
|
||||
// 类型2：图片区域布局
|
||||
return (
|
||||
<div
|
||||
className={`${styles.miniProgramMessage} ${styles.miniProgramType2}`}
|
||||
>
|
||||
<div
|
||||
className={`${styles.miniProgramCard} ${styles.miniProgramCardType2}`}
|
||||
>
|
||||
<div className={styles.miniProgramAppTop}>
|
||||
{appName}
|
||||
</div>
|
||||
<div className={styles.miniProgramTitle}>{title}</div>
|
||||
<div className={styles.miniProgramImageArea}>
|
||||
<img
|
||||
src={parsedData.previewImage}
|
||||
alt="小程序图片"
|
||||
className={styles.miniProgramImage}
|
||||
onError={e => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = "none";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.miniProgramContent}>
|
||||
<div className={styles.miniProgramIdentifier}>
|
||||
小程序
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
// 默认类型：横向布局
|
||||
return (
|
||||
<div
|
||||
className={`${styles.miniProgramMessage} ${styles.miniProgramType1}`}
|
||||
>
|
||||
<div className={styles.miniProgramCard}>
|
||||
<img
|
||||
src={thumbUrl}
|
||||
alt="小程序图片"
|
||||
className={styles.miniProgramImage}
|
||||
src={parsedData.previewImage}
|
||||
alt="小程序缩略图"
|
||||
className={styles.miniProgramThumb}
|
||||
onError={e => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = "none";
|
||||
}}
|
||||
/>
|
||||
<div className={styles.miniProgramInfo}>
|
||||
<div className={styles.miniProgramTitle}>
|
||||
{title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.miniProgramContent}>
|
||||
{/* 小程序标识 */}
|
||||
<div className={styles.miniProgramIdentifier}>
|
||||
小程序
|
||||
</div>
|
||||
<div className={styles.miniProgramApp}>{appName}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
// 默认类型：横向布局
|
||||
return (
|
||||
<div
|
||||
className={`${styles.miniProgramMessage} ${styles.miniProgramType1}`}
|
||||
>
|
||||
<div className={styles.miniProgramCard}>
|
||||
{thumbUrl && (
|
||||
<img
|
||||
src={thumbUrl}
|
||||
alt="小程序缩略图"
|
||||
className={styles.miniProgramThumb}
|
||||
onError={e => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = "none";
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className={styles.miniProgramInfo}>
|
||||
<div className={styles.miniProgramTitle}>{title}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.miniProgramApp}>{appName}</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (parseError) {
|
||||
console.error("parseWeappMsgStr解析失败:", parseError);
|
||||
return renderErrorMessage("[小程序消息 - 解析失败]");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user