微信自定义分享

几个月前在做一个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
                    });

 

 

 

posted @ 2018-11-08 16:18  执着的小猪仔  阅读(590)  评论(1编辑  收藏  举报