专门用于微信公众平台的Javascript API

  1 /**!
  2  * 微信内置浏览器的Javascript API，功能包括：
  3  *
  4  * 1、分享到微信朋友圈
  5  * 2、分享给微信好友
  6  * 3、分享到腾讯微博
  7  * 4、新的分享接口，包含朋友圈、好友、微博的分享（for iOS）
  8  * 5、隐藏/显示右上角的菜单入口
  9  * 6、隐藏/显示底部浏览器工具栏
 10  * 7、获取当前的网络状态
 11  * 8、调起微信客户端的图片播放组件
 12  * 9、关闭公众平台Web页面
 13  * 10、判断当前网页是否在微信内置浏览器中打开
 14  * 11、增加打开扫描二维码
 15  * 12、支持WeixinApi的错误监控
 16  * 13、检测应用程序是否已经安装（需要官方开通权限）
 17  * 14、发送电子邮件
 18  * 15、禁止用户分享
 19  *
 20  * @author guanguoxiang(http://www.ggxapp.com)
 21  */
 22 (function (window) {
 23 
 24     "use strict";
 25 
 26     /**
 27      * 定义WeixinApi
 28      */
 29     var WeixinApi = {
 30         version: 4.1
 31     };
 32 
 33     // 将WeixinApi暴露到window下：全局可使用，对旧版本向下兼容
 34     window.WeixinApi = WeixinApi;
 35 
 36     /////////////////////////// CommonJS /////////////////////////////////
 37     if (typeof define === ‘function‘ && (define.amd || define.cmd)) {
 38         if (define.amd) {
 39             // AMD 规范，for：requirejs
 40             define(function () {
 41                 return WeixinApi;
 42             });
 43         } else if (define.cmd) {
 44             // CMD 规范，for：seajs
 45             define(function (require, exports, module) {
 46                 module.exports = WeixinApi;
 47             });
 48         }
 49     }
 50 
 51     /**
 52      * 对象简单继承，后面的覆盖前面的，继承深度：deep=1
 53      * @private
 54      */
 55     var _extend = function () {
 56         var result = {}, obj, k;
 57         for (var i = 0, len = arguments.length; i < len; i++) {
 58             obj = arguments[i];
 59             if (typeof obj === ‘object‘) {
 60                 for (k in obj) {
 61                     obj[k] && (result[k] = obj[k]);
 62                 }
 63             }
 64         }
 65         return result;
 66     };
 67 
 68     /**
 69      * 内部私有方法，分享用
 70      * @private
 71      */
 72     var _share = function (cmd, data, callbacks) {
 73         callbacks = callbacks || {};
 74 
 75         // 分享过程中的一些回调
 76         var progress = function (resp) {
 77             switch (true) {
 78                 // 用户取消
 79                 case /\:cancel$/i.test(resp.err_msg) :
 80                     callbacks.cancel && callbacks.cancel(resp);
 81                     break;
 82                 // 发送成功
 83                 case /\:(confirm|ok)$/i.test(resp.err_msg):
 84                     callbacks.confirm && callbacks.confirm(resp);
 85                     break;
 86                 // fail　发送失败
 87                 case /\:fail$/i.test(resp.err_msg) :
 88                 default:
 89                     callbacks.fail && callbacks.fail(resp);
 90                     break;
 91             }
 92             // 无论成功失败都会执行的回调
 93             callbacks.all && callbacks.all(resp);
 94         };
 95 
 96         // 执行分享，并处理结果
 97         var handler = function (theData, argv) {
 98 
 99             // 加工一下数据
100             if (cmd.menu == ‘menu:share:timeline‘ ||
101                 (cmd.menu == ‘general:share‘ && argv.shareTo == ‘timeline‘)) {
102 
103                 var title = theData.title;
104                 theData.title = theData.desc || title;
105                 theData.desc = title || theData.desc;
106             }
107 
108             // 新的分享接口，单独处理
109             if (cmd.menu === ‘general:share‘) {
110                 // 如果是收藏操作，并且在wxCallbacks中配置了favorite为false，则不执行回调
111                 if (argv.shareTo == ‘favorite‘ || argv.scene == ‘favorite‘) {
112                     if (callbacks.favorite === false) {
113                         return argv.generalShare(theData, function () {
114                         });
115                     }
116                 }
117                 if (argv.shareTo === ‘timeline‘) {
118                     WeixinJSBridge.invoke(‘shareTimeline‘, theData, progress);
119                 } else if (argv.shareTo === ‘friend‘) {
120                     WeixinJSBridge.invoke(‘sendAppMessage‘, theData, progress);
121                 } else if (argv.shareTo === ‘QQ‘) {
122                     WeixinJSBridge.invoke(‘shareQQ‘, theData, progress);
123                 }else if (argv.shareTo === ‘weibo‘) {
124                     WeixinJSBridge.invoke(‘shareWeibo‘, theData, progress);
125                 }
126             } else {
127                 WeixinJSBridge.invoke(cmd.action, theData, progress);
128             }
129         };
130 
131         // 监听分享操作
132         WeixinJSBridge.on(cmd.menu, function (argv) {
133             callbacks.dataLoaded = callbacks.dataLoaded || new Function();
134             if (callbacks.async && callbacks.ready) {
135                 WeixinApi["_wx_loadedCb_"] = callbacks.dataLoaded;
136                 if (WeixinApi["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
137                     WeixinApi["_wx_loadedCb_"] = new Function();
138                 }
139                 callbacks.dataLoaded = function (newData) {
140                     callbacks.__cbkCalled = true;
141                     var theData = _extend(data, newData);
142                     theData.img_url = theData.imgUrl || theData.img_url;
143                     delete theData.imgUrl;
144                     WeixinApi["_wx_loadedCb_"](theData);
145                     handler(theData, argv);
146                 };
147                 // 然后就绪
148                 if (!(argv && (argv.shareTo == ‘favorite‘ || argv.scene == ‘favorite‘) && callbacks.favorite === false)) {
149                     callbacks.ready && callbacks.ready(argv, data);
150                     // 如果设置了async为true，但是在ready方法中并没有手动调用dataLoaded方法，则自动触发一次
151                     if (!callbacks.__cbkCalled) {
152                         callbacks.dataLoaded({});
153                         callbacks.__cbkCalled = false;
154                     }
155                 }
156             } else {
157                 // 就绪状态
158                 var theData = _extend(data);
159                 if (!(argv && (argv.shareTo == ‘favorite‘ || argv.scene == ‘favorite‘) && callbacks.favorite === false)) {
160                     callbacks.ready && callbacks.ready(argv, theData);
161                 }
162                 handler(theData, argv);
163             }
164         });
165     };
166 
167     /**
168      * 分享到微信朋友圈
169      * @param       {Object}    data       待分享的信息
170      * @p-config    {String}    appId      公众平台的appId（服务号可用）
171      * @p-config    {String}    imgUrl     图片地址
172      * @p-config    {String}    link       链接地址
173      * @p-config    {String}    desc       描述
174      * @p-config    {String}    title      分享的标题
175      *
176      * @param       {Object}    callbacks  相关回调方法
177      * @p-config    {Boolean}   async                   ready方法是否需要异步执行，默认false
178      * @p-config    {Function}  ready(argv, data)       就绪状态
179      * @p-config    {Function}  dataLoaded(data)        数据加载完成后调用，async为true时有用，也可以为空
180      * @p-config    {Function}  cancel(resp)    取消
181      * @p-config    {Function}  fail(resp)      失败
182      * @p-config    {Function}  confirm(resp)   成功
183      * @p-config    {Function}  all(resp)       无论成功失败都会执行的回调
184      */
185     WeixinApi.shareToTimeline = function (data, callbacks) {
186         _share({
187             menu: ‘menu:share:timeline‘,
188             action: ‘shareTimeline‘
189         }, {
190             "appid": data.appId ? data.appId : ‘‘,
191             "img_url": data.imgUrl,
192             "link": data.link,
193             "desc": data.desc,
194             "title": data.title,
195             "img_width": "640",
196             "img_height": "640"
197         }, callbacks);
198     };
199 
200     /**
201      * 发送给微信上的好友
202      * @param       {Object}    data       待分享的信息
203      * @p-config    {String}    appId      公众平台的appId（服务号可用）
204      * @p-config    {String}    imgUrl     图片地址
205      * @p-config    {String}    link       链接地址
206      * @p-config    {String}    desc       描述
207      * @p-config    {String}    title      分享的标题
208      *
209      * @param       {Object}    callbacks  相关回调方法
210      * @p-config    {Boolean}   async                   ready方法是否需要异步执行，默认false
211      * @p-config    {Function}  ready(argv, data)       就绪状态
212      * @p-config    {Function}  dataLoaded(data)        数据加载完成后调用，async为true时有用，也可以为空
213      * @p-config    {Function}  cancel(resp)    取消
214      * @p-config    {Function}  fail(resp)      失败
215      * @p-config    {Function}  confirm(resp)   成功
216      * @p-config    {Function}  all(resp)       无论成功失败都会执行的回调
217      */
218     WeixinApi.shareToFriend = function (data, callbacks) {
219         _share({
220             menu: ‘menu:share:appmessage‘,
221             action: ‘sendAppMessage‘
222         }, {
223             "appid": data.appId ? data.appId : ‘‘,
224             "img_url": data.imgUrl,
225             "link": data.link,
226             "desc": data.desc,
227             "title": data.title,
228             "img_width": "640",
229             "img_height": "640"
230         }, callbacks);
231     };
232 
233 
234     /**
235      * 分享到腾讯微博
236      * @param       {Object}    data       待分享的信息
237      * @p-config    {String}    link       链接地址
238      * @p-config    {String}    desc       描述
239      *
240      * @param       {Object}    callbacks  相关回调方法
241      * @p-config    {Boolean}   async                   ready方法是否需要异步执行，默认false
242      * @p-config    {Function}  ready(argv, data)       就绪状态
243      * @p-config    {Function}  dataLoaded(data)        数据加载完成后调用，async为true时有用，也可以为空
244      * @p-config    {Function}  cancel(resp)    取消
245      * @p-config    {Function}  fail(resp)      失败
246      * @p-config    {Function}  confirm(resp)   成功
247      * @p-config    {Function}  all(resp)       无论成功失败都会执行的回调
248      */
249     WeixinApi.shareToWeibo = function (data, callbacks) {
250         _share({
251             menu: ‘menu:share:weibo‘,
252             action: ‘shareWeibo‘
253         }, {
254             "content": data.desc,
255             "url": data.link
256         }, callbacks);
257     };
258 
259     /**
260      * 新的分享接口
261      * @param       {Object}    data       待分享的信息
262      * @p-config    {String}    appId      公众平台的appId（服务号可用）
263      * @p-config    {String}    imgUrl     图片地址
264      * @p-config    {String}    link       链接地址
265      * @p-config    {String}    desc       描述
266      * @p-config    {String}    title      分享的标题
267      *
268      * @param       {Object}    callbacks  相关回调方法
269      * @p-config    {Boolean}   async                   ready方法是否需要异步执行，默认false
270      * @p-config    {Function}  ready(argv, data)       就绪状态
271      * @p-config    {Function}  dataLoaded(data)        数据加载完成后调用，async为true时有用，也可以为空
272      * @p-config    {Function}  cancel(resp)    取消
273      * @p-config    {Function}  fail(resp)      失败
274      * @p-config    {Function}  confirm(resp)   成功
275      * @p-config    {Function}  all(resp)       无论成功失败都会执行的回调
276      */
277     WeixinApi.generalShare = function (data, callbacks) {
278         _share({
279             menu: ‘general:share‘
280         }, {
281             "appid": data.appId ? data.appId : ‘‘,
282             "img_url": data.imgUrl,
283             "link": data.link,
284             "desc": data.desc,
285             "title": data.title,
286             "img_width": "640",
287             "img_height": "640"
288         }, callbacks);
289     };
290 
291     /**
292      * 设置页面禁止分享：包括朋友圈、好友、腾讯微博、qq
293      * @param callback
294      */
295     WeixinApi.disabledShare = function (callback) {
296         callback = callback || function () {
297             alert(‘当前页面禁止分享！‘);
298         };
299         [‘menu:share:timeline‘, ‘menu:share:appmessage‘, ‘menu:share:qq‘,
300             ‘menu:share:weibo‘, ‘general:share‘].forEach(function (menu) {
301                 WeixinJSBridge.on(menu, function () {
302                     callback();
303                     return false;
304                 });
305             });
306     };
307 
308     /**
309      * 加关注（此功能只是暂时先加上，不过因为权限限制问题，不能用，如果你的站点是部署在*.qq.com下，也许可行）
310      * @param       {String}    appWeixinId     微信公众号ID
311      * @param       {Object}    callbacks       回调方法
312      * @p-config    {Function}  fail(resp)      失败
313      * @p-config    {Function}  confirm(resp)   成功
314      */
315     WeixinApi.addContact = function (appWeixinId, callbacks) {
316         callbacks = callbacks || {};
317         WeixinJSBridge.invoke("addContact", {
318             webtype: "1",
319             username: appWeixinId
320         }, function (resp) {
321             var success = !resp.err_msg || "add_contact:ok" == resp.err_msg
322                 || "add_contact:added" == resp.err_msg;
323             if (success) {
324                 callbacks.success && callbacks.success(resp);
325             } else {
326                 callbacks.fail && callbacks.fail(resp);
327             }
328         })
329     };
330 
331     /**
332      * 调起微信Native的图片播放组件。
333      * 这里必须对参数进行强检测，如果参数不合法，直接会导致微信客户端crash
334      *
335      * @param {String} curSrc 当前播放的图片地址
336      * @param {Array} srcList 图片地址列表
337      */
338     WeixinApi.imagePreview = function (curSrc, srcList) {
339         if (!curSrc || !srcList || srcList.length == 0) {
340             return;
341         }
342         WeixinJSBridge.invoke(‘imagePreview‘, {
343             ‘current‘: curSrc,
344             ‘urls‘: srcList
345         });
346     };
347 
348     /**
349      * 显示网页右上角的按钮
350      */
351     WeixinApi.showOptionMenu = function () {
352         WeixinJSBridge.call(‘showOptionMenu‘);
353     };
354 
355 
356     /**
357      * 隐藏网页右上角的按钮
358      */
359     WeixinApi.hideOptionMenu = function () {
360         WeixinJSBridge.call(‘hideOptionMenu‘);
361     };
362 
363     /**
364      * 显示底部工具栏
365      */
366     WeixinApi.showToolbar = function () {
367         WeixinJSBridge.call(‘showToolbar‘);
368     };
369 
370     /**
371      * 隐藏底部工具栏
372      */
373     WeixinApi.hideToolbar = function () {
374         WeixinJSBridge.call(‘hideToolbar‘);
375     };
376 
377     /**
378      * 返回如下几种类型：
379      *
380      * network_type:wifi     wifi网络
381      * network_type:edge     非wifi,包含3G/2G
382      * network_type:fail     网络断开连接
383      * network_type:wwan     2g或者3g
384      *
385      * 使用方法：
386      * WeixinApi.getNetworkType(function(networkType){
387      *
388      * });
389      *
390      * @param callback
391      */
392     WeixinApi.getNetworkType = function (callback) {
393         if (callback && typeof callback == ‘function‘) {
394             WeixinJSBridge.invoke(‘getNetworkType‘, {}, function (e) {
395                 // 在这里拿到e.err_msg，这里面就包含了所有的网络类型
396                 callback(e.err_msg);
397             });
398         }
399     };
400 
401     /**
402      * 关闭当前微信公众平台页面
403      * @param       {Object}    callbacks       回调方法
404      * @p-config    {Function}  fail(resp)      失败
405      * @p-config    {Function}  success(resp)   成功
406      */
407     WeixinApi.closeWindow = function (callbacks) {
408         callbacks = callbacks || {};
409         WeixinJSBridge.invoke("closeWindow", {}, function (resp) {
410             switch (resp.err_msg) {
411                 // 关闭成功
412                 case ‘close_window:ok‘:
413                     callbacks.success && callbacks.success(resp);
414                     break;
415 
416                 // 关闭失败
417                 default :
418                     callbacks.fail && callbacks.fail(resp);
419                     break;
420             }
421         });
422     };
423 
424     /**
425      * 当页面加载完毕后执行，使用方法：
426      * WeixinApi.ready(function(Api){
427      *     // 从这里只用Api即是WeixinApi
428      * });
429      * @param readyCallback
430      */
431     WeixinApi.ready = function (readyCallback) {
432 
433         /**
434          * 加一个钩子，同时解决Android和iOS下的分享问题
435          * @private
436          */
437         var _hook = function () {
438             var _WeixinJSBridge = {};
439             Object.keys(WeixinJSBridge).forEach(function (key) {
440                 _WeixinJSBridge[key] = WeixinJSBridge[key];
441             });
442             Object.keys(WeixinJSBridge).forEach(function (key) {
443                 if (typeof WeixinJSBridge[key] === ‘function‘) {
444                     WeixinJSBridge[key] = function () {
445                         try {
446                             var args = arguments.length > 0 ? arguments[0] : {},
447                                 runOn3rd_apis = args.__params ? args.__params.__runOn3rd_apis || [] : [];
448                             [‘menu:share:timeline‘, ‘menu:share:appmessage‘, ‘menu:share:weibo‘,
449                                 ‘menu:share:qq‘, ‘general:share‘].forEach(function (menu) {
450                                     runOn3rd_apis.indexOf(menu) === -1 && runOn3rd_apis.push(menu);
451                                 });
452                         } catch (e) {
453                         }
454                         return _WeixinJSBridge[key].apply(WeixinJSBridge, arguments);
455                     };
456                 }
457             });
458         };
459 
460         if (readyCallback && typeof readyCallback == ‘function‘) {
461             var Api = this;
462             var wxReadyFunc = function () {
463                 _hook();
464                 readyCallback(Api);
465             };
466             if (typeof window.WeixinJSBridge == "undefined") {
467                 if (document.addEventListener) {
468                     document.addEventListener(‘WeixinJSBridgeReady‘, wxReadyFunc, false);
469                 } else if (document.attachEvent) {
470                     document.attachEvent(‘WeixinJSBridgeReady‘, wxReadyFunc);
471                     document.attachEvent(‘onWeixinJSBridgeReady‘, wxReadyFunc);
472                 }
473             } else {
474                 wxReadyFunc();
475             }
476         }
477     };
478 
479     /**
480      * 判断当前网页是否在微信内置浏览器中打开
481      */
482     WeixinApi.openInWeixin = function () {
483         return /MicroMessenger/i.test(navigator.userAgent);
484     };
485 
486     /*
487      * 打开扫描二维码
488      * @param       {Object}    callbacks       回调方法
489      * @p-config    {Boolean}   needResult      是否直接获取分享后的内容
490      * @p-config    {String}    desc            扫描二维码时的描述
491      * @p-config    {Function}  fail(resp)      失败
492      * @p-config    {Function}  success(resp)   成功
493      */
494     WeixinApi.scanQRCode = function (callbacks) {
495         callbacks = callbacks || {};
496         WeixinJSBridge.invoke("scanQRCode", {
497             needResult: callbacks.needResult ? 1 : 0,
498             desc: callbacks.desc || ‘WeixinApi Desc‘
499         }, function (resp) {
500             switch (resp.err_msg) {
501                 // 打开扫描器成功
502                 case ‘scanQRCode:ok‘:
503                 case ‘scan_qrcode:ok‘:
504                     callbacks.success && callbacks.success(resp);
505                     break;
506 
507                 // 打开扫描器失败
508                 default :
509                     callbacks.fail && callbacks.fail(resp);
510                     break;
511             }
512         });
513     };
514 
515     /**
516      * 检测应用程序是否已安装
517      *         by mingcheng 2014-10-17
518      *
519      * @param       {Object}    data               应用程序的信息
520      * @p-config    {String}    packageUrl      应用注册的自定义前缀，如 xxx:// 就取 xxx
521      * @p-config    {String}    packageName        应用的包名
522      *
523      * @param       {Object}    callbacks       相关回调方法
524      * @p-config    {Function}  fail(resp)      失败
525      * @p-config    {Function}  success(resp)   成功，如果有对应的版本信息，则写入到 resp.version 中
526      * @p-config    {Function}  all(resp)       无论成功失败都会执行的回调
527      */
528     WeixinApi.getInstallState = function (data, callbacks) {
529         callbacks = callbacks || {};
530 
531         WeixinJSBridge.invoke("getInstallState", {
532             "packageUrl": data.packageUrl || "",
533             "packageName": data.packageName || ""
534         }, function (resp) {
535             var msg = resp.err_msg, match = msg.match(/state:yes_?(.*)$/);
536             if (match) {
537                 resp.version = match[1] || "";
538                 callbacks.success && callbacks.success(resp);
539             } else {
540                 callbacks.fail && callbacks.fail(resp);
541             }
542 
543             callbacks.all && callbacks.all(resp);
544         });
545     };
546 
547     /**
548      * 发送邮件
549      * @param       {Object}  data      邮件初始内容
550      * @p-config    {String}  subject   邮件标题
551      * @p-config    {String}  body      邮件正文
552      *
553      * @param       {Object}    callbacks       相关回调方法
554      * @p-config    {Function}  fail(resp)      失败
555      * @p-config    {Function}  success(resp)   成功
556      * @p-config    {Function}  all(resp)       无论成功失败都会执行的回调
557      */
558     WeixinApi.sendEmail = function (data, callbacks) {
559         callbacks = callbacks || {};
560         WeixinJSBridge.invoke("sendEmail", {
561             "title": data.subject,
562             "content": data.body
563         }, function (resp) {
564             if (resp.err_msg === ‘send_email:sent‘) {
565                 callbacks.success && callbacks.success(resp);
566             } else {
567                 callbacks.fail && callbacks.fail(resp);
568             }
569             callbacks.all && callbacks.all(resp);
570         })
571     };
572 
573     /**
574      * 开启Api的debug模式，比如出了个什么错误，能alert告诉你，而不是一直很苦逼的在想哪儿出问题了
575      * @param    {Function}  callback(error) 出错后的回调，默认是alert
576      */
577     WeixinApi.enableDebugMode = function (callback) {
578         /**
579          * @param {String}  errorMessage   错误信息
580          * @param {String}  scriptURI      出错的文件
581          * @param {Long}    lineNumber     出错代码的行号
582          * @param {Long}    columnNumber   出错代码的列号
583          */
584         window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber) {
585 
586             // 有callback的情况下，将错误信息传递到options.callback中
587             if (typeof callback === ‘function‘) {
588                 callback({
589                     message: errorMessage,
590                     script: scriptURI,
591                     line: lineNumber,
592                     column: columnNumber
593                 });
594             } else {
595                 // 其他情况，都以alert方式直接提示错误信息
596                 var msgs = [];
597                 msgs.push("额，代码有错。。。");
598                 msgs.push("\n错误信息：", errorMessage);
599                 msgs.push("\n出错文件：", scriptURI);
600                 msgs.push("\n出错位置：", lineNumber + ‘行，‘ + columnNumber + ‘列‘);
601                 alert(msgs.join(‘‘));
602             }
603         }
604     };
605 
606 })(window);