604 字
3 分钟
微信公众号页面配置分享好友和朋友圈
spa 页面,需要保持初始链接出给后台生成 config
index.html
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
app.vue
sessionStorage.setItem("firstUrl", location.href);
exchage.vue
import { wxConfig } from "@/utils/Jssdk";
apiJssdk().then((res: any) => {
const data = JSON.parse(res);
wxConfig(
data,
useUserStore().userInfo.user_info?.nickname || "",
useUserStore().userInfo.user_info?.uid || ""
);
});
// jssdk配置
const apiJssdk = (): Promise<any> => {
return httpGet("api/jssdk", {
// url: isIOS() ? sessionStorage.getItem("firstUrl") : location.href,
url: sessionStorage.getItem("firstUrl"),
href,
});
};
Jssdk.ts
import { getImgUrl } from "./Util";
export const wxConfig = (data: any, nickname: string, uid: string) => {
console.log(nickname, uid, data);
(window as any).wx.ready(function () {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
console.log("wx ready");
(window as any).wx.updateAppMessageShareData({
title: nickname + "送你30分钟蒸好玩云游戏时长", // 分享标题
desc: "蒸好玩云游戏,每日免费游玩18小时,3A大作立即开玩", // 分享描述
link: location.origin + "/mobileLogin?inviteCode=" + uid, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: getImgUrl("common/logo.jpg"), // 分享图标
success: function () {
// 设置成功
console.log("AppMessage success");
},
});
(window as any).wx.updateTimelineShareData({
title: nickname + "送你30分钟蒸好玩云游戏时长",
link: location.origin + "/mobileLogin?inviteCode=" + uid, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: getImgUrl("common/logo.jpg"), // 分享图标
success: function () {
// 设置成功
console.log("Timeline success");
},
});
});
(window as any).wx.error(function (error: any) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
console.log("wx err", error);
});
(window as any).wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: data.jsApiList, // 必填,需要使用的JS接口列表
});
};