fix: 鸿蒙环境兼容 — wx.miniProgram 不可用时隐藏分享给微信好友改为引导卡片

- SharePage 首次渲染时检测 wx.miniProgram 是否可用
- 可用 → 显示绿色分享给微信好友按钮(bridge.share 流程)
- 不可用(鸿蒙等) → 显示蓝色引导卡片长按图片保存到相册,微信发送给好友
- 移除调试面板,恢复简洁 UI
This commit is contained in:
2026-07-03 13:39:26 +08:00
parent d4a85c0181
commit d4734d48f5

View File

@@ -14,6 +14,7 @@ import {
Download,
Check,
Image as ImageIcon,
Smartphone,
} from "lucide-react";
import { toPng } from "html-to-image";
import { Card } from "../components/ui/card";
@@ -24,25 +25,12 @@ import bridge from "../services/bridge";
type SaveStatus = "idle" | "generating" | "success" | "error";
/** 调试:检查小程序环境 */
function checkEnv(): string[] {
const lines: string[] = [];
lines.push('UA: ' + navigator.userAgent.substring(0, 60));
/** 检测是否支持微信小程序分享(wx.miniProgram 必须存在) */
function supportsWxMiniProgramShare(): boolean {
try {
const w = (window as any).wx;
lines.push('wx 对象: ' + (typeof w !== 'undefined' ? '存在' : '不存在'));
if (w) {
lines.push('wx.miniProgram: ' + (w.miniProgram ? '存在' : '不存在'));
if (w.miniProgram) {
lines.push('navigateBack: ' + (typeof w.miniProgram.navigateBack));
lines.push('postMessage: ' + (typeof w.miniProgram.postMessage));
w.miniProgram.getEnv((res: any) => {
lines.push('getEnv: ' + JSON.stringify(res));
});
}
}
} catch (e: any) { lines.push('wx 检测异常: ' + e.message); }
return lines;
return !!(w && w.miniProgram && typeof w.miniProgram.navigateBack === 'function');
} catch { return false; }
}
export function SharePage() {
@@ -53,48 +41,13 @@ export function SharePage() {
const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle");
const [imageUrl, setImageUrl] = useState<string | null>(null);
const [linkCopied, setLinkCopied] = useState(false);
const [debugLog, setDebugLog] = useState<string[]>([]);
const [canShareToWechat, setCanShareToWechat] = useState(false);
const cardRef = useRef<HTMLDivElement>(null);
const addLog = useCallback((msg: string) => {
console.log('[ShareDebug]', msg);
setDebugLog(prev => [...prev.slice(-15), new Date().toLocaleTimeString() + ' ' + msg]);
useEffect(() => {
setCanShareToWechat(supportsWxMiniProgramShare());
}, []);
// 分享按钮(带调试日志)
const handleShare = useCallback(() => {
setDebugLog([]);
const envInfo = checkEnv();
envInfo.forEach(m => addLog(m));
const w = (window as any).wx;
const mp = w?.miniProgram;
if (!mp) {
addLog('❌ wx.miniProgram 不存在,分享功能不可用');
return;
}
addLog('→ postMessage 发送 share 数据');
mp.postMessage({
data: {
action: 'share',
title: '孕育无忧 · 报告解读',
summary: shareData?.overall_summary || shareData?.emotional_summary || '',
href: window.location.href,
scene: 'WXSceneSession',
}
});
addLog('→ 调用 navigateBack({delta:1})');
mp.navigateBack({
delta: 1,
success: () => addLog('✅ navigateBack 成功'),
fail: (err: any) => addLog('❌ navigateBack 失败: ' + JSON.stringify(err)),
complete: () => addLog('→ navigateBack complete'),
});
}, [addLog, shareData]);
// 复制链接(客户端优先,bridge 降级)
const handleCopyLink = useCallback(async () => {
const shareUrl = `${window.location.origin}/app_03/share/${reportId}`;
@@ -365,27 +318,6 @@ export function SharePage() {
</div>
</div>
{/* 调试面板:点击分享后显示执行步骤 */}
<AnimatePresence>
{debugLog.length > 0 && (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
>
<Card className="bg-yellow-50 border-yellow-300 rounded-2xl p-3">
<div className="flex items-center justify-between mb-2">
<h4 className="font-semibold text-yellow-800 text-sm">🔍 分享调试</h4>
<button onClick={() => setDebugLog([])} className="text-yellow-600 text-xs">关闭</button>
</div>
<div className="bg-black/80 text-green-400 text-xs p-2 rounded-lg font-mono" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all', lineHeight: 1.6 }}>
{debugLog.map((m, i) => <div key={i}>{m}</div>)}
</div>
</Card>
</motion.div>
)}
</AnimatePresence>
{/* 操作提示 */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -417,14 +349,33 @@ export function SharePage() {
{/* 底部固定操作栏 */}
<div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 pb-safe z-10">
<div className="max-w-md mx-auto space-y-3">
{/* 微信分享按钮(仅在 web-view 环境下生效) */}
<Button
onClick={handleShare}
className="w-full h-14 rounded-2xl text-base font-semibold flex items-center justify-center gap-2 bg-[#07C160] hover:bg-[#06AD56] text-white shadow-lg shadow-green-300/30"
>
<Share2 className="w-5 h-5" />
<span>分享给微信好友</span>
</Button>
{/* 微信分享:仅 wx.miniProgram 可用时显示 */}
{canShareToWechat ? (
<Button
onClick={() => bridge.share({
title: '孕育无忧 · 报告解读',
summary: shareData?.overall_summary || shareData?.emotional_summary || '',
href: window.location.href,
scene: 'WXSceneSession',
})}
className="w-full h-14 rounded-2xl text-base font-semibold flex items-center justify-center gap-2 bg-[#07C160] hover:bg-[#06AD56] text-white shadow-lg shadow-green-300/30"
>
<Share2 className="w-5 h-5" />
<span>分享给微信好友</span>
</Button>
) : (
<Card className="bg-blue-50 border-blue-200 rounded-2xl p-4">
<div className="flex items-start gap-3">
<Smartphone className="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" />
<div>
<p className="text-sm font-medium text-blue-700 mb-1">📱 如何分享</p>
<p className="text-xs text-blue-600 leading-relaxed">
长按上方预览图片 → 保存到相册,然后通过微信发送给好友
</p>
</div>
</div>
</Card>
)}
<Button
onClick={handleCopyLink}
className="w-full h-12 rounded-2xl text-sm font-medium flex items-center justify-center gap-2 border-2 border-gray-200 bg-white hover:bg-gray-50 text-gray-600"
@@ -447,7 +398,7 @@ export function SharePage() {
</Button>
<p className="text-center text-xs text-gray-400 mt-2">
分享到微信或保存图片到相册
<span className="ml-2 opacity-40">v26070202</span>
<span className="ml-2 opacity-40">v26070203</span>
</p>
</div>
</div>