H5页面 微信转发自定义缩略图和描述信息（调用微信jssdk）

先决条件：

1. 首先配置公众号
2. JS接口安全域名
3. 设置ip白名单

JS-SDK说明文档

1. 在微信公众号里，拿到APPID和秘钥（APPSECRET），后台根据这两个值获取access_token
   获取Access token
2. 通过access_token，向后台获取jsapi_ticket
   调用微信接口： https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
3. 定义noncestr和timestamp
4. 把jsapi_ticket和noncestr和timestamp和url合成生成签名signature
5. index.html 引入js

自定义展示内容

// url可以通过url = window.location.href来获取
let shareContent = {
  title: "XXX",
  link: "XXX",
  imgUrl: "XXX", // 此处链接最好使用公网直接可访问的
  desc: "测试体验～～",
};

配置方法

function wxConfig(jsapi_ticket) {
  var noncstr = Math.random().toString(36).substr(2, 15);
  var timestamp = parseInt(new Date().getTime() / 1000) + "";
  var signature = calcSignature(jsapi_ticket, noncstr, timestamp, pageurl);
  wx.config({
    debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
    appId: APPID, // 必填，公众号的唯一标识
    timestamp: timestamp, // 必填，生成签名的时间戳
    nonceStr: noncstr, // 必填，生成签名的随机串
    signature: signature, // 必填，签名
    jsApiList: [
      "updateTimelineShareData",
      "updateAppMessageShareData",
      "onMenuShareWeibo",
    ], // 必填，需要使用的 JS 接口列表
  });

  wx.ready(function () {
    // 分享到朋友圈及qq空间
    wx.updateTimelineShareData({
      title: shareContent.title,
      link: shareContent.link,
      imgUrl: shareContent.imgUrl,
      success: function (res) {
        console.log("用户分享朋友圈成功了:", res);
        //监听转发成功的回调函数
      },
    });

    // 分享到好友及qq
    wx.updateAppMessageShareData({
      title: shareContent.title,
      desc: shareContent.desc,
      link: shareContent.link,
      imgUrl: shareContent.imgUrl,
      success: function () {
        // 设置成功
      },
    });
    // 分享到腾讯微博
    wx.onMenuShareWeibo({
      title: shareContent.title,
      desc: shareContent.desc,
      link: shareContent.link,
      imgUrl: shareContent.imgUrl,
      success: function () {
        // 用户确认分享后执行的回调函数
      },
    });
  });
}

签名

function calcSignature(ticket, noncestr, timestamp, url) {
  var str =
    "jsapi_ticket=" +
    ticket +
    "&noncestr=" +
    noncestr +
    "×tamp=" +
    timestamp +
    "&url=" +
    url;
  return sha1(str);
}

sha1

// 字符串加密成 hex 字符串
function sha1(s) {
  var data = new Uint8Array(encodeUTF8(s));
  var i, j, t;
  var l = (((data.length + 8) >>> 6) << 4) + 16,
    s = new Uint8Array(l << 2);
  s.set(new Uint8Array(data.buffer)), (s = new Uint32Array(s.buffer));
  for (t = new DataView(s.buffer), i = 0; i < l; i++)
    s[i] = t.getUint32(i << 2);
  s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
  s[l - 1] = data.length << 3;
  var w = [],
    f = [
      function () {
        return (m[1] & m[2]) | (~m[1] & m[3]);
      },
      function () {
        return m[1] ^ m[2] ^ m[3];
      },
      function () {
        return (m[1] & m[2]) | (m[1] & m[3]) | (m[2] & m[3]);
      },
      function () {
        return m[1] ^ m[2] ^ m[3];
      },
    ],
    rol = function (n, c) {
      return (n << c) | (n >>> (32 - c));
    },
    k = [1518500249, 1859775393, -1894007588, -899497514],
    m = [1732584193, -271733879, null, null, -1009589776];
  (m[2] = ~m[0]), (m[3] = ~m[1]);
  for (i = 0; i < s.length; i += 16) {
    var o = m.slice(0);
    for (j = 0; j < 80; j++)
      (w[j] =
        j < 16
          ? s[i + j]
          : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1)),
        (t =
          (rol(m[0], 5) + f[(j / 20) | 0]() + m[4] + w[j] + k[(j / 20) | 0]) |
          0),
        (m[1] = rol(m[1], 30)),
        m.pop(),
        m.unshift(t);
    for (j = 0; j < 5; j++) m[j] = (m[j] + o[j]) | 0;
  }
  t = new DataView(new Uint32Array(m).buffer);
  for (var i = 0; i < 5; i++) m[i] = t.getUint32(i << 2);

  var hex = Array.prototype.map
    .call(new Uint8Array(new Uint32Array(m).buffer), function (e) {
      return (e < 16 ? "0" : "") + e.toString(16);
    })
    .join("");

  return hex;
}