微信分享自定义图文链接

时隔多年，再次做这个需求时，又被绕了一大圈（其实主要是后台没做过呀），故总结在此：

效果如下：

1、微信自带的公众号文章分享时效果如下：

 2、微信服务号链接自己的域名地址默认分享时是这样的：

 

 所以需求就来了，要求咱们自己开发的项目分享时也要有上面的效果。。

 准备工作：

1、用来绑定的微信公众号必须是已认证的

2、链接地址必须是域名，并且是备案过的。（当然就得需要服务器了）

配置工作：

1、JS接口安全域名（不然前端配分享时会报错 config:invalid url domain）

进入微信公众平台-->设置与开发-->公众号设置-->功能设置-->功能设置-->

JS接口安全域名,按照里面的要求设置完成后如下图：

 2、IP白名单（获取access_token 时会验证）

 代码块：

1、获取access_token和jsapi_ticket

根据官方文档https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html ，获取到后自行缓存，然后根据access_token获取jsapi_ticket

2、返回前端所需参数（signature, appId, timestamp, noncestr）

这部分后台代码官方有各版本的 示例代码，官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html，

然后生成的签名signature可在https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 进行验证，是否和这里生成的一致

3、前端引入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 标准模块加载方法加载

4、前端通过config接口注入权限验证配置

wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: noncestr, // 必填，生成签名的随机串
        signature: signature, //必填，签名
        jsApiList: [
          // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          'checkJsApi',//checkJsApi接口是客户端6.0.2新引入的一个预留接口，第一期开放的接口均可不使用checkJsApi来检测。
          'onMenuShareAppMessage', //获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
          'onMenuShareTimeline', //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
          'onMenuShareQQ',//获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
          'updateAppMessageShareData',//自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
          'updateTimelineShareData'//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
        ]
      })

 5、前端配置分享信息并通过ready接口处理

// 判断当前客户端版本是否支持指定JS接口
wx.checkJsApi({
	jsApiList: [
		'onMenuShareAppMessage',
		'onMenuShareTimeline',
		'onMenuShareQQ',
		'onMenuShareQZone',
		'updateAppMessageShareData',
		'updateTimelineShareData'
	], // 需要检测的JS接口列表，所有JS接口列表见附录2,
	success: function(res) {
		console.log(JSON.stringify(res));
		// 以键值对的形式返回，可用的api值true，不可用为false
		// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
	}
});
let shareConfig = {
	"imgUrl": "http://www.yourwebsite.com/share.png", //分享图，默认当相对路径处理，所以使用绝对路径的的话，“http://”协议前缀必须在。
	"desc": "你对页面的描述", //摘要,如果分享到朋友圈的话，不显示摘要。
	"title": '分享卡片的标题', //分享卡片标题
	"link": window.location.href, //分享出去后的链接，这里可以将链接设置为另一个页面。
	"success": function() { //分享成功后的回调函数
	},
	'cancel': function() {
		// 用户取消分享后执行的回调函数
	}
}
wx.ready(function() {
	wx.onMenuShareAppMessage(shareConfig);
	wx.onMenuShareTimeline(shareConfig);
	wx.onMenuShareQQ(shareConfig);
	wx.onMenuShareQZone(shareConfig);
	wx.updateAppMessageShareData(shareConfig);
	wx.updateTimelineShareData(shareConfig);
});