mshare.js 17 KB

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