微信网页使用JS-SDK进行分享，无法展示缩略图和标题

溪阳
1,334 阅读4分钟

今天我们公司测试同事跟我说：他把公司的网站分享给别人的时候变成一个链接了，之前他分享出去都是卡片的形式。这是怎么回事？
我：这个链接之前我也分享过呀，分享出去是卡片的形式。
同事：我刚才分享过了，你看。
我看了一下他的手机：还真是，我来看看代码。 我心想：不会是哪天又写了个bug被发现了吧！ wecom-temp-f0ed818ba1a040ba98161ea898b9cbdb.jpg

我们顺便梳理一下如何使用JS-SDK自定义微信分享的缩略图和文本。

1.在公众号内添加JS接口安全域名

搜索微信公众平台，在公众号设置中添加需要使用的域名 image.png

2.引入微信JS-SDK的js

在页面中引入JS文件 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 标准模块加载方法加载

3.通过wx.config注入配置信息

所有需要使用 JS-SDK 的页面必须先注入配置信息，否则无法调用。wx.config 是一个客户端的异步操作。

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

jsApiList 的参数：

  • updateAppMessageShareData 分享给朋友
  • updateTimelineShareData 分享到朋友圈
  • onMenuShareTimeline 分享到朋友圈（老api，即将废弃）
  • onMenuShareAppMessage 分享给朋友（老api，即将废弃）
    还有更多参数，访问微信文档进行查看：developers.weixin.qq.com/doc/offiacc…

4.通过 wx.ready 来确保内部接口正确运行

wx.config 注入配置信息后，会执行 wx.ready 方法。
如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。

自定义”分享到朋友圈“的分享内容

这里我们使用的是wx.updateTimelineShareData，不推荐使用wx.onMenuShareTimeline ，可能突然被微信官方废弃导致分享失效。两者的用法完全相同。

wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
  wx.updateTimelineShareData({ 
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

自定义”分享给朋友“的分享内容

这里也可以使用onMenuShareAppMessage，但不推荐，原因和上面相同。

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

注意：无论你使用的是updateTimelineShareData，还是老的APIonMenuShareTimeline，都需要在wx.config 的 jsApiList 中进行注入。

5.通过wx.error对config失败的情况进行处理

config信息验证失败会执行 error 函数，通常我们不会让 wx.config 失败，因为那样就无法进行后续的分享。但基于防御性编程的原则，我们需要在wx.config 失败时进行一些处理。

wx.error(function(res){
 
});

在我仔细的检查了我的代码，并没有发现问题，于是我去微信开放社区搜索，最终找到了答案。
微信修改了链接管理规范 mp.weixin.qq.com/s/7zxqex8Du… 。
通过点击链接进入后进行分享时，就会展示链接，并不会以缩略图和标题的形式展示。而通过缩略图和标题的卡片形式进入网页后进行分享时，就会以缩略图和标题的形式展示。

解决办法： 想要在分享到朋友圈或者分享给朋友时展示缩略图和标题，

  1. 可以点击链接进入网页，添加到我的收藏中，再从我的收藏中分享；
  2. 把链接转换为二维码，扫码进行网页，然后进行分享；
  3. 从公众号中进入网页进行分享
avatar
文章
阅读
粉丝