node.js实现网页分享到朋友圈显示缩略图和描述

前言

在微信里，我们看到别人分享的一些文章或者网页，常常是下面这个样子，有标题、描述和缩略图

当我们把自己网站的网页分享给朋友或者分享到朋友圈的时候，却是下面这个样子

这是因为微信在2017年的时候设置了微信分享只能通过微信的分享接口来实现缩略图和描述的显示！
那如何实现网页分享到微信朋友圈显示缩略图和描述呢？

首先你需要有一个微信公众号

登录微信公众平台进入“公众号设置”>“功能设置”填写“JS接口安全域名”，这个JS安全域名就是你网站的域名

当然这个域名不是你想加上就可以直接加的，如下

你需要把认证文件下载下来，上传到你填写域名的服务器根目录下，保证以 你的域名/MP_verify_amj0glZrfjJFsJ1j.txt可以访问到这个文件，就可以保存了。

获取开发者id、开发者密码和设置IP白名单

”开发“>“基本配置”如下,点击启用，需要公众号的管理员扫描二维码进行身份确认，账号密码确认之后，就可以获取到开发者密码了，复制保存好“AppSecret”，微信平台不会对这个开发者密码进行保存，忘记只能重置

然后可以设置ip白名单，设置的ip可以调用微信接口 至此我们的准备工作就已经做好了。

在项目中调用微信接口

我的项目后台是node.js写的，koa框架，可以很方便地使用wechat-jssdk库来实现接口调用
安装

npm install wechat-jssdk --save

使用

const {Wechat} = require('wechat-jssdk');
const wx = new Wechat({
  "wechatRedirectUrl": "http://yourdomain.com/wechat/oauth-callback",
  "appId": "appid",
  "appSecret": "app_secret",
});

前台调用的接口以获取验证签名,

export default class WeChat {
    @get('/signature')
    public async query(ctx: Koa.Context) {
        ctx.body = await wx.jssdk.getSignature(ctx.request.query.url);
    }
}

前台调用

在需要调用JS接口的页面引入如下JS文件，（支持https）：res.wx.qq.com/open/js/jwe… 通过config接口注入权限验证配置，

const config = {
  //前4个是微信验证签名必须的参数，为上面 '/signature' 从node端获取的结果
  'appId': 'xxx',
  'nonceStr': 'xxx',
  'signature': 'xxx',
  'timestamp': 'xxx',
  'debug': true, //开启 debug 模式
  'jsApiList': ['updateAppMessageShareData', 'updateTimelineShareData'], //必填，列出需要使用的JS接口列表
}
wx.config(config);

通过ready接口处理成功验证

 wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后
  //自定义“分享给朋友”及“分享到QQ”按钮的分享内容
  wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享缩略图
    success: function (){},
    cancel: function (){}
  }),
  //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
  wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享缩略图
    success: function (){},
    cancel: function (){}
},
});

至此就可以实现网页分享到微信朋友圈显示缩略图和描述了！ 更多功能可以查看微信官方文档