微信分享链接自定义标题、描述信息和图片

在微信分享之后，默认的样子是如下：

默认样式

我们希望得到的样子是这样：

希望样式

那么如何实现，现在记录一下。

1.绑定安全域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，这里的安全域名是你的要分享的H5的域名。
备注：登录后可在“开发者中心”查看对应的接口权限。

2.引入微信JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js

3.在需要被分享的地方调用wx.config方法，将配置传过去


wx.config({
  debug:true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId:'',// 必填，公众号的唯一标识
  timestamp:,// 必填，生成签名的时间戳
  nonceStr:'',// 必填，生成签名的随机串
  signature:'',// 必填，签名
  jsApiList:[]// 必填，需要使用的JS接口列表
});

其中jsApiList一般为：

const wxJsApiList = [ // 需要使用的JS接口列表
    "onMenuShareTimeline", //朋友圈
    "onMenuShareAppMessage", //微信朋友
    "onMenuShareQQ", // QQ
    "onMenuShareWeibo", //微博
    "onMenuShareQZone" //QQ空间
  ];

4.获取权限数据

那么其他配置参数如何获取呢，接下来就是最重要的获取微信签名、随机串之类的数据了
具体方法微信也给了指南，贴链接
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#61

5.设置分享内容

接着就可以自定义你的分享标题和描述信息、图片之类的了，首先定义一下你要自定义的分享信息：

var shareAppMessage = {
    title:"分享标题",
    desc: "分享描述",
    link: "分享的H5链接",
    imgUrl: "分享的图片链接",
    success() {
      console.log("分享成功")
    }
  }

6.接下来调用wx.ready：

wx.ready(function () {
      wx.checkJsApi({
        jsApiList: wxJsApiList,
        success(res) {
          console.log("checkJsApi: " + JSON.stringify(res));
        }
      })
      wx.onMenuShareTimeline(shareAppMessage);
      wx.onMenuShareAppMessage(shareAppMessage);
      wx.onMenuShareQQ(shareAppMessage);
      wx.onMenuShareWeibo(shareAppMessage);
      wx.onMenuShareQZone(shareAppMessage);
    })

再分享你的链接试试看，就大功告成了

最后编辑于：2020.09.29 15:36:20