定制微信分享的内容（备忘）

时间 2019-11-08

标签定制微信分享内容备忘繁體版

原文原文链接

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

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

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

获取了以后，在你的<script></script>标签中写以下的代码git

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 啦，github

参考文章：
官方文档:http://mp.weixin.qq.com/wiki/...
http://meiminjun.github.io/20...
http://chitanda.me/2015/06/19...api