自定义微信易信平台分享内容
當(dāng)一個(gè)鏈接在微信或易信瀏覽器里打開時(shí)，不管這個(gè)鏈接是公眾號(hào)里的內(nèi)容還是掃碼打開的鏈接，分享給好友或是朋友圈時(shí)，分享的內(nèi)容默認(rèn)從網(wǎng)頁(yè)中取，包括頁(yè)面中的圖片和title。當(dāng)頁(yè)面中沒有圖片時(shí)，會(huì)采用平臺(tái)默認(rèn)的圖片，當(dāng)頁(yè)面沒有title時(shí)，會(huì)使用頁(yè)面的鏈接地址作為分享的標(biāo)題。這里可以通過(guò)設(shè)置shareData對(duì)象和調(diào)用jsbridge方法自定義分享的數(shù)據(jù)，包括分享的圖片，標(biāo)題，描述等。
像這種代碼太具有依賴性，使用方法完全取決于對(duì)方平臺(tái)的接口，相對(duì)來(lái)說(shuō)，維護(hù)成本也較高。不過(guò)有時(shí)為了項(xiàng)目的推廣和流量，這樣做也是值得的。
1.首先定義shareData對(duì)象來(lái)保存分享的數(shù)據(jù)
view sourceprint?
01.window.shareData = {
02."imgUrl":?"圖片鏈接",
03."tImgUrl":?"分享到朋友圈的圖片",
04."fImgUrl":?"分享給好友的圖片",
05."wImgUrl":?"分享到微博的圖片",
06."timeLineLink":?"分享到朋友圈的鏈接",
07."sendFriendLink":?"分享給好友的鏈接",
08."weiboLink":?"分享到微博的連接",
09."tTitle":?"分享到朋友圈的標(biāo)題",
10."tContent":?"分享到朋友圈的描述",
11."fTitle":?"分享給好友的標(biāo)題",
12."fContent":?"分享給好友的描述",
13."wContent":?"分享到微博的內(nèi)容"
14.};
如果tImgUrl，fImgUrl，wImgUrl沒有的話則從imgUrl里取值。
2.調(diào)用jsbridge方法
微信支持分享到好友，朋友圈。易信則支持分享到好友，朋友圈，新浪微博。
客戶端處理流程為：
1.檢測(cè)web是否監(jiān)聽相應(yīng)的分享事件（'menu:share:appmessage'，'menu:share:timeline'，'menu:share:weibo'），如果web監(jiān)聽這些事件則觸發(fā)這些事件，沒有則到步驟2。
2.檢查window下是否定義shareData，如果定義該數(shù)據(jù)則分享該數(shù)據(jù)中的內(nèi)容，沒有則到步驟3。
3.使用默認(rèn)的分享機(jī)制(去網(wǎng)頁(yè)抓取分享內(nèi)容)。
方法調(diào)用，易信為例
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.不用處理，客戶端會(huì)有分享結(jié)果提示
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.不用處理，客戶端會(huì)有分享結(jié)果提示
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.不用處理，客戶端會(huì)有分享結(jié)果提示
7.});
8.});
易信最新版本支持。
3.案例說(shuō)明
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>個(gè)性化定制微信易信平臺(tái)分享內(nèi)容</title>
007.7?</head>
008.8
009.9?<body>
010.10?<div?class="m-shareintro">當(dāng)一個(gè)鏈接在微信或易信<a href="http://www.it165.net/edu/ewl/"target="_blank"?class="keylink">瀏覽器</a>里打開時(shí)，不管這個(gè)鏈接是公眾號(hào)里的內(nèi)容還是掃碼打開的鏈接，分享給好友或是朋友圈時(shí)，分享的內(nèi)容默認(rèn)從網(wǎng)頁(yè)中取，包括頁(yè)面中的圖片和title。當(dāng)頁(yè)面中沒有圖片時(shí)，會(huì)采用平臺(tái)默認(rèn)的圖片，當(dāng)頁(yè)面沒有title時(shí)，會(huì)使用頁(yè)面的鏈接地址作為分享的標(biāo)題。這里可以通過(guò)設(shè)置shareData對(duì)象和調(diào)用jsbridge方法自定義分享的數(shù)據(jù)，包括分享的圖片，標(biāo)題，描述等。</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":?"分享到朋友圈的標(biāo)題",
022.22?????"tContent":?"分享到朋友圈的描述",
023.23?????"fTitle":?"分享給好友的標(biāo)題",
024.24?????"fContent":?"分享給好友的描述",
025.25?????"wContent":?"分享到微博的內(nèi)容"
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?????????????//不用處理，客戶端會(huì)有分享結(jié)果提示
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?????????????//不用處理，客戶端會(huì)有分享結(jié)果提示
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?????????????//不用處理，客戶端會(huì)有分享結(jié)果提示
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?????????????//不用處理，客戶端會(huì)有分享結(jié)果提示
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?????????????//不用處理，客戶端會(huì)有分享結(jié)果提示
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>
總結(jié)
以上是生活随笔為你收集整理的自定义微信易信平台分享内容的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： wamp5的www目录设置
- 下一篇： 学习笔记——Linux简介以及ubunt