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 相关文章推荐
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
Boostrap入门准备之border box
May 09 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
代码解析React中setState同步和异步问题
Jun 03 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
javascript整除实现代码
2010/11/23 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
python多线程操作实例
2014/11/21 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
医学护理系毕业生求职信
2013/10/01 职场文书
销售文员的岗位职责
2013/11/20 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server