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

自定义微信易信平台分享内容

2014-10-14 15:40 621 查看
当一个链接在微信或易信浏览器里打开时，不管这个链接是公众号里的内容还是扫码打开的链接，分享给好友或是朋友圈时，分享的内容默认从网页中取，包括页面中的图片和title。当页面中没有图片时，会采用平台默认的图片，当页面没有title时，会使用页面的链接地址作为分享的标题。这里可以通过设置shareData对象和调用jsbridge方法自定义分享的数据，包括分享的图片，标题，描述等。

像这种代码太具有依赖性，使用方法完全取决于对方平台的接口，相对来说，维护成本也较高。不过有时为了项目的推广和流量，这样做也是值得的。

1.首先定义shareData对象来保存分享的数据

window.shareData = {
"imgUrl": "图片链接",
"tImgUrl": "分享到朋友圈的图片",
"fImgUrl": "分享给好友的图片",
"wImgUrl": "分享到微博的图片",
"timeLineLink": "分享到朋友圈的链接",
"sendFriendLink": "分享给好友的链接",
"weiboLink": "分享到微博的连接",
"tTitle": "分享到朋友圈的标题",
"tContent": "分享到朋友圈的描述",
"fTitle": "分享给好友的标题",
"fContent": "分享给好友的描述",
"wContent": "分享到微博的内容"
};


如果tImgUrl，fImgUrl，wImgUrl没有的话则从imgUrl里取值。

2.调用jsbridge方法

微信支持分享到好友，朋友圈。易信则支持分享到好友，朋友圈，新浪微博。

客户端处理流程为：

1.检测web是否监听相应的分享事件（'menu:share:appmessage'，'menu:share:timeline'，'menu:share:weibo'），如果web监听这些事件则触发这些事件，没有则到步骤2。

2.检查window下是否定义shareData，如果定义该数据则分享该数据中的内容，没有则到步骤3。

3.使用默认的分享机制(去网页抓取分享内容)。

方法调用，易信为例

1.分享给好友

YixinJSBridge.on('menu:share:appmessage', function (argv) {
YixinJSBridge.invoke('sendAppMessage', {
"img_url": window.shareData.imgUrl,
"img_width": "640",
"img_height": "640",
"link": window.shareData.sendFriendLink,
"desc": window.shareData.fContent,
"title": window.shareData.fTitle
}, function (res) {
不用处理，客户端会有分享结果提示
})
});


2.分享到朋友圈

YixinJSBridge.on('menu:share:timeline', function (argv) {
YixinJSBridge.invoke('shareTimeline', {
"img_url": window.shareData.imgUrl,
"img_width": "640",
"img_height": "640",
"link": window.shareData.timeLineLink,
"desc": window.shareData.tContent,
"title": window.shareData.tTitle
}, function (res) {
不用处理，客户端会有分享结果提示
});
});


3.分享到微博

YixinJSBridge.on('menu:share:weibo', function (argv) {
YixinJSBridge.invoke('shareWeibo', {
"content": window.shareData.wContent,
"url": window.shareData.weiboLink,
}, function (res) {
不用处理，客户端会有分享结果提示
});
});


易信最新版本支持。

3.案例说明

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>个性化定制微信易信平台分享内容</title>
</head>

<body>
<div class="m-shareintro">当一个链接在微信或易信浏览器里打开时，不管这个链接是公众号里的内容还是扫码打开的链接，分享给好友或是朋友圈时，分享的内容默认从网页中取，包括页面中的图片和title。当页面中没有图片时，会采用平台默认的图片，当页面没有title时，会使用页面的链接地址作为分享的标题。这里可以通过设置shareData对象和调用jsbridge方法自定义分享的数据，包括分享的图片，标题，描述等。</div>

<script>
window.shareData = {
"imgUrl": 'http://m3.img.srcdd.com/farm5/d/2014/1012/21/791FDBCEFB8B31A0AF6EFBFE84CB41D7_B250_400_250_302.jpeg',
"tImgUrl": "http://m1.img.srcdd.com/farm4/d/2014/1012/21/E01EA983123F6279E784F17A37DFDC7B_B250_400_250_250.jpeg",
"fImgUrl": "http://m2.img.srcdd.com/farm4/d/2014/1012/21/A77FB27F302693357F48BD6273768896_B250_400_250_270.jpeg",
"wImgUrl": "http://m3.img.srcdd.com/farm5/d/2014/1012/21/B049FFAA94A568378BE08887609265E2_B250_400_250_265.jpeg",
"timeLineLink": location.href,
"sendFriendLink": location.href,
"weiboLink": location.href,
"tTitle": "分享到朋友圈的标题",
"tContent": "分享到朋友圈的描述",
"fTitle": "分享给好友的标题",
"fContent": "分享给好友的描述",
"wContent": "分享到微博的内容"
};

//分享给好友
var _weixinSendAppMessage = function(){
WeixinJSBridge.on('menu:share:appmessage', function (argv) {
WeixinJSBridge.invoke('sendAppMessage', {
"img_url": window.shareData.imgUrl,
"img_width": "640",
"img_height": "640",
"link": window.shareData.sendFriendLink,
"desc": window.shareData.fContent,
"title": window.shareData.fTitle    //必填项，分享的标题
}, function (res) {
//不用处理，客户端会有分享结果提示
})
});
};

//分享到朋友圈
var _weixinShareTimeline = function(){
WeixinJSBridge.on('menu:share:timeline', function (argv) {
WeixinJSBridge.invoke('shareTimeline', {
"img_url": window.shareData.imgUrl,
"img_width": "640",
"img_height": "640",
"link": window.shareData.timeLineLink,
"desc": window.shareData.tContent,
"title": window.shareData.tTitle
}, function (res) {
//不用处理，客户端会有分享结果提示
});
});
};

//分享给好友
var _yixinSendAppMessage = function(){
YixinJSBridge.on('menu:share:appmessage', function (argv) {
YixinJSBridge.invoke('sendAppMessage', {
"img_url": window.shareData.imgUrl,
"img_width": "640",
"img_height": "640",
"link": window.shareData.sendFriendLink,
"desc": window.shareData.fContent,
"title": window.shareData.fTitle    //必填项，分享的标题
}, function (res) {
//不用处理，客户端会有分享结果提示
})
});
};

//分享到朋友圈
var _yixinShareTimeline = function(){
YixinJSBridge.on('menu:share:timeline', function (argv) {
YixinJSBridge.invoke('shareTimeline', {
"img_url": window.shareData.imgUrl,
"img_width": "640",
"img_height": "640",
"link": window.shareData.timeLineLink,
"desc": window.shareData.tContent,
"title": window.shareData.tTitle
}, function (res) {
//不用处理，客户端会有分享结果提示
});
});
};

//分享到微博
var _yixinShareWeibo = function(){
YixinJSBridge.on('menu:share:weibo', function (argv) {
YixinJSBridge.invoke('shareWeibo', {
"content": window.shareData.wContent,
"url": window.shareData.weiboLink,
}, function (res) {
//不用处理，客户端会有分享结果提示
});
});
};

if(navigator.userAgent.toLowerCase().indexOf('micromessenger')>0) {
if(!!window.WeixinJSBridge){
_weixinSendAppMessage();
_weixinShareTimeline();
}else{
document.addEventListener('WeixinJSBridgeReady',function(){
_weixinSendAppMessage();
_weixinShareTimeline();
},false);
}
}else if(navigator.userAgent.toLowerCase().indexOf('yixin') > 0){
if(!!window.YixinJSBridge){
_yixinSendAppMessage();
_yixinShareTimeline();
}else{
document.addEventListener('YixinJSBridgeReady', function() {
_yixinSendAppMessage();
_yixinShareTimeline();
},false);
}
}
</script>
</body>
</html>


4. 案例下载http://pan.baidu.com/s/1jGvbYOe
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航