UDN-企业互联网技术人气社区

板块导航

浏览  : 593
回复  : 2

[原生js] js实现通用的微信分享组件示例

[复制链接]
西北的风的头像 楼主
发表于 2017-1-17 16:02:07 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了微信分享通用组件,用于微信浏览器内浏览网页的分享信息定义,需要的朋友可以参考下

  一、可定义的信息
  
  1、分享时显示的LOGO;
  
  2、分享LOGO的宽度;
  
  3、分享LOGO的高度;
  
  4、分享出去显示的标题(默认调用网页标题);
  
  5、分享出去显示的描述(默认调用网页标题);
  
  6、分享链接(默认为当前页面的URL)。
  
  7、分享微信的APPID(一般为空)。
  
  二、使用方法
  
  1、引入微信分享组件js:

  1. /*******************************
  2.  * Author:Mr.Think
  3.  * Description:微信分享通用代码
  4.  * 使用方法:_WXShare('分享显示的LOGO','LOGO宽度','LOGO高度','分享标题','分享描述','分享链接','微信APPID(一般不用填)');
  5.  *******************************/
  6. function _WXShare(img,width,height,title,desc,url,appid){
  7.     //初始化参数
  8.     img=img||'http://a.zhixun.in/plug/img/ico-share.png';
  9.     width=width||100;
  10.     height=height||100;
  11.     title=title||document.title;
  12.     desc=desc||document.title;
  13.     url=url||document.location.href;
  14.     appid=appid||'';
  15.     //微信内置方法
  16.     function _ShareFriend() {
  17.         WeixinJSBridge.invoke('sendAppMessage',{
  18.               'appid': appid,
  19.               'img_url': img,
  20.               'img_width': width,
  21.               'img_height': height,
  22.               'link': url,
  23.               'desc': desc,
  24.               'title': title
  25.               }, function(res){
  26.                 _report('send_msg', res.err_msg);
  27.           })
  28.     }
  29.     function _ShareTL() {
  30.         WeixinJSBridge.invoke('shareTimeline',{
  31.               'img_url': img,
  32.               'img_width': width,
  33.               'img_height': height,
  34.               'link': url,
  35.               'desc': desc,
  36.               'title': title
  37.               }, function(res) {
  38.               _report('timeline', res.err_msg);
  39.               });
  40.     }
  41.     function _ShareWB() {
  42.         WeixinJSBridge.invoke('shareWeibo',{
  43.               'content': desc,
  44.               'url': url,
  45.               }, function(res) {
  46.               _report('weibo', res.err_msg);
  47.               });
  48.     }
  49.     // 当微信内置浏览器初始化后会触发WeixinJSBridgeReady事件。
  50.     document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  51.             // 发送给好友
  52.             WeixinJSBridge.on('menu:share:appmessage', function(argv){
  53.                 _ShareFriend();
  54.           });
  55.             // 分享到朋友圈
  56.             WeixinJSBridge.on('menu:share:timeline', function(argv){
  57.                 _ShareTL();
  58.                 });
  59.             // 分享到微博
  60.             WeixinJSBridge.on('menu:share:weibo', function(argv){
  61.                 _ShareWB();
  62.            });
  63.     }, false);
  64. }
复制代码

相关帖子

发表于 2017-1-17 16:02:46 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

发表于 2017-1-17 16:02:47 来自手机 | 显示全部楼层
又见楼主分享帖子
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部