记录h5设置朋友圈和朋友分享的
微信官方地址 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
第一步绑定域名那些不说了，都一样。
讲讲我这次不同的，因为我是ssr开发，所以和一般的客户端项目略微不同。
写了个引入 的方法
function loadWechatSDK() {
return new Promise((resolve, reject) => {
if (document.getElementById("weixin-sdk")) {
resolve();
return;
}
const script = document.createElement("script");
script.id = "weixin-sdk";
script.src = "https://res.wx.qq.com/open/js/jweixin-1.6.0.js";
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
我尝试直接script和在nuxt.config.js中head引入这个微信sdk文件均无效，所一用了上述写法
onMounted(async () => {
try {
// 加载微信 JS-SDK
await loadWechatSDK();
// 获取微信配置
let href = location.href.split("#")[0];
shareInfo.value.url = href;
// 后端配置生成的签名信息接口
const { data: wechatConfig } = await getShareSignNewApi({ url: href });
const wxData = JSON.parse(wechatConfig);
// console.log("🚀 ~ onMounted ~ wxData:", wxData);
wxAppletData.value = wxData;
// 初始化微信 JS-SDK
wx.config({
debug: false, // 开启调试模式
appId: wxData.appId,
timestamp: wxData.timestamp,
nonceStr: wxData.nonceStr,
signature: wxData.signature,
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
});
wx.ready(function () {
// console.log("wx.ready");
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
wx.updateAppMessageShareData({
title: shareInfo.value.title, // 分享标题
desc: shareInfo.value.desc, // 分享描述
link: shareInfo.value.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:
"https://chb-site-img.oss-cn-shenzhen.aliyuncs.com/2024/01/11/11111111111_20240111175346A001.png", // 分享图标
success: function () {
// 设置成功
},
});
wx.updateTimelineShareData({
title: shareInfo.value.title, // 分享标题
link: shareInfo.value.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:
"https://chb-site-img.oss-cn-shenzhen.aliyuncs.com/2024/01/11/11111111111_20240111175346A001.png", // 分享图标
success: function () {
// 设置成功
console.log("朋友圈配置成功");
},
});
});
wx.error(function (res) {
console.log("微信分享错误信息", res);
});
} catch (error) {
console.log("🚀 ~ onMounted ~ error:", error);
}
});
这次遇到两个点，第一个就是引入问题，ssr不能用常规那种导入方法或者npm，反正我用npm是没效的。
第二个是h5不支持自定义唤起微信分享。所以上述配置顶多算个配置了微信分享的图标和title以及描述等；也就是微信内部打开网页，然后右上角三个点打开自带的微信分享配置而已。
