您的位置:首页 > 移动开发 > 微信开发

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

2014-01-10 17:03 781 查看

前言:

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

微信后台生成的网页

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

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





自己的服务器网页

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

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

AndroidIOSWindows Phone 8
分享标题Html=>Head=>TitileHtml=>Head=>TitileHtml=>Head=>Titile
缩略图body中的第一个img标签body中的第一个img标签body中的第一个img标签
display:none是否影响truetruefalse
最后一行显示的是第一个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

同样方法可自定义分享到微博、好友内容
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: