前言
我们在微信给朋友分享一些网站的时候，如果直接从浏览器复制网页地址，通常是这样的效果：只单纯显示一个链接。
或者是在微信打开网页后点击分享按钮，会显示类似这样的效果：
当我们想要做网站推广时，希望显示的内容更丰富一点，能否显示一些描述和图片呢，就像这样？
当然可以，让我们来看看它的制作方法吧。
一、准备工作
（一）一个已备案的网站
（二）一个已认证企业公众号
如果公众号未经认证，是没有分享权限的，我们可以在开发 -> 接口权限中查看公众号的分享权限是否已经开放
二、公众号设置
（一）首先进入 公众号设置-> 功能设置
在这里，我们需要设置JS接口安全域名，一共可以设置5个
根据提示，需要下载一个txt文件，并放在域名根路径下，如springboot项目则放在static文件夹下，并确保可以访问。
（二）进入 安全中心 -> IP白名单
IP白名单需要设置域名所在服务器的IP地址，可以有多个，使用回车来设置。
（三）获取开发者AppID和AppSecret
进入开发 -> 基本配置 ** 这里可以获取到
注意：开发者密码必须妥善保存，公众号平台不保存密码，如果遗忘，只能重置。
到此，公众号的设置已经完毕，可以进入开发阶段了。
三、开发步骤
公众号开发文档里面的内容比较分散，在这里做一个步骤总结，
（一）获取access_token
公众号和小程序均可以使用AppID和AppSecret调用接口来获取access_token。
https请求方式: GET
https://api./cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
（二）根据已获取到的 access_token 来获取 jsapi_ticket
访问方式：https GET
调用接口：https://api./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./open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问（支持https）：http://res2./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);}});});
