DIV CSS 佈局教程網

本文實例講述了微信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中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。