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 面向对象编程(一) 封装
Aug 28 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
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备份/还原MySQL数据库的代码
2011/01/06 PHP
PHP四大安全策略
2014/03/12 PHP
yii用户注册表单验证实例
2015/12/26 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
js实现图片上传并预览功能
2018/08/06 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python格式化输出%s和%d
2018/05/07 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
详解Python的三种拷贝方式
2020/02/11 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
茶叶店创业计划书范文
2014/01/19 职场文书
市场营销工作计划书
2014/05/06 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
担保书范文
2019/07/09 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
python flask框架快速入门
2021/05/14 Python
Redis keys命令的具体使用
2022/06/05 Redis