UDN-企业互联网技术人气社区

板块导航

浏览  : 610
回复  : 2

[原生js] js微信分享API

[复制链接]
西北的风的头像 楼主
发表于 2017-1-17 15:37:35 | 显示全部楼层 |阅读模式
  这篇文章主要为大家详细介绍了js微信分享实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  本文为大家分享了js微信分享实现代码,供大家参考,具体内容如下
  
  微信分享Js API
  
  功能:
  
  1、分享到微信朋友圈
  
  2、分享给微信好友
  
  3、分享到腾讯微博
  
  4、隐藏/显示右上角的菜单入口
  
  5、隐藏/显示底部浏览器工具栏
  
  6、获取当前的网络状态
  
  7、调起微信客户端的图片播放组件
  
  8、关闭公众平台Web页面
  1. /**!
  2. * 微信内置浏览器的JavaScript API,功能包括:
  3. *
  4. * 1、分享到微信朋友圈
  5. * 2、分享给微信好友
  6. * 3、分享到腾讯微博
  7. * 4、隐藏/显示右上角的菜单入口
  8. * 5、隐藏/显示底部浏览器工具栏
  9. * 6、获取当前的网络状态
  10. * 7、调起微信客户端的图片播放组件
  11. * 8、关闭公众平台Web页面
  12. *
  13. * @author zhaoxianlie
  14. */
  15. var WeixinApi = (function () {

  16. "use strict";

  17. /**
  18. * 分享到微信朋友圈
  19. * @param {Object} data 待分享的信息
  20. * @p-config {String} appId 公众平台的appId(服务号可用)
  21. * @p-config {String} imageUrl 图片地址
  22. * @p-config {String} link 链接地址
  23. * @p-config {String} desc 描述
  24. * @p-config {String} title 分享的标题
  25. *
  26. * @param {Object} callbacks 相关回调方法
  27. * @p-config {Boolean} async  ready方法是否需要异步执行,默认false
  28. * @p-config {Function} ready(argv) 就绪状态
  29. * @p-config {Function} dataLoaded(data) 数据加载完成后调用,async为true时有用,也可以为空
  30. * @p-config {Function} cancel(resp) 取消
  31. * @p-config {Function} fail(resp) 失败
  32. * @p-config {Function} confirm(resp) 成功
  33. * @p-config {Function} all(resp) 无论成功失败都会执行的回调
  34. */
  35. function weixinShareTimeline(data, callbacks) {
  36. callbacks = callbacks || {};
  37. var shareTimeline = function (theData) {
  38. WeixinJSBridge.invoke('shareTimeline', {
  39. "appid":theData.appId ? theData.appId : '',
  40. "img_url":theData.imgUrl,
  41. "link":theData.link,
  42. "desc":theData.title,
  43. "title":theData.desc, // 注意这里要分享出去的内容是desc
  44. "img_width":"120",
  45. "img_height":"120"
  46. }, function (resp) {
  47. switch (resp.err_msg) {
  48.   // share_timeline:cancel 用户取消
  49.   case 'share_timeline:cancel':
  50.   callbacks.cancel && callbacks.cancel(resp);
  51.   break;
  52.   // share_timeline:fail 发送失败
  53.   case 'share_timeline:fail':
  54.   callbacks.fail && callbacks.fail(resp);
  55.   break;
  56.   // share_timeline:confirm 发送成功
  57.   case 'share_timeline:confirm':
  58.   case 'share_timeline:ok':
  59.   callbacks.confirm && callbacks.confirm(resp);
  60.   break;
  61. }
  62. // 无论成功失败都会执行的回调
  63. callbacks.all && callbacks.all(resp);
  64. });
  65. };
  66. WeixinJSBridge.on('menu:share:timeline', function (argv) {
  67. if (callbacks.async && callbacks.ready) {
  68. window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
  69. if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
  70.   window["_wx_loadedCb_"] = new Function();
  71. }
  72. callbacks.dataLoaded = function (newData) {
  73.   window["_wx_loadedCb_"](newData);
  74.   shareTimeline(newData);
  75. };
  76. // 然后就绪
  77. callbacks.ready && callbacks.ready(argv);
  78. } else {
  79. // 就绪状态
  80. callbacks.ready && callbacks.ready(argv);
  81. shareTimeline(data);
  82. }
  83. });
  84. }

  85. /**
  86. * 发送给微信上的好友
  87. * @param {Object} data 待分享的信息
  88. * @p-config {String} appId 公众平台的appId(服务号可用)
  89. * @p-config {String} imageUrl 图片地址
  90. * @p-config {String} link 链接地址
  91. * @p-config {String} desc 描述
  92. * @p-config {String} title 分享的标题
  93. *
  94. * @param {Object} callbacks 相关回调方法
  95. * @p-config {Boolean} async  ready方法是否需要异步执行,默认false
  96. * @p-config {Function} ready(argv) 就绪状态
  97. * @p-config {Function} dataLoaded(data) 数据加载完成后调用,async为true时有用,也可以为空
  98. * @p-config {Function} cancel(resp) 取消
  99. * @p-config {Function} fail(resp) 失败
  100. * @p-config {Function} confirm(resp) 成功
  101. * @p-config {Function} all(resp) 无论成功失败都会执行的回调
  102. */
  103. function weixinSendAppMessage(data, callbacks) {
  104. callbacks = callbacks || {};
  105. var sendAppMessage = function (theData) {
  106. WeixinJSBridge.invoke('sendAppMessage', {
  107. "appid":theData.appId ? theData.appId : '',
  108. "img_url":theData.imgUrl,
  109. "link":theData.link,
  110. "desc":theData.desc,
  111. "title":theData.title,
  112. "img_width":"120",
  113. "img_height":"120"
  114. }, function (resp) {
  115. switch (resp.err_msg) {
  116.   // send_app_msg:cancel 用户取消
  117.   case 'send_app_msg:cancel':
  118.   callbacks.cancel && callbacks.cancel(resp);
  119.   break;
  120.   // send_app_msg:fail 发送失败
  121.   case 'send_app_msg:fail':
  122.   callbacks.fail && callbacks.fail(resp);
  123.   break;
  124.   // send_app_msg:confirm 发送成功
  125.   case 'send_app_msg:confirm':
  126.   case 'send_app_msg:ok':
  127.   callbacks.confirm && callbacks.confirm(resp);
  128.   break;
  129. }
  130. // 无论成功失败都会执行的回调
  131. callbacks.all && callbacks.all(resp);
  132. });
  133. };
  134. WeixinJSBridge.on('menu:share:appmessage', function (argv) {
  135. if (callbacks.async && callbacks.ready) {
  136. window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
  137. if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
  138.   window["_wx_loadedCb_"] = new Function();
  139. }
  140. callbacks.dataLoaded = function (newData) {
  141.   window["_wx_loadedCb_"](newData);
  142.   sendAppMessage(newData);
  143. };
  144. // 然后就绪
  145. callbacks.ready && callbacks.ready(argv);
  146. } else {
  147. // 就绪状态
  148. callbacks.ready && callbacks.ready(argv);
  149. sendAppMessage(data);
  150. }
  151. });
  152. }

  153. /**
  154. * 分享到腾讯微博
  155. * @param {Object} data 待分享的信息
  156. * @p-config {String} link 链接地址
  157. * @p-config {String} desc 描述
  158. *
  159. * @param {Object} callbacks 相关回调方法
  160. * @p-config {Boolean} async  ready方法是否需要异步执行,默认false
  161. * @p-config {Function} ready(argv) 就绪状态
  162. * @p-config {Function} dataLoaded(data) 数据加载完成后调用,async为true时有用,也可以为空
  163. * @p-config {Function} cancel(resp) 取消
  164. * @p-config {Function} fail(resp) 失败
  165. * @p-config {Function} confirm(resp) 成功
  166. * @p-config {Function} all(resp) 无论成功失败都会执行的回调
  167. */
  168. function weixinShareWeibo(data, callbacks) {
  169. callbacks = callbacks || {};
  170. var shareWeibo = function (theData) {
  171. WeixinJSBridge.invoke('shareWeibo', {
  172. "content":theData.desc,
  173. "url":theData.link
  174. }, function (resp) {
  175. switch (resp.err_msg) {
  176.   // share_weibo:cancel 用户取消
  177.   case 'share_weibo:cancel':
  178.   callbacks.cancel && callbacks.cancel(resp);
  179.   break;
  180.   // share_weibo:fail 发送失败
  181.   case 'share_weibo:fail':
  182.   callbacks.fail && callbacks.fail(resp);
  183.   break;
  184.   // share_weibo:confirm 发送成功
  185.   case 'share_weibo:confirm':
  186.   case 'share_weibo:ok':
  187.   callbacks.confirm && callbacks.confirm(resp);
  188.   break;
  189. }
  190. // 无论成功失败都会执行的回调
  191. callbacks.all && callbacks.all(resp);
  192. });
  193. };
  194. WeixinJSBridge.on('menu:share:weibo', function (argv) {
  195. if (callbacks.async && callbacks.ready) {
  196. window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
  197. if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
  198.   window["_wx_loadedCb_"] = new Function();
  199. }
  200. callbacks.dataLoaded = function (newData) {
  201.   window["_wx_loadedCb_"](newData);
  202.   shareWeibo(newData);
  203. };
  204. // 然后就绪
  205. callbacks.ready && callbacks.ready(argv);
  206. } else {
  207. // 就绪状态
  208. callbacks.ready && callbacks.ready(argv);
  209. shareWeibo(data);
  210. }
  211. });
  212. }

  213. /**
  214. * 调起微信Native的图片播放组件。
  215. * 这里必须对参数进行强检测,如果参数不合法,直接会导致微信客户端crash
  216. *
  217. * @param {String} curSrc 当前播放的图片地址
  218. * @param {Array} srcList 图片地址列表
  219. */
  220. function imagePreview(curSrc,srcList) {
  221. if(!curSrc || !srcList || srcList.length == 0) {
  222. return;
  223. }
  224. WeixinJSBridge.invoke('imagePreview', {
  225. 'current' : curSrc,
  226. 'urls' : srcList
  227. });
  228. }

  229. /**
  230. * 显示网页右上角的按钮
  231. */
  232. function showOptionMenu() {
  233. WeixinJSBridge.call('showOptionMenu');
  234. }


  235. /**
  236. * 隐藏网页右上角的按钮
  237. */
  238. function hideOptionMenu() {
  239. WeixinJSBridge.call('hideOptionMenu');
  240. }

  241. /**
  242. * 显示底部工具栏
  243. */
  244. function showToolbar() {
  245. WeixinJSBridge.call('showToolbar');
  246. }

  247. /**
  248. * 隐藏底部工具栏
  249. */
  250. function hideToolbar() {
  251. WeixinJSBridge.call('hideToolbar');
  252. }

  253. /**
  254. * 返回如下几种类型:
  255. *
  256. * network_type:wifi wifi网络
  257. * network_type:edge 非wifi,包含3G/2G
  258. * network_type:fail 网络断开连接
  259. * network_type:wwan 2g或者3g
  260. *
  261. * 使用方法:
  262. * WeixinApi.getNetworkType(function(networkType){
  263. *
  264. * });
  265. *
  266. * @param callback
  267. */
  268. function getNetworkType(callback) {
  269. if (callback && typeof callback == 'function') {
  270. WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
  271. // 在这里拿到e.err_msg,这里面就包含了所有的网络类型
  272. callback(e.err_msg);
  273. });
  274. }
  275. }

  276. /**
  277. * 关闭当前微信公众平台页面
  278. */
  279. function closeWindow() {
  280. WeixinJSBridge.call("closeWindow");
  281. }

  282. /**
  283. * 当页面加载完毕后执行,使用方法:
  284. * WeixinApi.ready(function(Api){
  285. * // 从这里只用Api即是WeixinApi
  286. * });
  287. * @param readyCallback
  288. */
  289. function wxJsBridgeReady(readyCallback) {
  290. if (readyCallback && typeof readyCallback == 'function') {
  291. var Api = this;
  292. var wxReadyFunc = function () {
  293. readyCallback(Api);
  294. };
  295. if (typeof window.WeixinJSBridge == "undefined"){
  296. if (document.addEventListener) {
  297.   document.addEventListener('WeixinJSBridgeReady', wxReadyFunc, false);
  298. } else if (document.attachEvent) {
  299.   document.attachEvent('WeixinJSBridgeReady', wxReadyFunc);
  300.   document.attachEvent('onWeixinJSBridgeReady', wxReadyFunc);
  301. }
  302. }else{
  303. wxReadyFunc();
  304. }
  305. }
  306. }

  307. return {
  308. version :"1.8",
  309. ready :wxJsBridgeReady,
  310. shareToTimeline :weixinShareTimeline,
  311. shareToWeibo :weixinShareWeibo,
  312. shareToFriend :weixinSendAppMessage,
  313. showOptionMenu :showOptionMenu,
  314. hideOptionMenu :hideOptionMenu,
  315. showToolbar :showToolbar,
  316. hideToolbar :hideToolbar,
  317. getNetworkType :getNetworkType,
  318. imagePreview :imagePreview,
  319. closeWindow :closeWindow
  320. };
  321. })();
复制代码
 
  以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
发表于 2017-1-17 15:38:04 | 显示全部楼层
OMG!介是啥东东
使用道具 举报

回复

发表于 2017-1-17 18:37:17 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“6你一脸血“
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部