通过Js-SDK方式实现
两步：
一、服务端获取accessToken和jsApiKey, 生成签名， 传给前台使用
二、前台引入对应js文件，配置config， 依次调用分享的函数
具体实现步骤：
1、绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
根据指引，需要先引入一个txt文件，通过线上路径能访问到即可， 然后才能成功添加域名
2、前端引入js文件
https://res.wx.qq.com/open/js/jweixin-1.2.0.js
3、通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
4、config信息验证后会执行ready方法
所以， 分享的各个函数需要写在ready函数里，才能确保正确执行
wx.ready(function(){
})
5、通过error接口处理失败验证
config信息验证失败时会执行error函数，如签名过期导致验证失败，
wx.error(function(res){
Console.log(res) // 打印出错误信息， 可以在这里做刷新签名处理， 向后台发送请求
})
// 前端代码
<!--分享-->
<script src="[https://res.wx.qq.com/open/js/jweixin-1.0.0.js](https://res.wx.qq.com/open/js/jweixin-1.0.0.js)"></script>
<script>
wx.config({
debug: false, //调试阶段建议开启
appId: "wx260c70c8ae7d9b3b",//APPID
timestamp: "{{share_config.Timestamp}}",//上面main方法中拿到的时间戳timestamp
nonceStr: "{{share_config.NonceStr}}",//上面main方法中拿到的随机数nonceStr
signature: "{{share_config.Signature}}",//上面main方法中拿到的签名signature
jsApiList: [
//所有要调用的 API 都要加到这个列表中
"onMenuShareTimeline",
"onMenuShareAppMessage",
"onMenuShareQQ",
"onMenuShareWeibo",
"onMenuShareQZone"
]
});
// 配置完成后，分享函数一定要写在ready里面
wx.ready(function(){
var title = "有色商城看货节，和我们一起去看货 - 有色商城",
desc = "有色商城联合多家锌合金厂家，举办第一届“看货节”活动，线上线下相结合，厂家接待，现场看货，当面洽淡，欢迎和我们一起去看货！”,
// imgurl 必须是绝对地址，包含协议、域名
imgURL = "https://" + window.location.host + "{{static_server_path.UrlPrefix}}{{static_server_path.Version}}/images/kanhuo/H5/share.jpg",
linkURL = window.location.href;
// 分享给朋友
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: linkURL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgURL // 分享图标
});
// 分享到朋友圈
wx.onMenuShareTimeline({
title: title, // 分享标题
link: linkURL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgURL// 分享图标
});
// 分享到QQ
wx.onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: linkURL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgURL // 分享图标
});
// 分享到腾讯微博
wx.onMenuShareWeibo({
title: title, // 分享标题
desc: desc, // 分享描述
link: linkURL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgURL // 分享图标
});
// 分享到qq空间
wx.onMenuShareQZone({
title: title, // 分享标题
desc: desc, // 分享描述
link: linkURL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgURL // 分享图标
});
})
</script>
工具：
微信JS-SDK说明文档(https://mp.weixin.qq.com/wiki)
微信js接口签名校验工具(https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign)
