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

查看全文

相关阅读:
快速实现一个带后端服务的 Vue 项目，用云开发Vue插件！
做好内容安全检测，和风险说「再见」（下）！
新能力｜云调用支持微信支付啦！
获奖结果公布|2020腾讯犀牛鸟云开发校园技术布道师养成计划
 SpringMVC原理及流程解析
 Mysql梳理-关于索引/引擎与锁
 写在庚子年之前
 Spring的BeanPostProcessor后置处理器与bean的生命周期
 AQS系列（六）- Semaphore的使用及原理
 AQS系列（五）- CountDownLatch的使用及原理

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