Files
tydata-webview-v2/src/composables/useWeixinShare.js
2026-02-25 17:49:30 +08:00

235 lines
8.1 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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,
};
}