当一个链接在微信或易信浏览器里打开时，不管这个链接是公众号里的内容还是扫码打开的链接，分享给好友或是朋友圈时，分享的内容默认从网页中取，包括页面中的图片和title。当页面中没有图片时，会采用平台默认的图片，当页面没有title时，会使用页面的链接地址作为分享的标题。这里可以通过设置shareData对象和调用jsbridge方法自定义分享的数据，包括分享的图片，标题，描述等。
像这种代码太具有依赖性，使用方法完全取决于对方平台的接口，相对来说，维护成本也较高。不过有时为了项目的推广和流量，这样做也是值得的。
1.首先定义shareData对象来保存分享的数据
01.
window.shareData = {
02.
"imgUrl": "图片链接",
03.
"tImgUrl": "分享到朋友圈的图片",
04.
"fImgUrl": "分享给好友的图片",
05.
"wImgUrl": "分享到微博的图片",
06.
"timeLineLink": "分享到朋友圈的链接",
07.
"sendFriendLink": "分享给好友的链接",
08.
"weiboLink": "分享到微博的连接",
09.
"tTitle": "分享到朋友圈的标题",
10.
"tContent": "分享到朋友圈的描述",
11.
"fTitle": "分享给好友的标题",
12.
"fContent": "分享给好友的描述",
13.
"wContent": "分享到微博的内容"
14.
};
如果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.分享给好友
01.
YixinJSBridge.on('menu:share:appmessage', function (argv) {
02.
YixinJSBridge.invoke('sendAppMessage', {
03.
"img_url": window.shareData.imgUrl,
04.
"img_width": "640",
05.
"img_height": "640",
06.
"link": window.shareData.sendFriendLink,
07.
"desc": window.shareData.fContent,
08.
"title": window.shareData.fTitle
09.
}, function (res) {
10.
不用处理，客户端会有分享结果提示
11.
})
12.
});
2.分享到朋友圈
01.
YixinJSBridge.on('menu:share:timeline', function (argv) {
02.
YixinJSBridge.invoke('shareTimeline', {
03.
"img_url": window.shareData.imgUrl,
04.
"img_width": "640",
05.
"img_height": "640",
06.
"link": window.shareData.timeLineLink,
07.
"desc": window.shareData.tContent,
08.
"title": window.shareData.tTitle
09.
}, function (res) {
10.
不用处理，客户端会有分享结果提示
11.
});
12.
});
3.分享到微博
1.
YixinJSBridge.on('menu:share:weibo', function (argv) {
2.
YixinJSBridge.invoke('shareWeibo', {
3.
"content": window.shareData.wContent,
4.
"url": window.shareData.weiboLink,
5.
}, function (res) {
6.
不用处理，客户端会有分享结果提示
7.
});
8.
});
易信最新版本支持。
3.案例说明
001.
1 <!doctype html>
002.
2 <html>
003.
3 <head>
004.
4 <meta charset="utf-8">
005.
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
006.
6 <title>个性化定制微信易信平台分享内容</title>
007.
7 </head>
008.
8
009.
9 <body>
010.
10 <div class="m-shareintro">当一个链接在微信或易信<a href="http://www.it165.net/edu/ewl/"target="_blank" class="keylink">浏览器</a>里打开时，不管这个链接是公众号里的内容还是扫码打开的链接，分享给好友或是朋友圈时，分享的内容默认从网页中取，包括页面中的图片和title。当页面中没有图片时，会采用平台默认的图片，当页面没有title时，会使用页面的链接地址作为分享的标题。这里可以通过设置shareData对象和调用jsbridge方法自定义分享的数据，包括分享的图片，标题，描述等。</div>
011.
11
012.
12 <script>
013.
13 window.shareData = {
014.
14 "imgUrl":'http://m3.img.srcdd.com/farm5/d/2014/1012/21/791FDBCEFB8B31A0AF6EFBFE84CB41D7_B250_400_250_302.jpeg',
015.
15 "tImgUrl":"http://m1.img.srcdd.com/farm4/d/2014/1012/21/E01EA983123F6279E784F17A37DFDC7B_B250_400_250_250.jpeg",
016.
16 "fImgUrl":"http://m2.img.srcdd.com/farm4/d/2014/1012/21/A77FB27F302693357F48BD6273768896_B250_400_250_270.jpeg",
017.
17 "wImgUrl":"http://m3.img.srcdd.com/farm5/d/2014/1012/21/B049FFAA94A568378BE08887609265E2_B250_400_250_265.jpeg",
018.
18 "timeLineLink": location.href,
019.
19 "sendFriendLink": location.href,
020.
20 "weiboLink": location.href,
021.
21 "tTitle": "分享到朋友圈的标题",
022.
22 "tContent": "分享到朋友圈的描述",
023.
23 "fTitle": "分享给好友的标题",
024.
24 "fContent": "分享给好友的描述",
025.
25 "wContent": "分享到微博的内容"
026.
26 };
027.
27
028.
28 //分享给好友
029.
29 var _weixinSendAppMessage = function(){
030.
30 WeixinJSBridge.on('menu:share:appmessage', function (argv) {
031.
31 WeixinJSBridge.invoke('sendAppMessage', {
032.
32 "img_url": window.shareData.imgUrl,
033.
33 "img_width": "640",
034.
34 "img_height": "640",
035.
35 "link": window.shareData.sendFriendLink,
036.
36 "desc": window.shareData.fContent,
037.
37 "title": window.shareData.fTitle
038.
38 }, function (res) {
039.
39 //不用处理，客户端会有分享结果提示
040.
40 })
041.
41 });
042.
42 };
043.
43
044.
44 //分享到朋友圈
045.
45 var _weixinShareTimeline = function(){
046.
46 WeixinJSBridge.on('menu:share:timeline', function (argv) {
047.
47 WeixinJSBridge.invoke('shareTimeline', {
048.
48 "img_url": window.shareData.imgUrl,
049.
49 "img_width": "640",
050.
50 "img_height": "640",
051.
51 "link": window.shareData.timeLineLink,
052.
52 "desc": window.shareData.tContent,
053.
53 "title": window.shareData.tTitle
054.
54 }, function (res) {
055.
55 //不用处理，客户端会有分享结果提示
056.
56 });
057.
57 });
058.
58 };
059.
59
060.
60 //分享给好友
061.
61 var _yixinSendAppMessage = function(){
062.
62 YixinJSBridge.on('menu:share:appmessage', function (argv) {
063.
63 YixinJSBridge.invoke('sendAppMessage', {
064.
64 "img_url": window.shareData.imgUrl,
065.
65 "img_width": "640",
066.
66 "img_height": "640",
067.
67 "link": window.shareData.sendFriendLink,
068.
68 "desc": window.shareData.fContent,
069.
69 "title": window.shareData.fTitle
070.
70 }, function (res) {
071.
71 //不用处理，客户端会有分享结果提示
072.
72 })
073.
73 });
074.
74 };
075.
75
076.
76 //分享到朋友圈
077.
77 var _yixinShareTimeline = function(){
078.
78 YixinJSBridge.on('menu:share:timeline', function (argv) {
079.
79 YixinJSBridge.invoke('shareTimeline', {
080.
80 "img_url": window.shareData.imgUrl,
081.
81 "img_width": "640",
082.
82 "img_height": "640",
083.
83 "link": window.shareData.timeLineLink,
084.
84 "desc": window.shareData.tContent,
085.
85 "title": window.shareData.tTitle
086.
86 }, function (res) {
087.
87 //不用处理，客户端会有分享结果提示
088.
88 });
089.
89 });
090.
90 };
091.
91
092.
92 //分享到微博
093.
93 var _yixinShareWeibo = function(){
094.
94 YixinJSBridge.on('menu:share:weibo', function (argv) {
095.
95 YixinJSBridge.invoke('shareWeibo', {
096.
96 "content": window.shareData.wContent,
097.
97 "url": window.shareData.weiboLink,
098.
98 }, function (res) {
099.
99 //不用处理，客户端会有分享结果提示
100.
100 });
101.
101 });
102.
102 };
103.
103
104.
104 if(navigator.userAgent.toLowerCase().indexOf('micromessenger')>0) {
105.
105 if(!!window.WeixinJSBridge){
106.
106 _weixinSendAppMessage();
107.
107 _weixinShareTimeline();
108.
108 }else{
109.
109 document.addEventListener('WeixinJSBridgeReady',function(){
110.
110 _weixinSendAppMessage();
111.
111 _weixinShareTimeline();
112.
112 },false);
113.
113 }
114.
114 }else if(navigator.userAgent.toLowerCase().indexOf('yixin') > 0){
115.
115 if(!!window.YixinJSBridge){
116.
116 _yixinSendAppMessage();
117.
117 _yixinShareTimeline();
118.
118 }else{
119.
119 document.addEventListener('YixinJSBridgeReady', function() {
120.
120 _yixinSendAppMessage();
121.
121 _yixinShareTimeline();
122.
122 },false);
123.
123 }
124.
124 }
125.
125 </script>
126.
126 </body>
127.
127 </html>
扫一扫
522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
