定制微信分享的内容

前端 453

微信分享的内容，从视觉上看有三个部分：标题、描述、图片。
 如果不使用微信的 jssdk 进行订制的话，微信会截取一张大概 300*300 并且距离<body> 标签最近的一张图片作为需要的图片；标题会选取<title></title>中的内容；描述则会是该页面的 URL。 

声明：2017年3月29日，微信宣布未接入 JSSDK 的网站将统一显示默认缩略图

所以在某些时候，订制内容是极为必要的。
 需要做的事情也很简单
 首先需要和微信服务器交互以获得以下字段，这些字段通常由服务端获取并传递给前端：
 appId 公众号的唯一标识
 timestamp生成签名的时间戳
 nonceStr生成签名的随机串
 signature签名（获取签名比获取其他字段稍微麻烦一点）

获取了之后，在你的标签中写如下的代码 

 wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: yourAppId, // 必填，公众号的唯一标识
                timestamp: yourtimestamp, // 必填，生成签名的时间戳
                nonceStr: yournonceStr, // 必填，生成签名的随机串
                signature: yoursignature,// 必填，签名
                jsApiList: [
                    'checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo'
                ] // 必填，需要使用的JS接口列表(此处接入了四个用于分享的接口)，所有JS接口列表见官方文档
            });
            
            window.share_config = {
                "share": {
                    "title" : '',//分享卡片标题
                    "desc" : " ",//摘要,只有发给朋友才显示摘要。
                    "imgUrl": '',//分享图，默认当相对路径处理，所以使用绝对路径的的话，“http://”协议前缀必须在。
                    "link": window.location.href,//分享出去后的链接，这里可以将链接设置为另一个页面。
                    "success":function(){
                        //分享成功后的回调函数
                    },
                    'cancel': function () { 
                        // 用户取消分享后执行的回调函数
                    }
                }
            };  
            wx.ready(function () {
                wx.onMenuShareAppMessage(share_config.share);//分享给好友
                wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
                wx.onMenuShareQQ(share_config.share);//分享给手机QQ
                wx.onMenuShareWeibo(share_config.share);//分享给微博
            });

把以上代码写进去就 ok 啦，

参考文章：
 官方文档:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E5.88.86.E4.BA.AB.E6.8E.A5.E5.8F.A3
 http://meiminjun.github.io/2015/12/27/wxProject/
 http://chitanda.me/2015/06/19/wechat-share-diy/

Comments
Write a Comment