微信分享自定义实现

经过Js-SDK方式实现 两步： 1、服务端获取accessToken和jsApiKey, 生成签名， 传给前台使用 2、前台引入对应js文件，配置config， 依次调用分享的函数

具体实现步骤：

一、绑定域名

先登陆微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 根据指引，须要先引入一个txt文件，经过线上路径能访问到便可， 而后才能成功添加域名    二、前端引入js文件 res.wx.qq.com/open/js/jwe…

三、经过config接口注入权限验证配置 全部须要使用JS-SDK的页面必须先注入配置信息，不然将没法调用 wx.config({     debug: true, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。     appId: '', // 必填，公众号的惟一标识     timestamp: , // 必填，生成签名的时间戳     nonceStr: '', // 必填，生成签名的随机串     signature: '',// 必填，签名，见附录1     jsApiList: [] // 必填，须要使用的JS接口列表，全部JS接口列表见附录2 });

四、config信息验证后会执行ready方法 因此， 分享的各个函数须要写在ready函数里，才能确保正确执行

wx.ready(function(){

})

五、经过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)