jiangwei小站
604 字
3 分钟
微信公众号页面配置分享好友和朋友圈
2024-04-22

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接口列表
  });
};