微信分享自定义实现

通过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)