首页 > 代码库 > 自定义微信易信平台分享内容

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

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

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

 

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

window.shareData =http://www.mamicode.com/ {        "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>

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