微信分享第三方网页链接自定义标题、描述、图片

前言

我们在微信给朋友分享一些网站的时候，如果直接从浏览器复制网页地址，通常是这样的效果：只单纯显示一个链接。

或者是在微信打开网页后点击分享按钮，会显示类似这样的效果：

当我们想要做网站推广时，希望显示的内容更丰富一点，能否显示一些描述和图片呢，就像这样？

当然可以，让我们来看看它的制作方法吧。

一、准备工作

（一）一个已备案的网站

（二）一个已认证企业公众号

如果公众号未经认证，是没有分享权限的，我们可以在开发 -> 接口权限中查看公众号的分享权限是否已经开放

二、公众号设置

（一）首先进入公众号设置-> 功能设置

在这里，我们需要设置JS接口安全域名，一共可以设置5个

根据提示，需要下载一个txt文件，并放在域名根路径下，如springboot项目则放在static文件夹下，并确保可以访问。

（二）进入安全中心 -> IP白名单

IP白名单需要设置域名所在服务器的IP地址，可以有多个，使用回车来设置。

（三）获取开发者AppID和AppSecret

进入开发 -> 基本配置 **

这里可以获取到开发者ID（AppID）和开发者密码（Appsecret）**

注意：开发者密码必须妥善保存，公众号平台不保存密码，如果遗忘，只能重置。

到此，公众号的设置已经完毕，可以进入开发阶段了。

三、开发步骤

公众号开发文档里面的内容比较分散，在这里做一个步骤总结，

（一）获取access_token

公众号和小程序均可以使用AppID和AppSecret调用接口来获取access_token。

https请求方式: GET

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

（二）根据已获取到的 access_token 来获取 jsapi_ticket

访问方式：https GET

调用接口：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

(三)根据获取到的ticket 来生成签名

1.签名四要素：

**1.随机字符串noncestr：**使用代码生成随机的字符串大小写数字混合

2.时间戳timestamp： 可以使用当前时间的时间戳，即毫秒数，

**3.需要用于转发的链接url：**哪个网页需要用于发送，则填写哪个网页的链接，一般由网页window.location.href直接获取

**4.jsapi_ticket:**根据access_token获取到的jsapi_ticket。

2.将4要素按照 jsapi_ticket 、noncestr、timestamp、url的顺序进行拼接组成一个新的字符串。

3.将拼接完成的字符串进行sha1加密，即可获取到签名signature. 具体步骤如下图：

注：生成的随机字符串和时间戳要记得保存后面还要使用。

(四)在网页上通过wx.config进行配置。

1.在网页上引入JS文件

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

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

2.通过config接口注入权限验证配置

将步骤（三）中获取到的noncestr、timestamp、signature进行配置

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

注1：还有一个分享接口是onMenuShareWeibo，用于分享到微博,可根据需要自行添加。

注2：微信开发文档提示：onMenuShareQQ（分享到QQ）、onMenuShareAppMessage(分享到朋友)、onMenuShareTimeline（分享到朋友圈）三个独立接口即将废弃，请勿使用。

3.通过ready接口处理成功验证

以分享给朋友及QQ接口****和分享到朋友圈及分享到QQ空间接口**为例：

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

4.通过error接口处理失败验证

wx.error(function(res){ //可以省略。// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

5.完整实例代码如下

该代码用于特定网页，当然也可以封装成公共方法进行调用。

$(function(){//加载jsTicket，此处的loadWxJsSignature访问springboot的controller，access_token、jsapi_ticket、随机字符串、时间戳、签名均由服务器获取或生成，并通过AJAX方法传递到前端。$.get("/loadWxJsSignature",{url:window.location.href},function(resultdata){if(resultdata.errcode == 0){//ok console.log("signature：ok");let appId = resultdata.result.appId;let noncestr = resultdata.result.noncestr;let timestamp = resultdata.result.timestamp;let signature = resultdata.result.signature;//wx配置wx.config({debug: false,appId: appId,timestamp: timestamp,nonceStr: noncestr,signature: signature,jsApiList: [                        'updateTimelineShareData', //自定义分享到朋友圈及QQ空间按钮'updateAppMessageShareData'//自定义发送给朋友及QQ好友按钮]});wx.ready(function () {   //需在用户可能点击分享按钮前就先调用wx.updateAppMessageShareData({ title: '此处填写分享标题', // 分享标题desc: '此处填写描述，最多支持显示32个中文，多的会显示省略号', // 分享描述link: '此处填写网页链接', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '此处填写用于显示的图标链接', // 分享图标success: function () {// 设置成功}});wx.updateTimelineShareData({ title: '此处填写分享标题', // 分享标题link: '此处填写网页链接', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '此处填写用于显示的图标链接', // 分享图标success: function () {// 设置成功}})});  }else{console.log("signature:" + resultdata.errcode);console.log("signature:" + resultdata.errmsg);}});
});