首页 Web开发 Windows程序 编程语言 数据库 移动开发 系统相关 微信 其他好文

微信分享功能

时间：2017-06-14 11:26:26   收藏：0   阅读：397

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

首先说说微信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，不要用错了哦

评论（0）
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码！