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


    当一个链接在微信或易信浏览器里打开时,不管这个链接是公众号里的内容还是扫码打开的链接,分享给好友或是朋友圈时,分享的内容默认从网页中取,包括页面中的图片和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

  • 相关阅读:
    学生管理系统(2:添加主界面窗口)
    Qfile
    QButtonGroup
    comboBox
    QLineEdit
    QMessageBox
    实现简单的计算器(控制器代码)
    实现简单的计算器(计算功能模块实现)
    网络编程基础【HTML编程】
    网络编程基础【正则表达式】
  • 原文地址:https://www.cnblogs.com/zourong/p/4024545.html
Copyright © 2020-2023  润新知