• 微信分享功能


    不得不说,微信开发平台给的文档还是很多的,但是,细节没有到位,相信大家都觉得微信坑比,哈哈。话不多说,开始进入代码。

    首先说说微信jssdk的问题,刚开始公众号jssdk是在后台加载,但是,我踩到了和大家一样的坑,微信二次分享(A==>B,B==>C),B分享到C的时候,jssdk如果是在后台加载,微信会在你地址栏上面追加参数,比如说form=xxx,这个时候,就算你在前端处理过url,后台还是jssdk路径错误,这个是不可避免的,所以,我把jssdk加载放置前端通过ajax加载,这样每次分享的jssdk都能成功加载:

    $.post('${basePath}/wx/jssdk.do',{url:location.href.split('#')[0]},function(row){//url直接用当前路径后台代码自己构造,微信给出很详细了
            console.log(row);
            //appId=row.rows.appId;
            wx.config({
                debug: true,
                appId: row.rows.appId,
                timestamp: row.rows.timestamp,
                nonceStr: row.rows.nonceStr,
                signature: row.rows.signature,
                jsApiList: [
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareQZone'
                ]
            }); 
    })

    这个时候,无论是怎么分享,jssdk都是加载成功的。

    下面是分享的具体代码:

     var onceId = uuid();
        wx.ready(function () {
             //分享到朋友圈
            wx.onMenuShareTimeline({
                title: '111', // 分享标题
                link: thisUrl+'?shareId='+onceId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                //link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri='+thisUrl+'&response_type=code&scope=snsapi_userinfo&state='+onceId+'#wechat_redirect',  //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标
                success: function () { 
                    data.shareUrl=thisUrl+'?shareId='+onceId;
                       data.shareId=onceId;
                       data.shareModel='9';
                       data.shareType='2';
                       data.openId=openId;
                       httpPost('${basePath}/wx/clientshare.do',data);
                       onceId = uuid();
                       // 用户确认分享后执行的回调函数
                       //alert('success');
                },
                cancel: function () { 
                    //alert('222');
                    // 用户取消分享后执行的回调函数
                }
            });
            
               //分享给朋友
               wx.onMenuShareAppMessage({
                   title: '111', // 分享标题
                   desc: '222', // 分享描述
                   link: thisUrl+'?shareId='+onceId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                   //link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri='+encodeURIComponent(thisUrl)+'&response_type=code&scope=snsapi_userinfo&state='+onceId+'#wechat_redirect',  //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                   imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标${basePath}/images/wechat/h1.jpg
                   type: '', // 分享类型,music、video或link,不填默认为link
                   dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
                   success: function (data) {
                       data.shareUrl=thisUrl+'?shareId='+onceId;
                       data.shareId=onceId;
                       data.shareModel='9';
                       data.shareType='1';
                       data.openId=openId;
                       httpPost('${basePath}/wx/clientshare.do',data);
                       onceId = uuid();
                       // 用户确认分享后执行的回调函数
                       //alert('success');
                   },
                   cancel: function () { 
                       //alert('222');
                       // 用户取消分享后执行的回调函数
                   }
               });
    })

    这里只拿分享给朋友和朋友圈为例,其他分享意义不大,这里会看到一个link,这个link是分享地址,大家应该看到我有注掉一行代码,这里又有一个坑了,直接分享网页授权,朋友圈是无法分享的,你表面上是分享成功了,实际上你分享出去的东西只有你自己可见,别人的朋友圈不会出现你分享的内容(亲测)。所以,我们还是要分享当前路径,出去一些不必要参数的路径,下面贴完整代码:

    function getQueryString(name) { 
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"); 
        var r = window.location.search.substr(1).match(reg); 
        if (r != null) return unescape(r[2]); 
        return null; 
    } 
    $(function () {
        var isShare=false;
        if(getQueryString('shareId')!=null){
            isShare=true;
        }
         var thisUrl=location.href;
         if(thisUrl.indexOf("?")>0){
             thisUrl=thisUrl.substring(0, thisUrl.indexOf("?"));
         }
        var data={shareUrl:thisUrl};
        var openId='${openId}';
        
        $.post('${basePath}/wx/jssdk.do',{url:location.href.split('#')[0]},function(row){
            console.log(row);
            //appId=row.rows.appId;
            wx.config({
                debug: true,
                appId: row.rows.appId,
                timestamp: row.rows.timestamp,
                nonceStr: row.rows.nonceStr,
                signature: row.rows.signature,
                jsApiList: [
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareQZone'
                ]
            }); 
            //alert('1');
            if(isShare==true){
                //通过分享进入页面
                //alert('2');
                var fromurl=thisUrl;
                var url='https://open.weixin.qq.com/connect/oauth2/authorize?appid='+row.rows.appId+'&redirect_uri='+encodeURIComponent(fromurl)+'&response_type=code&scope=snsapi_userinfo&state=getopen#wechat_redirect';  
                location.href=url;  
            }else{
                //通过公众号进入
                if(getQueryString('state')=='ok'){
                    $("#follow").hide();
                }else if(getQueryString('state')=='getopen'){
                    //通过网页授权二次进入
                    var access_code=getQueryString('code'); 
                    if (access_code==null){  
                        //alert('2');
                        var fromurl=thisUrl;
                        var url='https://open.weixin.qq.com/connect/oauth2/authorize?appid='+row.rows.appId+'&redirect_uri='+encodeURIComponent(fromurl)+'&response_type=code&scope=snsapi_userinfo&state=getopen#wechat_redirect';  
                        location.href=url;  
                    } else { 
                        //alert(access_code);
                        $.post('${basePath}/wx/openid.do',{code:access_code},function(result){
                            console.log(result);
                            //alert(result.rows.openId);
                            //alert(result.rows.accessToken);
                            openId=result.rows.openId;
                            $.post('${basePath}/wx/checkofollow.do',{openId:result.rows.openId},function(ret){
                                console.log(ret);
                                //alert(ret.rows.subscribe);
                                if(ret!=null&&ret.rows.subscribe=='1'){
                                    $("#follow").hide();
                                }else{
                                    $("#follow").show();
                                }
                            });
                        });      
                    } 
                }
            }
        });
        
        var onceId = uuid();
        wx.ready(function () {
             //分享到朋友圈
            wx.onMenuShareTimeline({
                title: '111', // 分享标题
                link: thisUrl+'?shareId='+onceId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                //link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri='+thisUrl+'&response_type=code&scope=snsapi_userinfo&state='+onceId+'#wechat_redirect',  //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标
                success: function () { 
                    data.shareUrl=thisUrl+'?shareId='+onceId;
                       data.shareId=onceId;
                       data.shareModel='9';
                       data.shareType='2';
                       data.openId=openId;
                       httpPost('${basePath}/wx/clientshare.do',data);
                       onceId = uuid();
                       // 用户确认分享后执行的回调函数
                       //alert('success');
                },
                cancel: function () { 
                    //alert('222');
                    // 用户取消分享后执行的回调函数
                }
            });
            
               //分享给朋友
               wx.onMenuShareAppMessage({
                   title: '111', // 分享标题
                   desc: '222', // 分享描述
                   link: thisUrl+'?shareId='+onceId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                   //link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri='+encodeURIComponent(thisUrl)+'&response_type=code&scope=snsapi_userinfo&state='+onceId+'#wechat_redirect',  //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                   imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标${basePath}/images/wechat/h1.jpg
                   type: '', // 分享类型,music、video或link,不填默认为link
                   dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
                   success: function (data) {
                       data.shareUrl=thisUrl+'?shareId='+onceId;
                       data.shareId=onceId;
                       data.shareModel='9';
                       data.shareType='1';
                       data.openId=openId;
                       httpPost('${basePath}/wx/clientshare.do',data);
                       onceId = uuid();
                       // 用户确认分享后执行的回调函数
                       //alert('success');
                   },
                   cancel: function () { 
                       //alert('222');
                       // 用户取消分享后执行的回调函数
                   }
               });
            //分享到QQ
            wx.onMenuShareQQ({
                title: '111', // 分享标题
                desc: '222', // 分享描述
                link: thisUrl+'?shareId='+onceId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                //link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri='+thisUrl+'&response_type=code&scope=snsapi_userinfo&state='+onceId+'#wechat_redirect',  //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标
                success: function () { 
                    data.shareUrl=thisUrl+'?shareId='+onceId;
                       data.shareId=onceId;
                       data.shareModel='9';
                       data.shareType='9';
                       data.openId=openId;
                       httpPost('${basePath}/wx/clientshare.do',data);
                       onceId = uuid();
                       // 用户确认分享后执行的回调函数
                       //alert('success');
                },
                cancel: function () { 
                    //alert('222');
                   // 用户取消分享后执行的回调函数
                }
            });
            //分享到腾讯微博
            wx.onMenuShareWeibo({
                title: '111', // 分享标题
                desc: '222', // 分享描述
                link: thisUrl+'?shareId='+onceId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                //link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri='+thisUrl+'&response_type=code&scope=snsapi_userinfo&state='+onceId+'#wechat_redirect', // 分享链接
                imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标
                success: function () { 
                    data.shareUrl=thisUrl+'?shareId='+onceId;
                       data.shareId=onceId;
                       data.shareModel='9';
                       data.shareType='9';
                       data.openId=openId;
                       httpPost('${basePath}/wx/clientshare.do',data);
                       onceId = uuid();
                       // 用户确认分享后执行的回调函数
                       //alert('success');
                },
                cancel: function () { 
                    //alert('222');
                    // 用户取消分享后执行的回调函数
                }
            });
            //分享到QQ空间
            wx.onMenuShareQZone({
                title: '111', // 分享标题
                desc: '222', // 分享描述
                link: thisUrl+'?shareId='+onceId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                //link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri='+thisUrl+'&response_type=code&scope=snsapi_userinfo&state='+onceId+'#wechat_redirect', // 分享链接
                imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标
                success: function () { 
                    data.shareUrl=thisUrl+'?shareId='+onceId;
                       data.shareId=onceId;
                       data.shareModel='9';
                       data.shareType='9';
                       data.openId=openId;
                       httpPost('${basePath}/wx/clientshare.do',data);
                       onceId = uuid();
                       // 用户确认分享后执行的回调函数
                       //alert('success');
                },
                cancel: function () { 
                    // 用户取消分享后执行的回调函数
                }
            });
        });
    });

    通过标识符判断用户是否通过分享进入到公众号,如果是,则进行跳转网页授权获取用户详情,然后获取用户是否关注公众号(如何获取参考微信文档),然后显示按钮标签什么的,用户如果点击就出你们做好的关注页面。ps后台代码就不贴出来了,微信文档给的都很详细。希望能帮助到大家,不懂的可以私。对了,这里还有一个坑,微信有两个token,网页授权是一个token,还有一个是7200秒的token,获取用户详情的时候,调用的是7200秒的token,不要用错了哦

  • 相关阅读:
    6月7日の勉強レポート
    6月6日の勉強レポート
    6月5日の勉強レポート
    6月4日の勉強レポート
    6月3日の勉強レポート
    6月2日の勉強レポート
    6月1日の勉強レポート
    linux 文件属性
    linux网卡配置
    redhat6修改主机名
  • 原文地址:https://www.cnblogs.com/ghsy/p/7007561.html
Copyright © 2020-2023  润新知