js实现通用的微信分享组件示例


Posted in Javascript onMarch 10, 2014

一、可定义的信息

1、分享时显示的LOGO;
2、分享LOGO的宽度;
3、分享LOGO的高度;
4、分享出去显示的标题(默认调用网页标题);
5、分享出去显示的描述(默认调用网页标题);
6、分享链接(默认为当前页面的URL)。
7、分享微信的APPID(一般为空)。

二、使用方法

1、引入微信分享组件js:

/*******************************
 * Author:Mr.Think
 * Description:微信分享通用代码
 * 使用方法:_WXShare('分享显示的LOGO','LOGO宽度','LOGO高度','分享标题','分享描述','分享链接','微信APPID(一般不用填)');
 *******************************/
function _WXShare(img,width,height,title,desc,url,appid){
    //初始化参数
    img=img||'http://a.zhixun.in/plug/img/ico-share.png';
    width=width||100;
    height=height||100;
    title=title||document.title;
    desc=desc||document.title;
    url=url||document.location.href;
    appid=appid||'';
    //微信内置方法
    function _ShareFriend() {
        WeixinJSBridge.invoke('sendAppMessage',{
              'appid': appid,
              'img_url': img,
              'img_width': width,
              'img_height': height,
              'link': url,
              'desc': desc,
              'title': title
              }, function(res){
                _report('send_msg', res.err_msg);
          })
    }
    function _ShareTL() {
        WeixinJSBridge.invoke('shareTimeline',{
              'img_url': img,
              'img_width': width,
              'img_height': height,
              'link': url,
              'desc': desc,
              'title': title
              }, function(res) {
              _report('timeline', res.err_msg);
              });
    }
    function _ShareWB() {
        WeixinJSBridge.invoke('shareWeibo',{
              'content': desc,
              'url': url,
              }, function(res) {
              _report('weibo', res.err_msg);
              });
    }
    // 当微信内置浏览器初始化后会触发WeixinJSBridgeReady事件。
    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
            // 发送给好友
            WeixinJSBridge.on('menu:share:appmessage', function(argv){
                _ShareFriend();
          });
            // 分享到朋友圈
            WeixinJSBridge.on('menu:share:timeline', function(argv){
                _ShareTL();
                });
            // 分享到微博
            WeixinJSBridge.on('menu:share:weibo', function(argv){
                _ShareWB();
           });
    }, false);
}
Javascript 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
jquery基础教程之数组使用详解
Mar 10 #Javascript
查询json的数据结构的8种方式简介
Mar 10 #Javascript
js 3秒后跳转页面的实现代码
Mar 10 #Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 #Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 #Javascript
使用js操作css实现js改变背景图片示例
Mar 10 #Javascript
红米手机抢购的js代码
Mar 10 #Javascript
You might like
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
泛谈JS逻辑判断选择器 || &&
2019/05/24 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
scrapy头部修改的方法详解
2020/12/06 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
电子商务系毕业生自荐信
2014/05/29 职场文书
党建工作整改措施
2014/10/28 职场文书
房贷收入证明范本
2015/06/12 职场文书
单位工资证明范本
2015/06/12 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python