您的位置：首页 > 其它

shareData

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

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

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

view sourceprint?

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.分享给好友

view sourceprint?

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.分享到朋友圈

view sourceprint?

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.分享到微博

view sourceprint?

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.案例说明

view sourceprint?

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航