web端实现微信分享功能

微信分享的东西目前文档已经很完善了。记录下做微信分享时遇到的坑，以及流程。

文档传送门: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

配置相关的就不说了， 文档里很明白。

1：先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
2：在需要调用JS接口的页面引入如下JS文件，（支持https）：

http://res.wx.qq.com/open/js/jweixin-1.4.0.js

3：前端需要获取的是以下配置参数

wx.config({
        debug: true, 
        // 开启调试模式,调用的所有api的返回值会在客户端alert出来，
        //若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

        appId: '', // 必填，公众号的唯一标识   在公众号后台找    也可以后端返回

        timestamp: , // 必填，生成签名的时间戳  后端返回  示例 : 1566466330

        nonceStr: '', // 必填，生成签名的随机串   后端返回  示例 :  'qcmjlufmkiu6ls3pm9fl6zpw4upaphpu'  

        signature: '',// 必填，签名   后端返回   示例 : 898c11a276d3ac322ac8fa2a1c9c4478d911bd3f

        jsApiList: [] // 必填，需要使用的JS接口列表

});

其中 重点说一下 signature 此签名是由 后端通过 jsapi_ticket 、noncestr 、 timestamp 、url( 当前页面 location.href) 来生成的。 url需要前端传给后端 尽量别去改变url 否则会签名失败；比如我之前想把微信分享后自带的form给split掉 结果就生成签名失败了

前端代码

生成签名的示例：

jsapi_ticket=LIKLckvwlJT9cWIhEMSwfPQ6i-iF7CzG9MfFdUetFysv2QsIY631ub8-TQbXpqzs-cTloAehPWMRe2ibSsAwEA&noncestr=eb7iuq1o4j1bs4a2ex9yeqjupcw7gi5f&timestamp=1566463922&url=xxxxx

微信签名校验工具
http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

配置微信分享内容 微信分享内容可以是接口请求回来的 也可以写死。 重点是 在配置link的时候 可以分享非当前页面，但必须是在本域名下。

wx.ready(function () { 

    wx.onMenuShareAppMessage({

       title: '送你一张优惠券，马上领取',

       desc: '领取优惠券，来全球欢商城领取即可享优惠。仅此一张，先到先得。',

       link: location.href,    // 可以分享别的页面 但要在同域名

       imgUrl: shareContent['share_img'],

       trigger: function (res) {},

       success: function (res) {}

    });

// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口

  wx.onMenuShareTimeline({

        title: '送你一张优惠券，马上领取',

        link: location.href,  // 可以分享别的页面 但要在同域名

        imgUrl: shareContent['share_img'],

        trigger: function (res) {},

        success: function (res) {}

  });

});

最后 附上配置微信config的报错码

微信config的报错码