定制微信分享的内容(备忘)

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

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

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

获取了之后,在你的<script></script>标签中写如下的代码

 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/...
http://meiminjun.github.io/20...
http://chitanda.me/2015/06/19...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值