h5 页面实现微信分享配置，可以展示配置的 title, 描述，和截图

步骤一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS 接口安全域名”。

备注：

• 登录后可在“开发者中心”查看对应的接口权限。
• 填写的域名须通过 ICP 备案的验证。
• 下载验证文件放到服务器项目根目录中

步骤二：引入 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 （支持 https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

script: [
        {
          // 分享
          src: "//res.wx.qq.com/open/js/jweixin-1.6.0.js",
          type: "text/javascript",
          charset: "utf-8",
        },
      ],

步骤三：通过 config 接口注入权限验证配置
所有需要使用 JS-SDK 的页面必须先注入配置信息，否则将无法调用（同一个 url 仅需调用一次，对于变化 url 的 SPA 的 web app 可在每次 url 变化时进行调用,目前 Android 微信客户端不支持 pushState 的 H5 新特性，所以使用 pushState 来实现 web app 的页面会导致签名失败，此问题会在 Android6.2 中修复）

wechatParam(this.$axios) // 获取微信分享配置
        .then((res) => {})
        .catch((res) => {
          wx.config({
            debug: false,
            appId: res.appid,
            timestamp: res.timestamp,
            nonceStr: res.nonceStr,
            signature: res.signature,
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
          });

          wx.checkJsApi({
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function (res) {
              console.log(res, "checkJsApi");
            },
            fail: function (res) {
              console.log(res, "fail");
            },
            complete: function (res) {
              console.log(res, "complete");
            },
          });
          //分享给朋友
          wx.ready(function () {
            //需在用户可能点击分享按钮前就先调用
            var shareData = {
              title: "2020钢易通金属加工行业交流大会", // 分享标题
              desc: "12月19日13:00-17:00 诚邀您参加",
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl:
                "https://gangyi-h5.oss-cn-hangzhou.aliyuncs.com/img/activity/icon.jpg", // 分享图标
              success: function (res) {
                // 设置成功
                console.log(res, "success");
              },
              fail: function (res) {
                console.log(res, "fail");
              },
              complete: function (res) {
                console.log(res, "complete");
              },
            };

            wx.updateAppMessageShareData(shareData); //分享给好友
            wx.updateTimelineShareData(shareData); //分享到朋友圈
            // wx.onMenuShareQQ(shareData); //分享给手机QQ
            // wx.onMenuShareQZone(shareData); //分享到QQ空间
          });
          wx.error(function (res) {
            console.log(res);
          });
        });

分享设置规范

• 分享标题：20 字以内，会分两行展示。
• 分享图标：建议比例 1:1，可以自动适配
• 分享描述：20 字以内，对标题的简要解读，会分两行展示。

总结

以前引用的 1.4.0 的 api 后面可能会停止维护，所以建议直接使用 1.6.0 。

存在的问题

• qq 内部的分享配置没生效 qq 有自己的分享 api qq 分享官方文档
• 可以优化配置为全局方法

具体信息可以查看微信分享官方文档