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引擎的识别方法
Oct 20 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
php实现中文转数字
2016/02/18 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
javascript 数组操作详解
2015/01/29 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
vue数字类型过滤器的示例代码
2017/09/07 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
python opencv摄像头的简单应用
2019/06/06 Python
Python中调用其他程序的方式详解
2019/08/06 Python
Django models filter筛选条件详解
2020/03/16 Python
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
CSMA/CD介质访问控制协议
2015/11/17 面试题
小学毕业家长寄语
2014/01/19 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
承诺书范本
2015/01/21 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
解决Redis启动警告问题
2022/02/24 Redis