微信jssdk分享(附代码)

老规矩---demo图: (注释:微信分享只支持右上角三个点触发)

======>

老规矩上菜:

1. 这边我封装了  share.js

function allSharefun(param) {
    console.log(param)
    var tagUrl = location.href;
    tagUrl = encodeURIComponent(tagUrl);
    console.log(tagUrl)
//注释: 传参当前页面url给自己的后台接口,  获取  配置的config所需参数
    $.get("xxxxx此处自己后台接口?url=" + tagUrl, function(res) {
        console.log(res)
        console.log(res.result.nonceStr)
        if (res.error == '00') {
            console.log(res)
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'xxxxxxxxx', // 必填，公众号的唯一标识
                timestamp: res.result.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.result.nonceStr, // 必填，生成签名的随机串
                signature: res.result.signature, // 必填，签名
                jsApiList: [
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareQZone',
                    'onMenuShareWeibo'
                ] // 必填，需要使用的JS接口列表
            });
            // config之后会自动调用ready方法
            wx.ready(function() {
                // 验证接口是否注册完成
                wx.checkJsApi({
                    jsApiList: [
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareQZone',
                        'onMenuShareWeibo',
                        "scanQRCode"
                    ],
                    success: function(res) {
                        console.log("888");
                    }
                });
                wx.onMenuShareTimeline({
                    title: param.title, // 分享标题  
                    desc: param.content, // 分享描述  
                    link: param.url, // 分享链接  
                    imgUrl: param.pic, // 分享图标  
                    success: function() {
                        // 用户确认分享后执行的回调函数  
                        alert('已分享');
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数 
                        alert('已取消');
                    }
                });

                //获取“分享给朋友”  
                wx.onMenuShareAppMessage({
                    title: param.title, // 分享标题  
                    desc: param.content, // 分享描述  
                    link: param.url, // 分享链接  
                    imgUrl: param.pic, // 分享图标  
                    type: 'link', // 分享类型,music、video或link，不填默认为link  
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空  
                    success: function() {
                        // 用户确认分享后执行的回调函数  
                        // alert('已分享');  
                        //window.location.href = "https://www.baidu.com";  
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数  
                        // alert('已取消');  
                    }
                });

                //获取“分享到QQ”  
                wx.onMenuShareQQ({
                    title: param.title, // 分享标题  
                    desc: param.content, // 分享描述  
                    link: param.url, // 分享链接  
                    imgUrl: param.pic, // 分享图标  
                    success: function() {
                        // 用户确认分享后执行的回调函数 
                        //    alert('已分享');  
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数 
                        //    alert('已取消');  
                    }
                });

                //获取“分享到QQ空间”  
                wx.onMenuShareQZone({
                    title: param.title, // 分享标题  
                    desc: param.content, // 分享描述  
                    link: param.url, // 分享链接  
                    imgUrl: param.pic, // 分享图标  
                    success: function() {
                        // 用户确认分享后执行的回调函数 
                        //    alert('已分享');  
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数 
                        //    alert('已取消');  
                    }
                });

                //获取“分享到腾讯微博”  
                wx.onMenuShareWeibo({
                    title: param.title, // 分享标题  
                    desc: param.content, // 分享描述  
                    link: param.url, // 分享链接  
                    imgUrl: param.pic, // 分享图标  
                    success: function() {
                        // 用户确认分享后执行的回调函数 
                        //    alert('已分享');  
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数 
                        // alert('已取消');  
                    }
                });
            });
            wx.error(function(res) {

                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                // console.log(res,"rrr")

            });
            // 开始分享
        }
    })


}

2.  share.html页面 引入 share.js

//引入jssdk 

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>

<!-- 需要分享的页面接入 封装好的 分享js -->

<script src="share.js"></script>

// 分享的 三要素----------------------------------------------
                                var shareData = {
                                    url: window.location.href,  //当前页面路径
                                    title: '分享的标题xxxx',  
                                    content: '描述xxxx',
                                    pic: 'xxxxpic'  //图片
                                }
　　　　　　　　　　　　　　　　　　　　//调用  share.js中的  函数  并且传入参数
                                allSharefun(shareData)

3.前提,  你已经配置好微信公众号的js安全域名等等!!!

需要配置ip白名单和安全域名

 

 

注释!!!!!! 配置域名 不需要加https   /  http

 1 有问题的朋友可以给我留言,

　　                     2 更多参考链接:https://www.jianshu.com/p/bef8675130cb

　　　　　　　　　　　　　　　　　　3 官网链接: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#10