标签：des style blog http color io 使用 ar strong
当一个链接在微信或易信浏览器里打开时，不管这个链接是公众号里的内容还是扫码打开的链接，分享给好友或是朋友圈时，分享的内容默认从网页中取，包括页面中的图片和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.案例说明
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 6 <title>个性化定制微信易信平台分享内容</title> 7 </head> 8 9 <body> 10 <div class="m-shareintro">当一个链接在微信或易信浏览器里打开时，不管这个链接是公众号里的内容还是扫码打开的链接，分享给好友或是朋友圈时，分享的内容默认从网页中取，包括页面中的图片和title。当页面中没有图片时，会采用平台默认的图片，当页面没有title时，会使用页面的链接地址作为分享的标题。这里可以通过设置shareData对象和调用jsbridge方法自定义分享的数据，包括分享的图片，标题，描述等。</div> 11 12 <script> 13 window.shareData = { 14 "imgUrl": ‘http://m3.img.srcdd.com/farm5/d/2014/1012/21/791FDBCEFB8B31A0AF6EFBFE84CB41D7_B250_400_250_302.jpeg‘, 15 "tImgUrl": "http://m1.img.srcdd.com/farm4/d/2014/1012/21/E01EA983123F6279E784F17A37DFDC7B_B250_400_250_250.jpeg", 16 "fImgUrl": "http://m2.img.srcdd.com/farm4/d/2014/1012/21/A77FB27F302693357F48BD6273768896_B250_400_250_270.jpeg", 17 "wImgUrl": "http://m3.img.srcdd.com/farm5/d/2014/1012/21/B049FFAA94A568378BE08887609265E2_B250_400_250_265.jpeg", 18 "timeLineLink": location.href, 19 "sendFriendLink": location.href, 20 "weiboLink": location.href, 21 "tTitle": "分享到朋友圈的标题", 22 "tContent": "分享到朋友圈的描述", 23 "fTitle": "分享给好友的标题", 24 "fContent": "分享给好友的描述", 25 "wContent": "分享到微博的内容" 26 }; 27 28 //分享给好友 29 var _weixinSendAppMessage = function(){ 30 WeixinJSBridge.on(‘menu:share:appmessage‘, function (argv) { 31 WeixinJSBridge.invoke(‘sendAppMessage‘, { 32 "img_url": window.shareData.imgUrl, 33 "img_width": "640", 34 "img_height": "640", 35 "link": window.shareData.sendFriendLink, 36 "desc": window.shareData.fContent, 37 "title": window.shareData.fTitle 38 }, function (res) { 39 //不用处理，客户端会有分享结果提示 40 }) 41 }); 42 }; 43 44 //分享到朋友圈 45 var _weixinShareTimeline = function(){ 46 WeixinJSBridge.on(‘menu:share:timeline‘, function (argv) { 47 WeixinJSBridge.invoke(‘shareTimeline‘, { 48 "img_url": window.shareData.imgUrl, 49 "img_width": "640", 50 "img_height": "640", 51 "link": window.shareData.timeLineLink, 52 "desc": window.shareData.tContent, 53 "title": window.shareData.tTitle 54 }, function (res) { 55 //不用处理，客户端会有分享结果提示 56 }); 57 }); 58 }; 59 60 //分享给好友 61 var _yixinSendAppMessage = function(){ 62 YixinJSBridge.on(‘menu:share:appmessage‘, function (argv) { 63 YixinJSBridge.invoke(‘sendAppMessage‘, { 64 "img_url": window.shareData.imgUrl, 65 "img_width": "640", 66 "img_height": "640", 67 "link": window.shareData.sendFriendLink, 68 "desc": window.shareData.fContent, 69 "title": window.shareData.fTitle 70 }, function (res) { 71 //不用处理，客户端会有分享结果提示 72 }) 73 }); 74 }; 75 76 //分享到朋友圈 77 var _yixinShareTimeline = function(){ 78 YixinJSBridge.on(‘menu:share:timeline‘, function (argv) { 79 YixinJSBridge.invoke(‘shareTimeline‘, { 80 "img_url": window.shareData.imgUrl, 81 "img_width": "640", 82 "img_height": "640", 83 "link": window.shareData.timeLineLink, 84 "desc": window.shareData.tContent, 85 "title": window.shareData.tTitle 86 }, function (res) { 87 //不用处理，客户端会有分享结果提示 88 }); 89 }); 90 }; 91 92 //分享到微博 93 var _yixinShareWeibo = function(){ 94 YixinJSBridge.on(‘menu:share:weibo‘, function (argv) { 95 YixinJSBridge.invoke(‘shareWeibo‘, { 96 "content": window.shareData.wContent, 97 "url": window.shareData.weiboLink, 98 }, function (res) { 99 //不用处理，客户端会有分享结果提示 100 }); 101 }); 102 }; 103 104 if(navigator.userAgent.toLowerCase().indexOf(‘micromessenger‘)>0) { 105 if(!!window.WeixinJSBridge){ 106 _weixinSendAppMessage(); 107 _weixinShareTimeline(); 108 }else{ 109 document.addEventListener(‘WeixinJSBridgeReady‘,function(){ 110 _weixinSendAppMessage(); 111 _weixinShareTimeline(); 112 },false); 113 } 114 }else if(navigator.userAgent.toLowerCase().indexOf(‘yixin‘) > 0){ 115 if(!!window.YixinJSBridge){ 116 _yixinSendAppMessage(); 117 _yixinShareTimeline(); 118 }else{ 119 document.addEventListener(‘YixinJSBridgeReady‘, function() { 120 _yixinSendAppMessage(); 121 _yixinShareTimeline(); 122 },false); 123 } 124 } 125 </script> 126 </body> 127 </html>
标签：des style blog http color io 使用 ar strong
原文地址：http://www.cnblogs.com/zourong/p/4024545.html
