微信js-sdk分享功能接口常用逻辑封装示例


Posted in Javascript onOctober 13, 2016

本文实例讲述了微信js-sdk分享功能接口常用逻辑封装。分享给大家供大家参考,具体如下:

微信js-sdk 1.0,分享说明:

1.目前支持的分享接口5个,其中分享腾讯微博基本可以忽略

2.接口只是定义分享时的数据,没有提供触发分享功能

一、在ready事件使用使用示例

//分享对象使用
var shareData={
  title:'分享标题',
  desc:'分享描述',
  link:'http://www.gongjuji.net',
  imgUrl:'http://www.gongjuji.net/favicon.ico',
  success:function(){
    appendText('分享成功');
  },
  //用户取消
  cancel:function(){
    appendText('分享取消');
  }
}
var share=new wxShare(shareData);
share.bind();

二、封装类定义:

//微信分享事件监听,常用功能封装
(function(){
var wxShare=function(opts){
  var defaults={
    title:'分享标题',//分享标题,不能为空
    desc:'',//分享描述,可以为空,(分享到朋友圈,不支持描述)
    link:'',//分享页面地址,不能为空
    imgUrl:'',//分享是封面图片,不能为空
    success:function(){},//分享成功触发
    cancel:function(){} //分享取消触发,需要时可以调用
  }
  this.opts=$.extend({},defaults,opts);
}
wxShare.prototype={
  //绑定微信朋友圈,发送朋友
  bindWX:function(){
    var _opts=this.opts;
    //监听,分享到朋友圈
    wx.onMenuShareTimeline({
      title:_opts.title,
      link:_opts.link,
      imgUrl:_opts.imgUrl,
      success:function(){
        if(_opts.success)
          _opts.success();
      },
      calcel:function(){
        if(_opts.cancel)
          _opts.cancel();
      }
    });
    //监听,分享给朋友 (type,dataurl基本可以放弃不使用)
    wx.onMenuShareAppMessage({
      title: _opts.title, // 分享标题
      desc: _opts.desc, // 分享描述
      link: _opts.link, // 分享链接
      imgUrl: _opts.imgUrl, // 分享图标
      success: function () {
        if(_opts.success)
          _opts.success();
      },
      cancel: function () {
        if(_opts.cancel)
          _opts.cancel();
      }
    });
  },
  //绑定QQ空间,QQ好友
  bindQQ:function(){
    var _opts=this.opts;
    //监听,分享到QQ空间
    wx.onMenuShareQZone({
      title: _opts.title, // 分享标题
      desc: _opts.desc, // 分享描述
      link: _opts.link, // 分享链接
      imgUrl: _opts.imgUrl, // 分享图标
      success: function () {
        if(_opts.success)
          _opts.success();
      },
      cancel: function () {
        if(_opts.cancel)
          _opts.cancel();
      }
    });
    //监听,分享到QQ
    wx.onMenuShareQQ({
      title: _opts.title, // 分享标题
      desc: _opts.desc, // 分享描述
      link: _opts.link, // 分享链接
      imgUrl: _opts.imgUrl, // 分享图标
      success: function () {
        if(_opts.success)
          _opts.success();
      },
      cancel: function () {
        if(_opts.cancel)
          _opts.cancel();
      }
    });
  },
  //绑定默认,不使用腾讯微博
  bind:function(){
    this.bindWX();
    this.bindQQ();
  },
  //绑定所有,包括腾讯微博
  bindAll:function(){
    this.bind();
    var _opts=this.opts;
    //监听,分享到腾讯微博 (基本可以放弃不使用)
    wx.onMenuShareWeibo({
      title: _opts.title, // 分享标题
      desc:_opts.desc, // 分享描述
      link: _opts.link, // 分享链接
      imgUrl:_opts.imgUrl, // 分享图标
      success: function () {
        if(_opts.success)
          _opts.success();
      },
      cancel: function () {
        if(_opts.cancel)
          _opts.cancel();
      }
    });
  }
}
window.wxShare=wxShare;
})();

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
Jquery 获得服务器控件值的方法小结
May 11 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
js给table赋值的实例代码
Oct 13 #Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 #Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 #Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 #Javascript
Node.js中常规的文件操作总结
Oct 13 #Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 #Javascript
js图片切换具体实现代码
Oct 13 #Javascript
You might like
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
javascript some()函数用法详解
2014/11/13 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
JS 控制CSS样式表
2009/08/20 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
python3简单实现微信爬虫
2015/04/09 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Python list与NumPy array 区分详解
2019/11/06 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
技校教师求职简历的自我评价
2013/10/20 职场文书
机电一体化专业应届生求职信
2013/11/27 职场文书
动物科学专业毕业生的自我评价
2013/11/29 职场文书
管理信息系学生的自我评价
2014/01/11 职场文书
大学运动会入场词
2014/02/22 职场文书
中学生操行评语
2014/04/24 职场文书
关于倡议书的范文
2015/04/29 职场文书
工商局调档介绍信
2015/10/22 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
Oracle 触发器trigger使用案例
2022/02/24 Oracle