235 lines
8.1 KiB
JavaScript
235 lines
8.1 KiB
JavaScript
import { ref } from "vue";
|
||
import { useEnv } from "./useEnv";
|
||
|
||
export function useWeixinShare() {
|
||
const { isWeChat } = useEnv();
|
||
const wxConfigReady = ref(false);
|
||
const signMap = new Map(); // 存储各个链接的签名信息
|
||
|
||
/**
|
||
* 从后端获取签名信息
|
||
* @param {string} url - 需要签名的URL
|
||
* @returns {Promise} 签名信息
|
||
*/
|
||
const getWxSignature = async (url) => {
|
||
try {
|
||
const { data, error } = await useApiFetch("/wechat/getSignature")
|
||
.post({ url })
|
||
.json();
|
||
|
||
if (error.value || data.value?.code !== 200) {
|
||
console.error("获取微信签名失败:", error.value || data.value);
|
||
return null;
|
||
}
|
||
|
||
return data.value.data;
|
||
} catch (err) {
|
||
console.error("获取微信签名异常:", err);
|
||
return null;
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 配置微信SDK
|
||
* @param {Object} signature - 签名信息
|
||
* @param {Object} shareConfig - 分享配置
|
||
*/
|
||
const wxConfigJSSDK = (signature, shareConfig) => {
|
||
const { title, desc, link, imgUrl } = shareConfig;
|
||
|
||
window.jWeixin.config({
|
||
debug: false, // 生产环境设为false,开发时可设为true查看错误
|
||
appId: signature.appId,
|
||
timestamp: signature.timestamp,
|
||
nonceStr: signature.nonceStr,
|
||
signature: signature.signature,
|
||
jsApiList: [
|
||
"updateAppMessageShareData",
|
||
"updateTimelineShareData",
|
||
"onMenuShareAppMessage",
|
||
"onMenuShareTimeline",
|
||
],
|
||
});
|
||
|
||
window.jWeixin.ready(() => {
|
||
console.log("微信SDK配置成功");
|
||
|
||
const shareData = {
|
||
title,
|
||
desc,
|
||
link,
|
||
imgUrl,
|
||
};
|
||
|
||
// 新版分享接口 - 分享给朋友
|
||
window.jWeixin.updateAppMessageShareData({
|
||
...shareData,
|
||
success: function (res) {
|
||
console.log("分享给朋友配置成功", res);
|
||
},
|
||
fail: function (err) {
|
||
console.error("分享给朋友配置失败", err);
|
||
},
|
||
});
|
||
|
||
// 新版分享接口 - 分享到朋友圈
|
||
window.jWeixin.updateTimelineShareData({
|
||
...shareData,
|
||
success: function (res) {
|
||
console.log("分享到朋友圈配置成功", res);
|
||
},
|
||
fail: function (err) {
|
||
console.error("分享到朋友圈配置失败", err);
|
||
},
|
||
});
|
||
|
||
// 兼容旧版微信 - 分享给朋友
|
||
window.jWeixin.onMenuShareAppMessage({
|
||
...shareData,
|
||
success: function (res) {
|
||
console.log("分享给朋友成功", res);
|
||
},
|
||
fail: function (err) {
|
||
console.error("分享给朋友失败", err);
|
||
},
|
||
cancel: function () {
|
||
console.log("用户取消分享");
|
||
},
|
||
});
|
||
|
||
// 兼容旧版微信 - 分享到朋友圈
|
||
window.jWeixin.onMenuShareTimeline({
|
||
...shareData,
|
||
success: function (res) {
|
||
console.log("分享到朋友圈成功", res);
|
||
},
|
||
fail: function (err) {
|
||
console.error("分享到朋友圈失败", err);
|
||
},
|
||
cancel: function () {
|
||
console.log("用户取消分享");
|
||
},
|
||
});
|
||
|
||
wxConfigReady.value = true;
|
||
});
|
||
|
||
window.jWeixin.error((res) => {
|
||
console.error("微信SDK配置失败:", res);
|
||
// 常见错误:
|
||
// 1. invalid url domain - 当前域名未在公众号后台配置
|
||
// 2. invalid signature - 签名错误
|
||
// 3. permission denied - 没有权限使用该接口
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 配置微信分享
|
||
* @param {Object} shareConfig - 分享配置
|
||
* @param {string} shareConfig.title - 分享标题
|
||
* @param {string} shareConfig.desc - 分享描述
|
||
* @param {string} shareConfig.link - 分享链接
|
||
* @param {string} shareConfig.imgUrl - 分享图标URL
|
||
*/
|
||
const configWeixinShare = async (shareConfig = {}) => {
|
||
console.log("configWeixinShare", shareConfig);
|
||
console.log("isWeChat", isWeChat.value);
|
||
console.log("window.jWeixin", window.jWeixin);
|
||
// 只在微信环境中配置
|
||
if (!isWeChat.value || !window.jWeixin) {
|
||
console.log("非微信环境或微信SDK未加载");
|
||
return;
|
||
}
|
||
|
||
const defaultConfig = {
|
||
title: "天远数据_背调报告代理加盟_个人风控系统搭建_合规数据服务平台",
|
||
desc: "提供个人信用评估、人事背调、信贷风控、企业风险监测等服务",
|
||
link: window.location.href.split("#")[0], // 获取当前页面URL,不包括hash
|
||
imgUrl: "https://www.tianyuandb.com/logo.jpg",
|
||
};
|
||
|
||
const config = { ...defaultConfig, ...shareConfig };
|
||
|
||
// 获取当前页面的完整URL(不包括hash)
|
||
const currentUrl = window.location.href.split("#")[0];
|
||
|
||
// 检查是否已有该URL的签名
|
||
if (signMap.has(currentUrl)) {
|
||
console.log("使用缓存的签名信息");
|
||
wxConfigJSSDK(signMap.get(currentUrl), config);
|
||
return;
|
||
}
|
||
|
||
// 从后端获取签名
|
||
console.log("正在获取微信签名...");
|
||
const signature = await getWxSignature(currentUrl);
|
||
|
||
if (!signature) {
|
||
console.error("获取微信签名失败,无法配置分享");
|
||
return;
|
||
}
|
||
|
||
// 缓存签名信息
|
||
signMap.set(currentUrl, signature);
|
||
|
||
// 配置微信SDK
|
||
wxConfigJSSDK(signature, config);
|
||
};
|
||
|
||
/**
|
||
* 动态更新分享配置
|
||
* @param {Object} shareConfig - 分享配置
|
||
*/
|
||
const updateShareConfig = (shareConfig) => {
|
||
configWeixinShare(shareConfig);
|
||
};
|
||
|
||
/**
|
||
* 根据当前页面动态设置分享内容
|
||
*/
|
||
const setDynamicShare = async () => {
|
||
const route = window.location.pathname;
|
||
let shareConfig = {};
|
||
|
||
// 根据不同的路由设置不同的分享内容
|
||
if (route.includes("/example")) {
|
||
shareConfig = {
|
||
title: "天远数据 - 大数据风险报告示例",
|
||
desc: "查看完整的大数据风险报告示例,了解个人信用评估等服务",
|
||
link: window.location.href.split("#")[0],
|
||
imgUrl: "https://www.tianyuandb.com/logo.jpg",
|
||
};
|
||
} else if (route.includes("/agent")) {
|
||
shareConfig = {
|
||
title: "天远数据 - 免费开通代理权限",
|
||
desc: "免费开通代理权限,享受大数据风险报告查询服务代理收益",
|
||
link: window.location.href.split("#")[0],
|
||
imgUrl: "https://www.tianyuandb.com/logo.jpg",
|
||
};
|
||
} else if (route.includes("/help")) {
|
||
shareConfig = {
|
||
title: "天远数据 - 帮助中心",
|
||
desc: "详细的使用指南、常见问题解答、操作教程",
|
||
link: window.location.href.split("#")[0],
|
||
imgUrl: "https://www.tianyuandb.com/logo.jpg",
|
||
};
|
||
} else {
|
||
shareConfig = {
|
||
title: "天远数据_背调报告代理加盟_个人风控系统搭建_合规数据服务平台",
|
||
desc: "提供个人信用评估、人事背调、信贷风控、企业风险监测等服务",
|
||
link: window.location.href.split("#")[0],
|
||
imgUrl: "https://www.tianyuandb.com/logo.jpg",
|
||
};
|
||
}
|
||
|
||
await configWeixinShare(shareConfig);
|
||
};
|
||
|
||
return {
|
||
wxConfigReady,
|
||
configWeixinShare,
|
||
updateShareConfig,
|
||
setDynamicShare,
|
||
};
|
||
}
|