mshare.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. ;(function($, window, document, undefined) {
  2. function regist(mName, module) {
  3. if (typeof window.brickjs === "undefined") {
  4. window.brickjs = {};
  5. }
  6. brickjs[mName] = module;
  7. }
  8. ;/**
  9. * @file 微信,微博分享
  10. * @author jie.qin@condenast.com.cn
  11. * @version 0.1.0
  12. * @requires http://js.selfimg.com.cn/jquery/jquery-1.7.1.min.js|http://js.selfimg.com.cn/gallery/zepto/1.1.4/zepto.min.js
  13. * @requires http://js.selfimg.com.cn/lib/jweixin-1.0.0.js
  14. * @example <a href="../mshare/examples/demo.html">demo.html</a>
  15. * @see http://js.selfimg.com.cn/brickjs/mshare/0.1.0/mshare.min.js
  16. */
  17. var isWeixin = navigator.userAgent.toLowerCase().indexOf("micromessenger") > -1;
  18. //isWeixin = true;
  19. /**
  20. * 微信,微博分享定义组件。(微博分享功能,可以在按钮上配置属性实现动态替换分享属性,属性名称:data-desc,data-sUrl,data-imgUrl)
  21. * @class
  22. * @author jie.qin@condenast.com.cn
  23. * @version 0.1.0
  24. * @requires http://js.selfimg.com.cn/jquery/jquery-1.7.1.min.js|http://js.selfimg.com.cn/gallery/zepto/1.1.4/zepto.min.js
  25. * @requires http://js.selfimg.com.cn/lib/jweixin-1.0.0.js
  26. * @example <a href="../mshare/examples/demo.html">demo.html</a>
  27. * @see http://js.selfimg.com.cn/brickjs/mshare/0.1.0/mshare.min.js
  28. * @param {Object} cfgs 配置项
  29. * @param {String} [cfgs.site=""] 1、vogue 2、self 3、gq 4、adstyle 5、cnt 6、subscribe (必须,用于微信获得签名和统计使用)
  30. * @param {String} [cfgs.catalog=""] 栏目id(仅对微博有效)
  31. * @param {String} [cfgs.sUrl=window.location.href] 分享地址url
  32. * @param {String} [cfgs.title=document.title] 分享标题(仅对微信有效,微博分享使用desc)
  33. * @param {String} [cfgs.desc=""] 分享说明
  34. * @param {String} [cfgs.imgUrl=""] 分享时携带图片地址
  35. * @param {String} [cfgs.ralateUid=""] (仅对微博有效)
  36. * @param {String} [cfgs.timelineCallback] 分享到朋友圈回调(仅对微信有效)
  37. * @param {String} [cfgs.sendMessageCallback] 发送给朋友回调(仅对微信有效)
  38. * @param {String} [cfgs.appKey] 分享到微信和微博对应的appkey
  39. * @param {String} [cfgs.appKey.tsina] 分享到微博对应的appkey
  40. * @param {String} [cfgs.wxGuide] 分享到微信引导(仅对微信有效)
  41. * @param {String} [cfgs.wxGuide.tpl] 分享到微信引导弹层自定义模板
  42. * @param {String} [cfgs.wxGuide.imgUrl] 分享到微信引导图片地址
  43. * @param {String} [cfgs.wxGuide.width] 分享到微信引导图片宽度
  44. * @param {String} [cfgs.wxGuide.height] 分享到微信引导图片高度
  45. * @param {Object} [cfgs.wxGuide.style={top:0,right:0}] 分享到微信引导弹层样式
  46. * @param {Object} selector 绑定的对象
  47. */
  48. function MShare(cfgs, selector) {
  49. this._cfgs = {
  50. site: "",
  51. catalog: "",
  52. sUrl: window.location.href,
  53. title: document.title,
  54. imgUrl: "",
  55. desc: "",
  56. appKey: "",
  57. ralateUid: "",
  58. source_id:"",
  59. source_table :"",
  60. timelineCallback: function() {},
  61. sendMessageCallback: function() {},
  62. shareQQCallback: function() {},
  63. wxGuide: {
  64. tpl: '',
  65. imgUrl: 'http://css.selfimg.com.cn/vogue/mdiscovery/images/weixin-guide.png',
  66. width: 295,
  67. height: 273,
  68. style: {
  69. right: 0,
  70. top: 0
  71. }
  72. }
  73. };
  74. this.weixinSigned = 0;
  75. this.trigger = $(selector);
  76. this._baseUrl = "/collect.";
  77. this._tsinaParam = "get?platform=tsina&title={title}&url={url}&pic={pic}&site={site}&source_id={source_id}&source_table={source_table}&ralateUid={ralateUid}&appkey={appkey}&hash={hash}";
  78. this._init(cfgs, selector);
  79. this._reflux();
  80. }
  81. MShare.prototype = {
  82. _init: function(cfgs, selector) {
  83. var self = this;
  84. $.extend(true, this._cfgs, cfgs)
  85. if (selector) {
  86. $(selector).on('click', function() {
  87. if (isWeixin) {
  88. self._weixinGuide();
  89. } else {
  90. self._weiboShare($(this));
  91. }
  92. })
  93. }
  94. if (isWeixin) {
  95. this.weixinInit();
  96. }
  97. },
  98. _weixinGuide: function() {
  99. var cfg = this._cfgs,
  100. weixinCfg = cfg.wxGuide,
  101. defImg = weixinCfg.imgUrl,
  102. tpl = weixinCfg.tpl || '<div id="weixin_guide" style="position: fixed;background:url(http://css.selfimg.com.cn/cnt/mobile/images/blk80.png) repeat;left:0;top:0;right:0;bottom:0;z-index:1000;"><img src="' + defImg + '" style="position: absolute;z-index:100;" width="' + weixinCfg.width + '" height="' + weixinCfg.height + '"/></div>';
  103. $('#weixin_guide').remove();
  104. $(tpl).attr('id', 'weixin_guide').appendTo($('body'));
  105. $('#weixin_guide img').css(weixinCfg.style || {})
  106. setTimeout(function() {
  107. $('#weixin_guide').click(function() {
  108. $(this).remove();
  109. })
  110. }, 300)
  111. },
  112. /**
  113. * 对微信分享自定义配置
  114. * @param {Object} cfgs 配置项
  115. * @param {String} [cfgs.site=""] 1、vogue 2、self 3、gq 4、adstyle 5、cnt 6、subscribe(必须,用于微信获得签名和统计使用)
  116. * @param {String} [cfgs.sUrl=window.location.href] 分享地址url
  117. * @param {String} [cfgs.title=document.title] 分享标题
  118. * @param {String} [cfgs.desc=""] 分享说明
  119. * @param {String} [cfgs.imgUrl=""] 分享时携带图片地址
  120. * @param {String} [cfgs.timelineCallback] 分享到朋友圈回调
  121. * @param {String} [cfgs.sendMessageCallback] 发送给朋友回调
  122. * @param {String} [cfgs.shareQQCallback] 发送到QQ回调
  123. */
  124. weixinInit: function(cfgs) {
  125. var self = this,
  126. wxCfgs;
  127. cfgs && $.extend(true, this._cfgs, cfgs);
  128. wxCfgs = {
  129. "site": this._cfgs.website,
  130. "img_url": this._cfgs.imgUrl || "",
  131. "link": this._cfgs.sUrl || location.href,
  132. "desc": this._cfgs.desc || "",
  133. "title": this._cfgs.title || document.title,
  134. timelineCallback: this._cfgs.timelineCallback,
  135. sendMessageCallback: this._cfgs.sendMessageCallback,
  136. shareQQCallback: this._cfgs.shareQQCallback
  137. }
  138. alert(1);
  139. $.getJSON(VG.conf.root_domain + '?c=WeixinJsSDK&a=AjaxConfigData&site=' + wxCfgs.site + '&thisPageUrl=' + encodeURIComponent(location.href) + '&callback=?', function(d) {
  140. var d = d.msg;
  141. alert(d)
  142. if (d) {
  143. wx.config({
  144. //debug:true,
  145. appId: d.appId,
  146. timestamp: d.timestamp,
  147. nonceStr: d.nonceStr,
  148. signature: d.signature,
  149. jsApiList: [
  150. 'onMenuShareTimeline',
  151. 'onMenuShareAppMessage',
  152. 'onMenuShareQQ'
  153. ]
  154. });
  155. wx.ready(function() {
  156. wx.onMenuShareAppMessage({
  157. title: wxCfgs.title,
  158. desc: wxCfgs.desc,
  159. link: wxCfgs.link,
  160. imgUrl: wxCfgs.img_url,
  161. success: function(res) {
  162. wxCfgs.sendMessageCallback('success', res)
  163. self._shareLog(0, 1);
  164. },
  165. cancel: function(res) {
  166. wxCfgs.sendMessageCallback('cancel', res)
  167. self._shareLog(0, 2);
  168. },
  169. fail: function(res) {
  170. wxCfgs.sendMessageCallback('fail', res)
  171. self._shareLog(0, 0);
  172. }
  173. });
  174. wx.onMenuShareTimeline({
  175. title: wxCfgs.title,
  176. link: wxCfgs.link,
  177. imgUrl: wxCfgs.img_url,
  178. success: function(res) {
  179. wxCfgs.timelineCallback('success', res)
  180. self._shareLog(1, 1);
  181. },
  182. cancel: function(res) {
  183. wxCfgs.timelineCallback('cancel', res)
  184. self._shareLog(1, 2);
  185. },
  186. fail: function(res) {
  187. wxCfgs.timelineCallback('fail', res)
  188. self._shareLog(1, 0);
  189. }
  190. });
  191. wx.onMenuShareQQ({
  192. title: wxCfgs.title,
  193. link: wxCfgs.link,
  194. imgUrl: wxCfgs.img_url,
  195. success: function(res) {
  196. wxCfgs.shareQQCallback('success', res)
  197. self._shareLog(2, 1);
  198. },
  199. cancel: function(res) {
  200. wxCfgs.shareQQCallback('cancel', res)
  201. self._shareLog(2, 2);
  202. },
  203. fail: function(res) {
  204. wxCfgs.shareQQCallback('fail', res)
  205. self._shareLog(2, 0);
  206. }
  207. });
  208. });
  209. }
  210. })
  211. },
  212. /**
  213. * 重置分享自定义配置
  214. * @param {Object} cfg 自定义配置对象
  215. * @param {String} [cfg.sUrl=window.location.href] 分享地址url
  216. * @param {String} [cfg.title=document.title] 分享标题
  217. * @param {String} [cfg.desc=""] 分享说明
  218. * @param {String} [cfg.imgUrl] 分享时携带图片地址
  219. */
  220. reset: function(cfg) {
  221. var self = this;
  222. if (!isWeixin) {
  223. cfg.sUrl && self.trigger.data('sUrl', cfg.sUrl);
  224. cfg.desc && self.trigger.data('desc', cfg.desc);
  225. cfg.imgUrl && self.trigger.data("imgUrl", cfg.imgUrl);
  226. } else {
  227. this.weixinInit({
  228. sUrl: cfg.sUrl || self._cfgs.sUrl,
  229. desc: cfg.desc || self._cfgs.desc,
  230. imgUrl: cfg.imgUrl || self._cfgs.imgUrl,
  231. title: cfg.title || self._cfgs.title
  232. });
  233. }
  234. },
  235. _reflux: function() {
  236. var refer = document.referrer,
  237. url = document.location.href,
  238. param = location.search.substr(1),
  239. ua = navigator.userAgent;
  240. if (param.indexOf("tsina-") > -1 || param.indexOf("timeline") > -1 || param.indexOf("singlemessage") > -1 || param.indexOf("groupmessage") > -1) {
  241. $.getJSON(this._baseUrl + "reflux?" + "callback=?" + "&url=" + encodeURIComponent(url) + '&ua=' + ua + '&param=' + encodeURIComponent(param));
  242. }
  243. },
  244. _shareLog: function(actType, actResult) {
  245. var site = this._cfgs.website;
  246. //$.get('http://application.self.com.cn/wxapi/interface/sharecollect/collectdata?mp=' + site + '&url=' + encodeURIComponent(location.href) + '&ac=' + actType + '&sc=' + actResult + '&ua=' + encodeURIComponent(navigator.userAgent))
  247. },
  248. _weiboShare: function(trigger) {
  249. var self = this;
  250. var cfg = this._cfgs,
  251. params = {
  252. title: cfg.desc,
  253. url: cfg.sUrl,
  254. pic: cfg.imgUrl,
  255. site: cfg.site,
  256. cat: cfg.catalog,
  257. source_id: cfg.source_id,
  258. source_table: cfg.source_table,
  259. ralateUid: cfg.ralateUid,
  260. appkey: cfg.appKey.tsina
  261. },
  262. tgUrl = trigger.data('sUrl'),
  263. tgTitle = trigger.data('desc'),
  264. tgPic = trigger.data("imgUrl");
  265. params.title = encodeURIComponent(tgTitle ? tgTitle : params.title);
  266. params.url = encodeURIComponent(tgUrl ? tgUrl : params.url);
  267. params.pic = encodeURIComponent(tgPic ? tgPic : params.pic);
  268. var cmdUrl = this._baseUrl + self._formatUri(this._tsinaParam, params);
  269. window.open(cmdUrl);
  270. },
  271. _formatUri: function(uri, params) {
  272. var reg, uri = uri;
  273. for (var k in params) {
  274. reg = new RegExp("{" + k + "}", "g");
  275. uri = uri.replace(reg, params[k]);
  276. }
  277. return uri;
  278. }
  279. }
  280. ;regist("MShare",MShare);
  281. })((typeof Zepto !== 'undefined' ? Zepto : jQuery), window, document)