版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/fifteen718/article/details/81129958
一、需求描述
如图，图1是其它游戏分享链接的显示效果（前提是在微信中打开并分享出去），图2是我们游戏页面（同样在微信中打开并分享出去）分享链接的显示效果。
要达到图1的自定义文案与图标的效果，经研究与各种尝试，得到的最佳解决方案为采用微信提供的JS-SDK，微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
二、解决方案
1、如图，根据微信JS-SDK的接口文档说明，首先需要有一个为认证号的企业号，这样才有权限调用分享接口。
2、如图，绑定域名，登录微信公众平台，进入“公众号设置”的功能设置里面填写js接口安全域名，这个是要填写的是你微信浏览器要打开的域名地址。不能添加IP地址。
3、前端注入js，并调用jssdk所提供的分享接口，其中需要后端提供一个接口服务来实现生成签名等必要的参数（ timestamp, noceStr,singature）。
// 微信分享链接自定义
const head = document.head
const script = document.createElement('script')
script.src = 'https://res.wx.qq.com/open/js/jweixin-1.0.0.js'
head.appendChild(script)
var thisUrl = window.location.href
rootState.http.post(SIGN_WECHAT_JS_SDK, {url: thisUrl}).then((res) => {
if (res.code === '200' && res.data && wx) {
// res.data = {
// "noncestr":"fb5e70b3-d065-4a61-b",
// "jsapi_ticket":"kgt8ON7yVITDhtdwci0qeXRbC6q_7G2lYHoLfD0A3G4YCppaM5umcoE7ZhFGHIT-5cnzUJ4c5Y6ba_mu4sHNbA",
// "timestamp":1531825770,
// "url":"http://cat.youximao.tv/view/gamePage/1529489187009439/2403296/detail",
// "signature":"4d643a79184a95aecf9d24051f7c1cdf99b52ff2",
// "appId":"wx91f15555be5d81f8"
// }
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.appId, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.noncestr, // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名
jsApiList: [
"onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareQZone"
] // 必填，需要使用的JS接口列表
})
// 自定义文案及图片
var title = data.gameDetail.gameName
var link = thisUrl
var imgUrl = data.gameDetail.icon1
var desc = data.gameDetail.gameSummary
wx.ready(function () {
wx.onMenuShareTimeline({
title: title, // 分享标题
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
wx.onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
wx.onMenuShareQZone({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
})
}
}).catch((error) => {
// alert('SIGN_WECHAT_JS_SDK is error')
// commit(SHOW_ERROR_TOAST, error)
})具体实现请参考：网页分享到微信自定义标题，内容和图片
4、参阅资料
JS-SDK文档：微信JS-SDK说明文档