QQ,微信实现自定义分享

最新推荐文章于 2024-08-23 10:41:37 发布

原创最新推荐文章于 2024-08-23 10:41:37 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

45 篇文章

订阅专栏

在我们做项目的时候经常会要求可以自定义分享
QQ分享
引入

  <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js"></script>

       //QQ分享
            setShareInfo( {
                title: "我是qq啊",
                summary: "我是描述啊",
                pic: share_pic,//图片
                url: window.location.href.split( '#' )[0],//地址栏url，要在域名里的页面
            } );

微信分享
微信分享稍微复杂点
1.需要有微信的AppID和AppKey
2.需要在微信公众号后台把域名配置到微信后台里的js安全域名列表里
3.需要调用后台写好的api，后台api需返回

 appId: appid,
  timestamp: 时间戳,
 nonceStr: nonceStr,
signature:签名,
url:分享的url

4.需要引入

  <script type="text/javascript" src=" ~/Scripts/base64.min.js"></script>
    <script type="text/javascript" src=" ~/Scripts/jweixin-1.4.0.js"></script>

前端代码

 function wechatConfig()
        {
            share_url = window.location.href.split( '#' )[0].replace( /&/g, '_' );
            //        share_url = window.location.href.split('#')[0].replace(/\/SceneIndex/,'');
            // share_url=().(/&(.+?)&/g,'')
            //QQ分享
            setShareInfo( {
                title: sharetitle,
                summary: sharedesc,
                pic: share_pic,
                url: window.location.href.split( '#' )[0],
            } );
            //微信分享
            $.ajax( {
                type: 'post',
                url: sharepic+'/api/AccountApi/GetWechatShare?url=' + share_url,

                // dataType: "jsonp",
                // crossDomain: !0,
                // jsonpCallback: "callbackfn",
                success: function ( data )
                {
                  
                    var config_obj = data;
                    // console.log(JOSN.stringify(config_obj));
                    wx.config( {
                        debug: false,
                        appId: config_obj.appid,
                        timestamp: config_obj.timestamp,
                        nonceStr: config_obj.nonceStr,
                        signature: config_obj.signature,
                        jsApiList: [
                            //所有要调用的 API 都要加到这个列表中
                            'onMenuShareTimeline',
                            'onMenuShareAppMessage'
                        ]
                    } );

                    wx.ready( function ()
                    {
                        var str = config_obj.url;
                        wx.onMenuShareAppMessage( {
                            title: sharetitle,
                            desc: sharedesc,
                            link: str,
                            imgUrl: share_pic,
                            success: function ( res )
                            {
                                //alert(JSON.stringify(res))
                            },
                            cancel: function ( res )
                            {
                            },
                            fail: function ( res )
                            {
                                // alert('失败')
                            }
                        } );

                        // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
                        wx.onMenuShareTimeline( {
                            title: sharetitle + sharedesc,
                            link: str,
                            imgUrl: share_pic,
                            success: function ( res )
                            {
                                // alert('成功')
                            },
                            cancel: function ( res )
                            {
                            },
                            fail: function ( res )
                            {
                                // alert('失败')
                            }
                        } );
                    } );
                    wx.error( function ( res )
                    {
                    } );
                },
                error: function ( xhr, type )
                {
                }
            } );
        }
        wechatConfig()