首页 > > 网页制作 > Javascript >

微信自定义分享

2018-11-12 06:50:06来源：博客园阅读 ()

几个月前在做一个ai项目；项目需求在微信公众号内需要有自定义分享的功能；

微信公众平台

微信JS-SDK说明文档

链接地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

js-sdk在线地址:http://res.wx.qq.com/open/js/jweixin-1.4.0.js

根据文档说明；

appId、timestamp、

nonceStr、

signature通过后端生成之后返回前台；

爬坑：自定义分享的图片需要和项目域名保持一致；

前台使用前需要引入js-sdk相关文件就是上述的js-sdk在线地址；

下面是实现自定义分享相关代码：

 var data = data.data;  //后台返回相关数据
                    wx.config({
                        debug: false,////生产环境需要关闭debug模式
                        appId: data.appId,//appId通过微信服务号后台查看
                        timestamp: data.timestamp,//生成签名的时间戳
                        nonceStr: data.nonceStr,//生成签名的随机字符串
                        signature: data.signature,//签名
                        jsApiList: [//需要调用的JS接口列表
                            'checkJsApi',
                            'onMenuShareTimeline',//
                            'onMenuShareAppMessage',
                            'onMenuShareQQ',
                            'onMenuShareWeibo'
                        ]
                    });
                    window.share_config = {
                        "share": {
                            "imgUrl": "sunpengwei/img/sun.png",//分享图，默认当相对路径处理，所以使用绝对路径的的话，“http://”协议前缀必须在。这里的图片必须和域名保持一致方可生效
                            "desc": "全身变！",//摘要,如果分享到朋友圈的话，不显示摘要。
                            "title": '巴啦啦小魔仙全身变!',//分享卡片标题
                            "link":"sunpengwei/index",//分享出去后的链接，这里可以将链接设置为另一个页面。
                            "success": function () {//分享成功后的回调函数
                                console.log("分享成功");
                            },
                            'cancel': function () {
                                // 用户取消分享后执行的回调函数
                            }
                        }
                    };
                    wx.ready(function () {
                        wx.onMenuShareAppMessage(share_config.share);//分享给好友
                        wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
                        wx.onMenuShareQQ(share_config.share);//分享给手机QQ
                    });