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读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
js处理表格对table进行修饰
May 26 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
javascript 函数的暂停和恢复实例详解
Apr 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实现获取文章内容第一张图片的方法
2014/11/04 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
htm调用JS代码
2007/03/15 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
Position属性之relative用法
2015/12/14 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
解决vuex刷新数据消失问题
2020/11/12 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
花店创业计划书范文
2014/02/07 职场文书
行政办公室岗位职责
2014/03/18 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
解析MySQL binlog
2021/06/11 MySQL