h5分享给好友、分享至朋友圈

参考微信sdk文档：

http://caibaojian.com/wxwiki/0030551f015f01ecaa56d20b88ee3c6cb32503bf.html

需求：成功分享到朋友圈才能领到微信立减金
开发步骤：
1、先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
微信公众平台：https://mp.weixin.qq.com/

2、在需要调用JS接口的页面引入如下JS文件，（支持https）：

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

注意：如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK。

3、先封装一个公共的js，用来分享

function shareFirend(callBack) {
    let url = window.location.href.replace(/#.+/, '');
    url = encodeURIComponent(url)
    //请求后端接口，拿到所需要的参数
    axios.get('/pos-coupon/weChat/jssdk/getSignature', {
        params: {
            url: url
        }
    }).then(res => {
        if (res.data.success) {
            let result = res.data.result || {};
            let appId = result.appId;
            let timestamp = result.timestamp;
            let nonceStr = result.nonceStr;
            let signature = result.signature;
            let apiList = [
                // 'updateAppMessageShareData',
                // 'updateTimelineShareData',
                'onMenuShareAppMessage',
                'onMenuShareTimeline'
            ]
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: appId, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: nonceStr, // 必填，生成签名的随机串
                signature: signature, // 必填，签名
                jsApiList: apiList // 必填，需要使用的JS接口列表
            });
        } else {
            console.error(res.data.message)
        }
    })
    wx.ready(function() {
        var linkStr = 'https://th.li-dd.com/h5/wx/coupons2/coupons.html';
        let imgUrl = 'https://th.li-dd.com/h5/wx/coupons2/img/success.png'
            // wx.updateAppMessageShareData({
        wx.onMenuShareAppMessage({
                title: '爱购暖冬，工行韶关分行满减活动！让你省不停！', // 分享标题
                desc: '爱购暖冬，工行韶关分行满减活动！让你省不停！',
                link: linkStr, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: imgUrl, // 分享图标
                success: function(res) {
                    // alert('分享好友成功！')
                }
            })
            // wx.updateTimelineShareData({
        wx.onMenuShareTimeline({
            title: '爱购暖冬，工行韶关分行满减活动！让你省不停！', // 分享标题
            link: linkStr, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imgUrl, // 分享图标
            success: function(res) {
                console.log(res)
                    // alert('分享朋友圈成功')
                    //分享成功后调用回调函数
                callBack && callBack()
            }
        })
    });
}

4、在html页面引入微信的sdk和封装好的分享函数

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="js/share.js"></script>

5、在页面中调用shareFirend函数，并在回调中处理结果

shareFirend(getCoupon)
// 发放卡券
function getCoupon() {
  let openids = sessionStorage.getItem('openid')
  let tickets = sessionStorage.getItem('ticket')
  axios.post('/pos-coupon/weChat/card/send', {
    "openid": openids,
    "ticket": tickets,
    "cardIds": '后端配置好的cardId',
    "checkBlackOrWhiteList": false
  }).then(function (res) {
  	alert('恭喜您分享朋友圈成功，立减金已到账！')
  })
}

用户点击右上角三个点分享到朋友圈时，就能监听到分享状态