前端忐忑历程

前端微信分享,调用微信分享,分享朋友圈,分享微信好友,分享qq空

2018-01-10  本文已影响617人  小鳄鱼的大哥哦

项目中很多使用到微信分享的地方,对于前端来说也算很简单了,建议写该功能时使用微信调试工具,便于调试,直接上代码
第一步,引入微信配置文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>

//这里的AJAX用于获取后台数据,当然也可以不用这么写,您只需要提取您需要的代码即可
$.ajax({
    url: "后台接口地址,用于获取需要的微信配置",
    data: {
        //需要encodeURIComponent转码,默认为分享当前地址
        url: encodeURIComponent(window.location.href)
    },
    type: 'POST',
    success: function(res) {
        //获取数据之后的操作,如果配置信息在其他地方获取,删掉这段AJAX请求,该参数就好
        console.log(res);
        var obj = res.data;
        //配置微信参数
        wx.config({
            debug: true, //开启调试模式,调用的所有api的返回值会在客户端alert出来
            appId:obj.appid, //在微信绑定公众号时生成的appid,有后台返回 
            timestamp: obj.timestamp, //生成签名的时间戳,由后台返回
            nonceStr: obj.nonceStr, //生成签名的随机串,由后台返回
            signature: obj.signature, //签名,由后台返回
            jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] 
            //jsApiList参数可以有很多,一下一一对应列出来
            //但是下面需要添加对应的参数信息(下面只写了分享到微信好友和朋友圈,方便复制)
            //onMenuShareQQ   分享到QQ好友
            //onMenuShareWeibo  分享到腾讯微博
            //onMenuShareQZone  分享QQ空间
        });
        wx.onMenuShareTimeline({
            //以下是微信的分享的配置信息,建议从后端获取
            title: "分享出去的标题",
            link: "分享出去的连接地址!!!这里的地址必须是当前在微信绑定的域名下的地址",
            imgUrl: "分享出去的图片地址!!!图片也必须是绑定域名下的图片",
            desc: "详细描述",
            trigger: function(res) {
                // 触发时需要做的事...
            },
            success: function() {
                // alert('分享到朋友圈成功');  
            },
            cancel: function() {
                // alert('你没有分享到朋友圈');  
            },
            fail: function(res) {
                //这里必须写,可以再非微信端弹出错误信息,方便调试
                alert(JSON.stringify(res));
            }
        });
        wx.onMenuShareAppMessage({
            title: "分享出去的标题",
            link: "分享出去的连接地址!!!这里的地址必须是当前在微信绑定的域名下的地址",
            desc: "详细描述",
            imgUrl: "分享出去的图片地址!!!图片也必须是绑定域名下的图片",
            trigger: function(res) {
                // 触发时需要做的事...
            },
            success: function(res) {
                //alert('分享给朋友成功');
            },
            cancel: function(res) {
                //alert('你没有分享给朋友');  
            },
            fail: function(res) {
                //这里必须写,可以再非微信端弹出错误信息,方便调试
                alert(JSON.stringify(res));
            }
        });
    }
});

OK,直接复制粘贴,改改参数就行了,很简单,比较坑的是,我们在配置了这些参数之后,也只能通过微信右上角的按钮来手动分享,这就很尴尬了,哈哈哈。。。。。。

我是这么操作的 分享成功图片
在成功之后的回调里,显示这张图片就好了,感觉好Low的样子,Low就Low吧。。。。。。

写的比较详细,新手试用最佳,如有错希望各位在下方评论出来,谢谢。

上一篇下一篇

猜你喜欢

热点阅读