美文网首页
微信分享那些事 @劉䔳

微信分享那些事 @劉䔳

作者: 劉䔳Fairy | 来源:发表于2020-04-10 15:49 被阅读0次
    • 可以再分享的页面中写上分享文案
    <!-- 分享文案 -->
        <div style="display: none">
            <p id="shareTittle">分享的主标题</p>
            <p id="shareDesc">分享的副标题</p>
        </div>
    
    • 单独建一个js文件用来写分享相关的代码
    // 获取微信配置
    var wxUrl = window.location.href.split('#')[0];
    $.ajax({
        type: "GET",
        url: 'http://.......' + '?url=' + wxUrl,//微信分享的接口(后台给)
        dataType: 'json',
        success: (function(wxMsg) {
            if (wxMsg.retResult == null || wxMsg.retResult == '') {
                return;
            } else {
                console.log(wxMsg);
                console.log(JSON.parse(wxMsg.retResult));
                var wxInformation = JSON.parse(wxMsg.retResult);
                var appId = wxInformation.appId;
                var timestamp = wxInformation.timestamp;
                var nonceStr = wxInformation.noncestr;
                var signature = wxInformation.signature;
                wx.config({
                    debug: false,//提示的开关,true的时候在手机上可以看到正确或错误的提示
                    appId: appId,
                    timestamp: timestamp,
                    nonceStr: nonceStr,
                    signature: signature,
                    jsApiList: [
                        'checkJsApi',
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo'
                    ]
                });
            }
        }),
        error: (function() {
    
        })
    });
    // 获取微信配置
    var wxSUrl = location.origin+"/giftsNeimeng/enrollNeiMeng/index.html";//当前页面的路径
    console.log(wxSUrl)
    var iconImg = location.origin+'/giftsNeimeng/enrollNeiMeng/images/icon.png'; // 分享的图标
    var shareTit = $('#shareTittle').text(); // 当前页面标题
    var shareContent=$('#shareDesc').text();  // 当前分享摘要
    console.log(shareContent)
    wx.ready(function() {
        // 1 判断当前版本是否支持指定 JS 接口,支持批量判断
        wx.checkJsApi({
            jsApiList: [
                'checkJsApi',
                'onMenuShareAppMessage',
                'onMenuShareTimeline',
                'onMenuShareQQ',
                'onMenuShareWeibo'
            ],
            success: function(res) {
    
            }
        });
    
        // 2.1 监听“分享给朋友”,按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareAppMessage({
            title: shareTit,
            desc:shareContent,
            link: wxSUrl,
            imgUrl: iconImg,
            trigger: function(res) {
                // alert('用户点击发送给朋友');
            },
            success: function(res) {
                // alert('已分享');
            },
            cancel: function(res) {
                // alert('已取消');
            },
            fail: function(res) {
                // alert(JSON.stringify(res));
            }
        });
    
        // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareTimeline({
            title: shareTit,
            desc: shareContent,
            link: wxSUrl,
            imgUrl: iconImg,
            trigger: function(res) {
                //   alert('用户点击分享到朋友圈');
            },
            success: function(res) {
                //  alert('已分享');
            },
            cancel: function(res) {
                // alert('已取消');
            },
            fail: function(res) {
                // alert(JSON.stringify(res));
            }
        });
    
        // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareQQ({
            title: shareTit,
            desc:shareContent,
            link: wxSUrl,
            imgUrl: iconImg,
            trigger: function(res) {
                //  alert('用户点击分享到QQ');
            },
            complete: function(res) {
                //  alert(JSON.stringify(res));
            },
            success: function(res) {
                //  alert('已分享');
            },
            cancel: function(res) {
                //   alert('已取消');
            },
            fail: function(res) {
                //   alert(JSON.stringify(res));
            }
        });
    
        // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareWeibo({
            title: shareTit,
            desc: shareContent,
            link: wxSUrl,
            imgUrl: iconImg,
            trigger: function(res) {
                //   alert('用户点击分享到微博');
            },
            complete: function(res) {
                // alert(JSON.stringify(res));
            },
            success: function(res) {
                //  alert('已分享');
            },
            cancel: function(res) {
                //  alert('已取消');
            },
            fail: function(res) {
                //  alert(JSON.stringify(res));
            }
        });
    
    });
    
    wx.error(function(res) {
    
    });
    
    

    当然,微信分享很容易出现以下分享不成功的时候,各位大佬可以观看这位简书作者写的关于微信回调不成功的问题
    https://www.jianshu.com/p/beb48eafc06c

    相关文章

      网友评论

          本文标题:微信分享那些事 @劉䔳

          本文链接:https://www.haomeiwen.com/subject/ogbrmhtx.html