zoukankan html css js c++ java

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

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

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

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

window.shareData = {
        "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>

4. 案例下载http://pan.baidu.com/s/1jGvbYOe

查看全文

相关阅读:
Java实现 LeetCode 136 只出现一次的数字
 Java实现 LeetCode 136 只出现一次的数字
 Java实现 LeetCode 136 只出现一次的数字
 Java实现 LeetCode 135 分发糖果
 Java实现 LeetCode 135 分发糖果
 Java实现 LeetCode 135 分发糖果
 Java实现 LeetCode 134 加油站
 Java实现 LeetCode 134 加油站
 Java实现 LeetCode 134 加油站
 Java实现 LeetCode 133 克隆图

原文地址：https://www.cnblogs.com/zourong/p/4024545.html