fix: 鸿蒙环境兼容 — wx.miniProgram 不可用时隐藏分享给微信好友改为引导卡片
- SharePage 首次渲染时检测 wx.miniProgram 是否可用 - 可用 → 显示绿色分享给微信好友按钮(bridge.share 流程) - 不可用(鸿蒙等) → 显示蓝色引导卡片长按图片保存到相册,微信发送给好友 - 移除调试面板,恢复简洁 UI
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user