微信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 相关文章推荐
javascript之典型高阶函数应用介绍
Jan 10 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
PHP 读取Postgresql中的数组
2013/04/14 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
php学习笔记之基础知识
2014/11/08 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
Python函数嵌套实例
2014/09/23 Python
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
详解python调度框架APScheduler使用
2017/03/28 Python
python3 爬取图片的实例代码
2018/11/06 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
django中嵌套的try-except实例
2020/05/21 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
文员岗位职责
2013/11/09 职场文书
员工入职担保书范文
2014/04/01 职场文书
文化产业实施方案
2014/06/07 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python