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

2014-01-10

1
2
3

## 前言：

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

微信后台生成的网页

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

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

[![201301101638](http://www.smallerpig.com/wp-content/uploads/2014/01/201301101638.jpg)](http://www.smallerpig.com/wp-content/uploads/2014/01/201301101638.jpg)

## 

自己的服务器网页

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

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
	<caption>

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

	</caption>
	<tbody>
		<tr>
			<td style="text-align: center;">
				&nbsp;
			</td>
			<td style="text-align: center;">
				Android
			</td>
			<td style="text-align: center;">
				IOS
			</td>
			<td style="text-align: center;">
				Windows Phone 8
			</td>
		</tr>
		<tr>
			<td style="text-align: center;">
				分享标题
			</td>
			<td style="text-align: center;">
				Html=>Head=>Titile
			</td>
			<td style="text-align: center;">
				<span style="text-align: center;">Html=>Head=>Titile</span>
			</td>
			<td style="text-align: center;">
				<span style="text-align: center;">Html=>Head=>Titile</span>
			</td>
		</tr>
		<tr>
			<td style="text-align: center;">
				缩略图
			</td>
			<td style="text-align: center;">
				body中的第一个img标签
			</td>
			<td style="text-align: center;">
				<span style="text-align: center;">body中的第一个img标签</span>
			</td>
			<td style="text-align: center;">
				<span style="text-align: center;">body中的第一个img标签</span>
			</td>
		</tr>
		<tr>
			<td style="text-align: center;">
				display:none是否影响
			</td>
			<td style="text-align: center;">
				true
			</td>
			<td style="text-align: center;">
				true
			</td>
			<td>
				false
			</td>
		</tr>
	</tbody>
</table>

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

	&nbsp;

自定义

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

(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);
    }
})\(\);

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

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

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

## 

后记：

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

	&nbsp;

	&nbsp;

	参考：

	[http://blog.wpjam.com/m/custom-weixinjsbridge/](http://blog.wpjam.com/m/custom-weixinjsbridge/)

	[http://www.oschina.net/question/913845_122337](http://www.oschina.net/question/913845_122337)

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