js微信分享API


Posted in Javascript onOctober 11, 2020

本文为大家分享了js微信分享实现代码,供大家参考,具体内容如下

微信分享Js API

功能:

1、分享到微信朋友圈
2、分享给微信好友
3、分享到腾讯微博
4、隐藏/显示右上角的菜单入口
5、隐藏/显示底部浏览器工具栏
6、获取当前的网络状态
7、调起微信客户端的图片播放组件
8、关闭公众平台Web页面

/**!
 * 微信内置浏览器的Javascript API,功能包括:
 *
 * 1、分享到微信朋友圈
 * 2、分享给微信好友
 * 3、分享到腾讯微博
 * 4、隐藏/显示右上角的菜单入口
 * 5、隐藏/显示底部浏览器工具栏
 * 6、获取当前的网络状态
 * 7、调起微信客户端的图片播放组件
 * 8、关闭公众平台Web页面
 *
 * @author zhaoxianlie
 */
var WeixinApi = (function () {

 "use strict";

 /**
 * 分享到微信朋友圈
 * @param {Object} data 待分享的信息
 * @p-config {String} appId 公众平台的appId(服务号可用)
 * @p-config {String} imageUrl 图片地址
 * @p-config {String} link 链接地址
 * @p-config {String} desc 描述
 * @p-config {String} title 分享的标题
 *
 * @param {Object} callbacks 相关回调方法
 * @p-config {Boolean} async ready方法是否需要异步执行,默认false
 * @p-config {Function} ready(argv) 就绪状态
 * @p-config {Function} dataLoaded(data) 数据加载完成后调用,async为true时有用,也可以为空
 * @p-config {Function} cancel(resp) 取消
 * @p-config {Function} fail(resp) 失败
 * @p-config {Function} confirm(resp) 成功
 * @p-config {Function} all(resp) 无论成功失败都会执行的回调
 */
 function weixinShareTimeline(data, callbacks) {
 callbacks = callbacks || {};
 var shareTimeline = function (theData) {
 WeixinJSBridge.invoke('shareTimeline', {
 "appid":theData.appId ? theData.appId : '',
 "img_url":theData.imgUrl,
 "link":theData.link,
 "desc":theData.title,
 "title":theData.desc, // 注意这里要分享出去的内容是desc
 "img_width":"120",
 "img_height":"120"
 }, function (resp) {
 switch (resp.err_msg) {
 // share_timeline:cancel 用户取消
 case 'share_timeline:cancel':
 callbacks.cancel && callbacks.cancel(resp);
 break;
 // share_timeline:fail 发送失败
 case 'share_timeline:fail':
 callbacks.fail && callbacks.fail(resp);
 break;
 // share_timeline:confirm 发送成功
 case 'share_timeline:confirm':
 case 'share_timeline:ok':
 callbacks.confirm && callbacks.confirm(resp);
 break;
 }
 // 无论成功失败都会执行的回调
 callbacks.all && callbacks.all(resp);
 });
 };
 WeixinJSBridge.on('menu:share:timeline', function (argv) {
 if (callbacks.async && callbacks.ready) {
 window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
 if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
 window["_wx_loadedCb_"] = new Function();
 }
 callbacks.dataLoaded = function (newData) {
 window["_wx_loadedCb_"](newData);
 shareTimeline(newData);
 };
 // 然后就绪
 callbacks.ready && callbacks.ready(argv);
 } else {
 // 就绪状态
 callbacks.ready && callbacks.ready(argv);
 shareTimeline(data);
 }
 });
 }

 /**
 * 发送给微信上的好友
 * @param {Object} data 待分享的信息
 * @p-config {String} appId 公众平台的appId(服务号可用)
 * @p-config {String} imageUrl 图片地址
 * @p-config {String} link 链接地址
 * @p-config {String} desc 描述
 * @p-config {String} title 分享的标题
 *
 * @param {Object} callbacks 相关回调方法
 * @p-config {Boolean} async ready方法是否需要异步执行,默认false
 * @p-config {Function} ready(argv) 就绪状态
 * @p-config {Function} dataLoaded(data) 数据加载完成后调用,async为true时有用,也可以为空
 * @p-config {Function} cancel(resp) 取消
 * @p-config {Function} fail(resp) 失败
 * @p-config {Function} confirm(resp) 成功
 * @p-config {Function} all(resp) 无论成功失败都会执行的回调
 */
 function weixinSendAppMessage(data, callbacks) {
 callbacks = callbacks || {};
 var sendAppMessage = function (theData) {
 WeixinJSBridge.invoke('sendAppMessage', {
 "appid":theData.appId ? theData.appId : '',
 "img_url":theData.imgUrl,
 "link":theData.link,
 "desc":theData.desc,
 "title":theData.title,
 "img_width":"120",
 "img_height":"120"
 }, function (resp) {
 switch (resp.err_msg) {
 // send_app_msg:cancel 用户取消
 case 'send_app_msg:cancel':
 callbacks.cancel && callbacks.cancel(resp);
 break;
 // send_app_msg:fail 发送失败
 case 'send_app_msg:fail':
 callbacks.fail && callbacks.fail(resp);
 break;
 // send_app_msg:confirm 发送成功
 case 'send_app_msg:confirm':
 case 'send_app_msg:ok':
 callbacks.confirm && callbacks.confirm(resp);
 break;
 }
 // 无论成功失败都会执行的回调
 callbacks.all && callbacks.all(resp);
 });
 };
 WeixinJSBridge.on('menu:share:appmessage', function (argv) {
 if (callbacks.async && callbacks.ready) {
 window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
 if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
 window["_wx_loadedCb_"] = new Function();
 }
 callbacks.dataLoaded = function (newData) {
 window["_wx_loadedCb_"](newData);
 sendAppMessage(newData);
 };
 // 然后就绪
 callbacks.ready && callbacks.ready(argv);
 } else {
 // 就绪状态
 callbacks.ready && callbacks.ready(argv);
 sendAppMessage(data);
 }
 });
 }

 /**
 * 分享到腾讯微博
 * @param {Object} data 待分享的信息
 * @p-config {String} link 链接地址
 * @p-config {String} desc 描述
 *
 * @param {Object} callbacks 相关回调方法
 * @p-config {Boolean} async ready方法是否需要异步执行,默认false
 * @p-config {Function} ready(argv) 就绪状态
 * @p-config {Function} dataLoaded(data) 数据加载完成后调用,async为true时有用,也可以为空
 * @p-config {Function} cancel(resp) 取消
 * @p-config {Function} fail(resp) 失败
 * @p-config {Function} confirm(resp) 成功
 * @p-config {Function} all(resp) 无论成功失败都会执行的回调
 */
 function weixinShareWeibo(data, callbacks) {
 callbacks = callbacks || {};
 var shareWeibo = function (theData) {
 WeixinJSBridge.invoke('shareWeibo', {
 "content":theData.desc,
 "url":theData.link
 }, function (resp) {
 switch (resp.err_msg) {
 // share_weibo:cancel 用户取消
 case 'share_weibo:cancel':
 callbacks.cancel && callbacks.cancel(resp);
 break;
 // share_weibo:fail 发送失败
 case 'share_weibo:fail':
 callbacks.fail && callbacks.fail(resp);
 break;
 // share_weibo:confirm 发送成功
 case 'share_weibo:confirm':
 case 'share_weibo:ok':
 callbacks.confirm && callbacks.confirm(resp);
 break;
 }
 // 无论成功失败都会执行的回调
 callbacks.all && callbacks.all(resp);
 });
 };
 WeixinJSBridge.on('menu:share:weibo', function (argv) {
 if (callbacks.async && callbacks.ready) {
 window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
 if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
 window["_wx_loadedCb_"] = new Function();
 }
 callbacks.dataLoaded = function (newData) {
 window["_wx_loadedCb_"](newData);
 shareWeibo(newData);
 };
 // 然后就绪
 callbacks.ready && callbacks.ready(argv);
 } else {
 // 就绪状态
 callbacks.ready && callbacks.ready(argv);
 shareWeibo(data);
 }
 });
 }

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

 /**
 * 显示网页右上角的按钮
 */
 function showOptionMenu() {
 WeixinJSBridge.call('showOptionMenu');
 }


 /**
 * 隐藏网页右上角的按钮
 */
 function hideOptionMenu() {
 WeixinJSBridge.call('hideOptionMenu');
 }

 /**
 * 显示底部工具栏
 */
 function showToolbar() {
 WeixinJSBridge.call('showToolbar');
 }

 /**
 * 隐藏底部工具栏
 */
 function hideToolbar() {
 WeixinJSBridge.call('hideToolbar');
 }

 /**
 * 返回如下几种类型:
 *
 * network_type:wifi wifi网络
 * network_type:edge 非wifi,包含3G/2G
 * network_type:fail 网络断开连接
 * network_type:wwan 2g或者3g
 *
 * 使用方法:
 * WeixinApi.getNetworkType(function(networkType){
 *
 * });
 *
 * @param callback
 */
 function getNetworkType(callback) {
 if (callback && typeof callback == 'function') {
 WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
 // 在这里拿到e.err_msg,这里面就包含了所有的网络类型
 callback(e.err_msg);
 });
 }
 }

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

 /**
 * 当页面加载完毕后执行,使用方法:
 * WeixinApi.ready(function(Api){
 * // 从这里只用Api即是WeixinApi
 * });
 * @param readyCallback
 */
 function wxJsBridgeReady(readyCallback) {
 if (readyCallback && typeof readyCallback == 'function') {
 var Api = this;
 var wxReadyFunc = function () {
 readyCallback(Api);
 };
 if (typeof window.WeixinJSBridge == "undefined"){
 if (document.addEventListener) {
 document.addEventListener('WeixinJSBridgeReady', wxReadyFunc, false);
 } else if (document.attachEvent) {
 document.attachEvent('WeixinJSBridgeReady', wxReadyFunc);
 document.attachEvent('onWeixinJSBridgeReady', wxReadyFunc);
 }
 }else{
 wxReadyFunc();
 }
 }
 }

 return {
 version :"1.8",
 ready :wxJsBridgeReady,
 shareToTimeline :weixinShareTimeline,
 shareToWeibo :weixinShareWeibo,
 shareToFriend :weixinSendAppMessage,
 showOptionMenu :showOptionMenu,
 hideOptionMenu :hideOptionMenu,
 showToolbar :showToolbar,
 hideToolbar :hideToolbar,
 getNetworkType :getNetworkType,
 imagePreview :imagePreview,
 closeWindow :closeWindow
 };
})();

源码下载:js微信分享

本文已被整理到了《JavaScript微信开发技巧汇总》,欢迎大家学习阅读。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
Angular数据绑定机制原理
Apr 17 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
js+canvas绘制图形验证码
Sep 21 Javascript
JS实现简易日历效果
Jan 25 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 #Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 #Javascript
Javascript的比较汇总
Jul 25 #Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 #Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 #Javascript
JS本地刷新返回上一页代码
Jul 25 #Javascript
jQuery layui常用方法介绍
Jul 25 #Javascript
You might like
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
Python 变量类型详解
2018/10/10 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
德国足球商店:OUTFITTER
2019/05/06 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
数学国培研修感言
2014/02/13 职场文书
詹天佑教学反思
2014/04/30 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
优秀大学生申请书
2019/06/24 职场文书
会议承办单位欢迎词
2019/07/09 职场文书