微信分享添加缩略图

在微信内打开链接后，点右上角【…】选择【发送给朋友】或【分享到朋友圈】，这种分享方式获取缩略图的方法：

在页面 body 最上方添加 300*300 像素的 img
如该图片不需要显示，可以用 css 隐藏，但不能直接对 img 设置 display: none;。

可以在父层 div 上设置 display: none; 或者对 img 设置 position: absolute; visibility: hidden;。

上边这种方法现在是不能用了，因为2017年3月份对js-sdk做了修改

现在我们只能这样来添加缩略图：

步骤一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

备注：支持使用 AMD/CMD 标准模块加载方法加载

mpid :公众号id
把下面代码中的mpid换成你的公众号id,图片和title换成你需要的即可

官方文档：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

<script type="text⁄javascript" src=" http:⁄⁄qiniu.mgcc.com.cn⁄wechat⁄js⁄base64.min.js "><⁄script>
<script type="text⁄javascript" src="http:⁄⁄res.wx.qq.com⁄open⁄js⁄jweixin-1.0.0.js"><⁄script>
<script type="text⁄javascript">
var mpid = 'xxxxxxxx';
var share_pic = 'http:⁄⁄www.baidu.com⁄images⁄share.jpg';
var share_url;
var weChatUrlBase =  'http:⁄⁄wechat.mgcc.com.cn⁄wechat⁄wxapi⁄jssdkjsonp?mpid='+ mpid +'&callback=1234&urlmode=base64&callurl=';
var weChatUrl;
var sharetitle="初始分享主标题";
var sharedesc="初始分享副标题";
function wechatConfig() {
    weChatUrl = weChatUrlBase + location.href.split('#')[0] .EncodeBase64();
    share_url = window.location.href.split('#')[0];
    $.ajax({
        type: 'post',
        url: weChatUrl,
        dataType: "jsonp",
        crossDomain: !0,
        jsonpCallback: "callbackfn",
        success: function(data) {
            var config_obj = data;
            wx.config({
                debug: false,
                appId: config_obj.appId,
                timestamp: config_obj.timestamp,
                nonceStr: config_obj.nonceStr,
                signature: config_obj.signature,
                jsApiList: [
                    ⁄⁄ 所有要调用的 API 都要加到这个列表中
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage'
                ]
            });
            wx.ready(function () {
                wx.onMenuShareAppMessage({
                    title: sharetitle,
                    desc: sharedesc,
                    link: share_url,
                    imgUrl: share_pic,
                    success: function (res) {
                    },
                    cancel: function (res) {
                    },
                    fail: function (res) {
                    }
                });

                ⁄⁄ 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
                wx.onMenuShareTimeline({
                    title: sharetitle+sharedesc,
                    link: share_url,
                    imgUrl: share_pic,
                    success: function (res) {
                    },
                    cancel: function (res) {
                    },
                    fail: function (res) {
                    }
                });
            });
            wx.error(function(res){
            });
        },
        error:function(xhr, type) {
        }
    });
}

⁄⁄页面初始化后调用jssdk接口
wechatConfig();

⁄⁄触发某事件后，修改分享内容
$("#test").click(function(){
    share_pic = 'http:⁄⁄www.baidu.com⁄images⁄share2.jpg';
    sharetitle="改变后的分享主标题";
    sharedesc="改变后的分享副标题";
    share_url=share_url+"&change=true";
    wechatConfig();
});
<⁄script>

微信分享添加缩略图

猜你喜欢