`
donghang
  • 浏览: 5049 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

阅读更多

做人厚道,这是转载地址,是我见过写的比较好的自定义内容分享方法大笑

 

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

 

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>个性化定制微信易信平台分享内容</title>
</head>

<body>
<div class="m-shareintro">当一个链接在微信或易信浏览器里打开时,不管这个链接是公众号里的内容还是扫码打开的链接,分享给好友或是朋友圈时,分享的内容默认从网页中取,包括页面中的图片和title。当页面中没有图片时,会采用平台默认的图片,当页面没有title时,会使用页面的链接地址作为分享的标题。这里可以通过设置shareData对象和调用jsbridge方法自定义分享的数据,包括分享的图片,标题,描述等。</div>
<script>
 window.shareData = {
     "imgUrl": 'http://m3.img.srcdd.com/farm5/d/2014/1012/21/791FDBCEFB8B31A0AF6EFBFE84CB41D7_B250_400_250_302.jpeg',   
     "tImgUrl": "http://m1.img.srcdd.com/farm4/d/2014/1012/21/E01EA983123F6279E784F17A37DFDC7B_B250_400_250_250.jpeg",
     "fImgUrl": "http://m2.img.srcdd.com/farm4/d/2014/1012/21/A77FB27F302693357F48BD6273768896_B250_400_250_270.jpeg",
     "wImgUrl": "http://m3.img.srcdd.com/farm5/d/2014/1012/21/B049FFAA94A568378BE08887609265E2_B250_400_250_265.jpeg",
     "timeLineLink": location.href,
     "sendFriendLink": location.href,
     "weiboLink": location.href,
     "tTitle": "分享到朋友圈的标题",
     "tContent": "分享到朋友圈的描述",
     "fTitle": "分享给好友的标题",
     "fContent": "分享给好友的描述",
     "wContent": "分享到微博的内容"
 };
 
 //分享给好友
 var _weixinSendAppMessage = function(){
     WeixinJSBridge.on('menu:share:appmessage', function (argv) {
         WeixinJSBridge.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) {
             //不用处理,客户端会有分享结果提示
         })
     });
 };
 
 //分享到朋友圈
 var _weixinShareTimeline = function(){
     WeixinJSBridge.on('menu:share:timeline', function (argv) {
         WeixinJSBridge.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) {
             //不用处理,客户端会有分享结果提示
         });
     });
 };
     
 //分享给好友
 var _yixinSendAppMessage = function(){
     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) {
             //不用处理,客户端会有分享结果提示
         })
     });
 };
 
 //分享到朋友圈
 var _yixinShareTimeline = function(){
     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) {
             //不用处理,客户端会有分享结果提示
         });
     });
 };
 
 //分享到微博
 var _yixinShareWeibo = function(){
     YixinJSBridge.on('menu:share:weibo', function (argv) {
         YixinJSBridge.invoke('shareWeibo', {
             "content": window.shareData.wContent,
             "url": window.shareData.weiboLink,
         }, function (res) {
             //不用处理,客户端会有分享结果提示
         });
     });    
 };
 
 if(navigator.userAgent.toLowerCase().indexOf('micromessenger')>0) {
     if(!!window.WeixinJSBridge){
         _weixinSendAppMessage();
         _weixinShareTimeline();
     }else{
         document.addEventListener('WeixinJSBridgeReady',function(){
             _weixinSendAppMessage();
             _weixinShareTimeline();
         },false);
     }
 }else if(navigator.userAgent.toLowerCase().indexOf('yixin') > 0){
     if(!!window.YixinJSBridge){
         _yixinSendAppMessage();
         _yixinShareTimeline();
     }else{
         document.addEventListener('YixinJSBridgeReady', function() {
             _yixinSendAppMessage();
             _yixinShareTimeline();
         },false);
     }
 }
</script>
</body>
</html>
分享到:
评论

相关推荐

    Android微信易信分享

    在Android平台上,微信和易信分享是常见的社交功能,允许用户将内容如文字、图片、链接等快速地发送给朋友或者发布到朋友圈。本篇将详细介绍如何在Android应用中集成微信和易信的分享功能。 首先,我们需要了解微信...

    用于创建微信易信自定义菜单的php源码

    用于创建微信易信自定义菜单的php源码,经过了我的改进。 里面有详细的注释,给大家学习学习。

    一键分享到微信,易信,以及全部可选app

    在移动应用开发中,"一键分享到微信,易信,以及全部可选app"是一种常见的功能,它允许用户轻松地将内容(如文本、图片、链接等)分享到多个社交媒体平台,极大地提升了用户体验。这个功能通常涉及到Android或iOS...

    高仿微信,易信主界面

    1. **创建适配器**:`ViewPage`需要一个继承自`PagerAdapter`的自定义适配器,用于填充每个页面的内容。适配器需要重写`getCount()`来确定页面数量,以及`instantiateItem(ViewGroup, int)`来实例化每个页面的视图。...

    超棒的易信/微信C# .NET SDK,有源代码,直接可以用于生产。有了这个,别无所求了

    (同时由于易信的API目前与微信保持一致,此SDK也可以直接用于易信,如需使用易信的自定义菜单,通用接口改成易信的通讯地址即可) 已经支持用户会话上下文(解决服务器无法使用Session处理用户信息的问题)。

    易信自定义菜单-直接可用

    易信自定义菜单,直接可用。分享给大家。希望对你有所帮助。

    易信 QQ 微信 陌陌 表情 Android版

    标题中的“易信 QQ 微信 陌陌 表情 Android版”暗示了这个压缩包可能包含了一系列适用于Android设备的表情包或相关应用组件,主要针对中国市场上流行的即时通讯软件——易信、QQ、微信和陌陌。这些软件都有丰富的...

    C#开发微信Demo源码

    &gt; (同时由于易信的API目前与微信保持一致,此SDK也可以直接用于易信,如需使用易信的自定义菜单,通用接口改成易信的通讯地址即可) * 已经支持用户会话上下文(解决服务器无法使用Session处理用户信息的问题)。 ...

    Android仿 易信 QQ 微信 陌陌 表情

    总之,实现类似易信、QQ、微信、陌陌等应用的表情功能,涉及数据库操作、UI设计、图片处理等多个技术领域,需要综合运用多种Android开发技巧。通过学习和研究`FaceDemo`,开发者可以更好地理解和掌握这一过程。

    北牧微信营销系统CMS企业版 v1.0

    微信公众平台接口、微博开放接口、易信开放接口、淘宝商品导入接口、阿里巴巴商品导入接口,店铺可正常接入三方平台,也可跨平台使用 2.店铺包含:手机前端,PC后台,手机后台 3.购物系统(多规格商品、库存、购物车...

    微信商城分销系统源码2.0

    BingSNS微信分销版程序可以给微商用户实现在移动端开店的功能,开通的供销店还可以再开分销店,每个分销店都是独立的,运作模式类似于天猫供销,可接入微信公众账号、易信、微博等第三方开放平台,用户没有上限设置...

    Micronet ShopBest三网合一微信商城系统

    ShopBest商城=微信商城+易信商城+手机商城+PC商城+分佣系统+陌客客服+MEP快递打印系统+API开放平台 会员系统 完善的会员管理系统,自动保存密码,会员等级,积分管理,积分兑换,积分商城,导入导出等功能。 支付...

    高仿最新微信主界面

    【标题】:“高仿最新微信主界面”是一个项目,旨在模仿微信和易信的应用程序主界面设计。这个项目可能是为了教学目的,帮助开发者学习如何构建类似流行即时通讯应用的用户界面,尤其是对于初学者或者想要提升UI/UX...

    bingsns 微信分销系统源码(多用户版) V2.0

    1.微信公众平台接口、微博开放接口、易信开放接口、淘宝商品导入接口、阿里巴巴商品导入接口,店铺可正常接入三方平台,也可跨平台使用 2.店铺包含:手机前端,PC后台,手机后台 3.购物系统(多规格商品、库存、...

    WeiXinMPSDK-master:已发表

    (同时由于易信的API目前与微信保持一致,此SDK也可以直接用于易信,如需使用易信的自定义菜单,通用接口改成易信的通讯地址即可) 已经支持用户会话上下文(解决服务器无法使用Session处理用户信息的问题)。 目前...

    信游免费版

    为了满足不同运营者的需求,信游免费版允许用户自定义平台界面,包括LOGO、色彩搭配、布局等,打造个性化的游戏运营平台。 九、运维支持 除了基本的功能,信游免费版还提供了运维工具和文档,帮助用户进行服务器...

    基于各大即时通讯软件切换的APP设计书

    市场上涌现出了如QQ、微信、易信等多种即时通讯应用,每个应用都有其独特的功能和用户群体。然而,对于用户来说,频繁地在不同应用之间切换既不方便也不高效。针对这一问题,本项目设计了一款名为“onessage”的APP...

    有客宝快捷回复软件

    有客宝软件支持QQ、YY、旺旺、千牛、京咚、飞信、微信、易信、钉钉等各种常见IM软件的快捷回复功能!支持各种IM软件的表情互相发送! 有客宝产品团队致力于将最好的快捷回复软件呈现给用户,我们将不断改进和优化...

    有客宝快捷回复软件 v1.0.zip

    软件支持PC端、Android端和iOS端,支持QQ、YY、旺旺、千牛、京咚、飞信、微信、易信、钉钉等各种常见IM软件、不仅实现了客服的快捷回复功能,而且根据客服工作的需要,扩展了密码功能、表情功能、网址收藏功能和助手...

    android 用三张图片实现七个音量等级的录音效果

    本话题将深入探讨如何使用三张图片巧妙地实现七个不同音量等级的录音效果,以达到类似QQ、微信、易信等热门即时通讯应用中的功能。这既节约了资源,又保证了界面的动态感。 首先,我们需要理解音量等级的概念。在...

Global site tag (gtag.js) - Google Analytics