和小猪一起搞微信开发——自定义分享到朋友圈的缩略图，链接，标题和摘要

前言：

我们在微信中看到好的文章通常会分享到朋友圈，如果网页是通过微信后台编辑自动生成的，

微信后台生成的网页

那么分享出去的链接微信会自动帮我们生成缩略图、标题以及简述。

生成的朋友圈中的链接信息对应下图：

自己的服务器网页

如果用户在微信浏览器中分享出去的是个普通的服务器网页，经过小猪的测试会有如下的规则

微信浏览器对应的链接类型

	Android	IOS	Windows Phone 8
分享标题	Html=>Head=>Titile	Html=>Head=>Titile	Html=>Head=>Titile
缩略图	body中的第一个img标签	body中的第一个img标签	body中的第一个img标签
display:none是否影响	true	true	false

最后一行显示的是第一个Img标签的Css属性display对分享的出去缩略图是否影响

 

自定义

那如果需求是需要自定义这些参数怎么办呢？答案就是在页面中加入下列代码，代码不复杂。

(function () {
    var onBridgeReady = function () {
        // 分享到朋友圈;
        WeixinJSBridge.on('menu:share:timeline', function (argv) {
            WeixinJSBridge.invoke('shareTimeline', {
                "img_url": "http://www.smallerpig.com/wp-content/uploads/2013/12/header.jpg",
                "img_width": "120",
                "img_height": "120",
                "link": "www.smallerpig.com",
                "desc": "你大爷的描述",//经过测试，该值没用 By smallerpig
                "title": "你大爷的标题"
            }, function () { });
        });
    }
    if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
})();

代码中可以看出，微信内置浏览器包含了一个 WeixinJSBridge 对象，对该对象的一系列调用可以实现部分自定义功能。但是由于系统的限制(或者为了朋友圈的宁静)，本来很多的功能都被TX给和谐了。

经过小猪的测试，截至目前为止(2014-01-10)wp8版本的微信（5.0.1）上述代码无效，可能是wp版本的微信浏览器未内置 WeixinJSBridge 对象！

Android版本、Ios版本微信5.0版本通过测试。

后记：

试想一下如果上述的js代码可以自由的由开发者调用的话会发生些什么呢？会不会用只要一点进去网页就被强制的关注某些公众账号？强制的进入到分享到朋友圈界面？看到很多资料微信之前的很多版本确实是这样的。但是目前只能够通过微信内部的按钮来调用 WeiXinJsBridge 对象了！

 

 

参考：

http://blog.wpjam.com/m/custom-weixinjsbridge/

http://www.oschina.net/question/913845_122337

同样方法可自定义分享到微博、好友内容