增加事件的分享功能
This commit is contained in:
232
src/hooks/useWechatShare.js
Normal file
232
src/hooks/useWechatShare.js
Normal file
@@ -0,0 +1,232 @@
|
||||
// src/hooks/useWechatShare.js
|
||||
// 微信分享 Hook - 支持自动配置右上角分享菜单和显式分享引导
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { getJsSdkConfig } from '@services/miniprogramService';
|
||||
|
||||
/**
|
||||
* 检测是否在微信浏览器中
|
||||
*/
|
||||
const isWechatBrowser = () => {
|
||||
const ua = navigator.userAgent.toLowerCase();
|
||||
return ua.includes('micromessenger');
|
||||
};
|
||||
|
||||
/**
|
||||
* 微信分享 Hook
|
||||
*
|
||||
* @param {Object} options - 分享配置
|
||||
* @param {string} options.title - 分享标题
|
||||
* @param {string} options.desc - 分享描述
|
||||
* @param {string} options.link - 分享链接（默认当前页面）
|
||||
* @param {string} options.imgUrl - 分享图标 URL
|
||||
* @param {boolean} options.autoSetup - 是否自动配置分享（默认 true）
|
||||
*
|
||||
* @returns {Object} 分享状态和方法
|
||||
*/
|
||||
const useWechatShare = (options = {}) => {
|
||||
const {
|
||||
title = '',
|
||||
desc = '',
|
||||
link = '',
|
||||
imgUrl = '',
|
||||
autoSetup = true,
|
||||
} = options;
|
||||
|
||||
const [isReady, setIsReady] = useState(false);
|
||||
const [isInWechat, setIsInWechat] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// 使用 ref 存储最新的分享配置，避免重复初始化
|
||||
const shareConfigRef = useRef({ title, desc, link, imgUrl });
|
||||
const isInitializedRef = useRef(false);
|
||||
|
||||
// 更新 ref 中的配置
|
||||
useEffect(() => {
|
||||
shareConfigRef.current = { title, desc, link, imgUrl };
|
||||
|
||||
// 如果已初始化且配置变化，更新分享内容
|
||||
if (isReady && isInWechat && window.wx) {
|
||||
updateShareData();
|
||||
}
|
||||
}, [title, desc, link, imgUrl, isReady, isInWechat]);
|
||||
|
||||
/**
|
||||
* 更新分享数据
|
||||
*/
|
||||
const updateShareData = useCallback(() => {
|
||||
if (!window.wx || !isReady) return;
|
||||
|
||||
const config = shareConfigRef.current;
|
||||
const shareLink = config.link || window.location.href.split('#')[0];
|
||||
|
||||
// 分享给朋友
|
||||
window.wx.updateAppMessageShareData({
|
||||
title: config.title || document.title,
|
||||
desc: config.desc || '',
|
||||
link: shareLink,
|
||||
imgUrl: config.imgUrl || `${window.location.origin}/logo192.png`,
|
||||
success: () => {
|
||||
console.log('[WechatShare] updateAppMessageShareData 设置成功');
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('[WechatShare] updateAppMessageShareData 失败:', err);
|
||||
}
|
||||
});
|
||||
|
||||
// 分享到朋友圈
|
||||
window.wx.updateTimelineShareData({
|
||||
title: config.title || document.title,
|
||||
link: shareLink,
|
||||
imgUrl: config.imgUrl || `${window.location.origin}/logo192.png`,
|
||||
success: () => {
|
||||
console.log('[WechatShare] updateTimelineShareData 设置成功');
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('[WechatShare] updateTimelineShareData 失败:', err);
|
||||
}
|
||||
});
|
||||
}, [isReady]);
|
||||
|
||||
/**
|
||||
* 初始化微信 JS-SDK
|
||||
*/
|
||||
const initWxSdk = useCallback(async () => {
|
||||
if (isInitializedRef.current || !isInWechat) return;
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// 获取当前页面 URL（不含 hash）
|
||||
const currentUrl = window.location.href.split('#')[0];
|
||||
|
||||
// 获取 JS-SDK 签名配置
|
||||
const config = await getJsSdkConfig(currentUrl);
|
||||
|
||||
if (!config) {
|
||||
throw new Error('获取签名配置失败');
|
||||
}
|
||||
|
||||
// 配置微信 JS-SDK
|
||||
window.wx.config({
|
||||
debug: false, // 生产环境关闭
|
||||
appId: config.appId,
|
||||
timestamp: config.timestamp,
|
||||
nonceStr: config.nonceStr,
|
||||
signature: config.signature,
|
||||
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],
|
||||
});
|
||||
|
||||
// 监听 ready 事件
|
||||
window.wx.ready(() => {
|
||||
console.log('[WechatShare] wx.ready 触发');
|
||||
isInitializedRef.current = true;
|
||||
setIsReady(true);
|
||||
setIsLoading(false);
|
||||
|
||||
// 自动设置分享内容
|
||||
if (autoSetup) {
|
||||
updateShareData();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听 error 事件
|
||||
window.wx.error((err) => {
|
||||
console.error('[WechatShare] wx.error:', err);
|
||||
setError(err.errMsg || '微信 JS-SDK 初始化失败');
|
||||
setIsLoading(false);
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error('[WechatShare] 初始化失败:', err);
|
||||
setError(err.message || '初始化失败');
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [isInWechat, autoSetup, updateShareData]);
|
||||
|
||||
// 检测微信环境并初始化
|
||||
useEffect(() => {
|
||||
const inWechat = isWechatBrowser();
|
||||
setIsInWechat(inWechat);
|
||||
|
||||
if (inWechat && autoSetup) {
|
||||
// 确保 wx 对象已加载
|
||||
if (window.wx) {
|
||||
initWxSdk();
|
||||
} else {
|
||||
// 等待 wx 对象加载
|
||||
const checkWx = setInterval(() => {
|
||||
if (window.wx) {
|
||||
clearInterval(checkWx);
|
||||
initWxSdk();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
// 3秒后停止检查
|
||||
setTimeout(() => clearInterval(checkWx), 3000);
|
||||
}
|
||||
}
|
||||
}, [autoSetup, initWxSdk]);
|
||||
|
||||
/**
|
||||
* 手动触发分享引导
|
||||
* 在微信中会提示用户点击右上角分享
|
||||
* 在非微信环境中可以展示其他分享方式
|
||||
*/
|
||||
const triggerShare = useCallback(() => {
|
||||
if (!isInWechat) {
|
||||
// 非微信环境，可以使用 Web Share API 或复制链接
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: shareConfigRef.current.title || document.title,
|
||||
text: shareConfigRef.current.desc,
|
||||
url: shareConfigRef.current.link || window.location.href,
|
||||
}).catch((err) => {
|
||||
console.log('[WechatShare] Web Share 取消或失败:', err);
|
||||
});
|
||||
} else {
|
||||
// 复制链接到剪贴板
|
||||
const link = shareConfigRef.current.link || window.location.href;
|
||||
navigator.clipboard?.writeText(link).then(() => {
|
||||
console.log('[WechatShare] 链接已复制');
|
||||
});
|
||||
}
|
||||
return { type: 'web', success: true };
|
||||
}
|
||||
|
||||
// 微信环境：无法直接触发分享，返回提示信息
|
||||
return {
|
||||
type: 'wechat',
|
||||
success: true,
|
||||
message: '请点击右上角「...」进行分享',
|
||||
};
|
||||
}, [isInWechat]);
|
||||
|
||||
/**
|
||||
* 手动更新分享配置
|
||||
*/
|
||||
const setShareConfig = useCallback((newConfig) => {
|
||||
shareConfigRef.current = {
|
||||
...shareConfigRef.current,
|
||||
...newConfig,
|
||||
};
|
||||
|
||||
if (isReady && isInWechat) {
|
||||
updateShareData();
|
||||
}
|
||||
}, [isReady, isInWechat, updateShareData]);
|
||||
|
||||
return {
|
||||
isReady, // JS-SDK 是否就绪
|
||||
isInWechat, // 是否在微信浏览器中
|
||||
isLoading, // 是否正在加载
|
||||
error, // 错误信息
|
||||
triggerShare, // 触发分享引导
|
||||
setShareConfig, // 手动更新分享配置
|
||||
updateShareData, // 手动更新分享数据到微信
|
||||
};
|
||||
};
|
||||
|
||||
export default useWechatShare;
|
||||
Reference in New Issue
Block a user