mshare.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  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. //var url = VG.conf.root_domain + '?c=WeixinJsSDK&a=AjaxConfigData&site=' + wxCfgs.site + '&thisPageUrl=' + encodeURIComponent(location.href) + '&callback=?';
  139. var url = VG.conf.root_domain + '?c=WeixinJsSDK&a=AjaxConfigData';
  140. $.ajax({
  141. type:'post',
  142. dataType:'jsonp',
  143. jsonp: 'jsonp_cb',
  144. url: url,
  145. data: {"thisPageUrl":encodeURIComponent(location.href)},
  146. success:function(data){
  147. var d = data.msg;
  148. wx.config({
  149. //debug:true,
  150. appId: d.appId,
  151. timestamp: d.timestamp,
  152. nonceStr: d.nonceStr,
  153. signature: d.signature,
  154. jsApiList: [
  155. 'onMenuShareTimeline',
  156. 'onMenuShareAppMessage',
  157. 'onMenuShareQQ'
  158. ]
  159. });
  160. wx.ready(function() {
  161. wx.onMenuShareAppMessage({
  162. title: wxCfgs.title,
  163. desc: wxCfgs.desc,
  164. link: wxCfgs.link,
  165. imgUrl: wxCfgs.img_url,
  166. success: function(res) {
  167. wxCfgs.sendMessageCallback('success', res)
  168. self._shareLog(0, 1);
  169. },
  170. cancel: function(res) {
  171. wxCfgs.sendMessageCallback('cancel', res)
  172. self._shareLog(0, 2);
  173. },
  174. fail: function(res) {
  175. wxCfgs.sendMessageCallback('fail', res)
  176. self._shareLog(0, 0);
  177. }
  178. });
  179. wx.onMenuShareTimeline({
  180. title: wxCfgs.title,
  181. link: wxCfgs.link,
  182. imgUrl: wxCfgs.img_url,
  183. success: function(res) {
  184. wxCfgs.timelineCallback('success', res)
  185. self._shareLog(1, 1);
  186. },
  187. cancel: function(res) {
  188. wxCfgs.timelineCallback('cancel', res)
  189. self._shareLog(1, 2);
  190. },
  191. fail: function(res) {
  192. wxCfgs.timelineCallback('fail', res)
  193. self._shareLog(1, 0);
  194. }
  195. });
  196. wx.onMenuShareQQ({
  197. title: wxCfgs.title,
  198. link: wxCfgs.link,
  199. imgUrl: wxCfgs.img_url,
  200. success: function(res) {
  201. wxCfgs.shareQQCallback('success', res)
  202. self._shareLog(2, 1);
  203. },
  204. cancel: function(res) {
  205. wxCfgs.shareQQCallback('cancel', res)
  206. self._shareLog(2, 2);
  207. },
  208. fail: function(res) {
  209. wxCfgs.shareQQCallback('fail', res)
  210. self._shareLog(2, 0);
  211. }
  212. });
  213. });
  214. },
  215. async:'true',
  216. timeout: 3000
  217. });
  218. /*
  219. $.getJSON(VG.conf.root_domain + '?c=WeixinJsSDK&a=AjaxConfigData&site=' + wxCfgs.site + '&thisPageUrl=' + encodeURIComponent(location.href) + '&callback=?', function(d) {
  220. var d = d.msg;
  221. if (d) {
  222. wx.config({
  223. //debug:true,
  224. appId: d.appId,
  225. timestamp: d.timestamp,
  226. nonceStr: d.nonceStr,
  227. signature: d.signature,
  228. jsApiList: [
  229. 'onMenuShareTimeline',
  230. 'onMenuShareAppMessage',
  231. 'onMenuShareQQ'
  232. ]
  233. });
  234. wx.ready(function() {
  235. wx.onMenuShareAppMessage({
  236. title: wxCfgs.title,
  237. desc: wxCfgs.desc,
  238. link: wxCfgs.link,
  239. imgUrl: wxCfgs.img_url,
  240. success: function(res) {
  241. wxCfgs.sendMessageCallback('success', res)
  242. self._shareLog(0, 1);
  243. },
  244. cancel: function(res) {
  245. wxCfgs.sendMessageCallback('cancel', res)
  246. self._shareLog(0, 2);
  247. },
  248. fail: function(res) {
  249. wxCfgs.sendMessageCallback('fail', res)
  250. self._shareLog(0, 0);
  251. }
  252. });
  253. wx.onMenuShareTimeline({
  254. title: wxCfgs.title,
  255. link: wxCfgs.link,
  256. imgUrl: wxCfgs.img_url,
  257. success: function(res) {
  258. wxCfgs.timelineCallback('success', res)
  259. self._shareLog(1, 1);
  260. },
  261. cancel: function(res) {
  262. wxCfgs.timelineCallback('cancel', res)
  263. self._shareLog(1, 2);
  264. },
  265. fail: function(res) {
  266. wxCfgs.timelineCallback('fail', res)
  267. self._shareLog(1, 0);
  268. }
  269. });
  270. wx.onMenuShareQQ({
  271. title: wxCfgs.title,
  272. link: wxCfgs.link,
  273. imgUrl: wxCfgs.img_url,
  274. success: function(res) {
  275. wxCfgs.shareQQCallback('success', res)
  276. self._shareLog(2, 1);
  277. },
  278. cancel: function(res) {
  279. wxCfgs.shareQQCallback('cancel', res)
  280. self._shareLog(2, 2);
  281. },
  282. fail: function(res) {
  283. wxCfgs.shareQQCallback('fail', res)
  284. self._shareLog(2, 0);
  285. }
  286. });
  287. });
  288. }
  289. })
  290. */
  291. },
  292. /**
  293. * 重置分享自定义配置
  294. * @param {Object} cfg 自定义配置对象
  295. * @param {String} [cfg.sUrl=window.location.href] 分享地址url
  296. * @param {String} [cfg.title=document.title] 分享标题
  297. * @param {String} [cfg.desc=""] 分享说明
  298. * @param {String} [cfg.imgUrl] 分享时携带图片地址
  299. */
  300. reset: function(cfg) {
  301. var self = this;
  302. if (!isWeixin) {
  303. cfg.sUrl && self.trigger.data('sUrl', cfg.sUrl);
  304. cfg.desc && self.trigger.data('desc', cfg.desc);
  305. cfg.imgUrl && self.trigger.data("imgUrl", cfg.imgUrl);
  306. } else {
  307. this.weixinInit({
  308. sUrl: cfg.sUrl || self._cfgs.sUrl,
  309. desc: cfg.desc || self._cfgs.desc,
  310. imgUrl: cfg.imgUrl || self._cfgs.imgUrl,
  311. title: cfg.title || self._cfgs.title
  312. });
  313. }
  314. },
  315. _reflux: function() {
  316. var refer = document.referrer,
  317. url = document.location.href,
  318. param = location.search.substr(1),
  319. ua = navigator.userAgent;
  320. if (param.indexOf("tsina-") > -1 || param.indexOf("timeline") > -1 || param.indexOf("singlemessage") > -1 || param.indexOf("groupmessage") > -1) {
  321. $.getJSON(this._baseUrl + "reflux?" + "callback=?" + "&url=" + encodeURIComponent(url) + '&ua=' + ua + '&param=' + encodeURIComponent(param));
  322. }
  323. },
  324. _shareLog: function(actType, actResult) {
  325. var site = this._cfgs.website;
  326. //$.get('http://application.self.com.cn/wxapi/interface/sharecollect/collectdata?mp=' + site + '&url=' + encodeURIComponent(location.href) + '&ac=' + actType + '&sc=' + actResult + '&ua=' + encodeURIComponent(navigator.userAgent))
  327. },
  328. _weiboShare: function(trigger) {
  329. var self = this;
  330. var cfg = this._cfgs,
  331. params = {
  332. title: cfg.desc,
  333. url: cfg.sUrl,
  334. pic: cfg.imgUrl,
  335. site: cfg.site,
  336. cat: cfg.catalog,
  337. source_id: cfg.source_id,
  338. source_table: cfg.source_table,
  339. ralateUid: cfg.ralateUid,
  340. appkey: cfg.appKey.tsina
  341. },
  342. tgUrl = trigger.data('sUrl'),
  343. tgTitle = trigger.data('desc'),
  344. tgPic = trigger.data("imgUrl");
  345. params.title = encodeURIComponent(tgTitle ? tgTitle : params.title);
  346. params.url = encodeURIComponent(tgUrl ? tgUrl : params.url);
  347. params.pic = encodeURIComponent(tgPic ? tgPic : params.pic);
  348. var cmdUrl = this._baseUrl + self._formatUri(this._tsinaParam, params);
  349. window.open(cmdUrl);
  350. },
  351. _formatUri: function(uri, params) {
  352. var reg, uri = uri;
  353. for (var k in params) {
  354. reg = new RegExp("{" + k + "}", "g");
  355. uri = uri.replace(reg, params[k]);
  356. }
  357. return uri;
  358. }
  359. }
  360. ;regist("MShare",MShare);
  361. })((typeof Zepto !== 'undefined' ? Zepto : jQuery), window, document)