自定义微信易信平台分享内容
當一個鏈接在微信或易信瀏覽器里打開時，不管這個鏈接是公眾號里的內容還是掃碼打開的鏈接，分享給好友或是朋友圈時，分享的內容默認從網頁中取，包括頁面中的圖片和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>
總結
以上是生活随笔為你收集整理的自定义微信易信平台分享内容的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： wamp5的www目录设置
- 下一篇： 对症下药:删除顽固文件夹方法汇总