微信分享那些事 @劉䔳

  • 可以再分享的页面中写上分享文案

    

分享的主标题

分享的副标题

  • 单独建一个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

你可能感兴趣的:(微信分享那些事 @劉䔳)