微信分享JS，监听分享点击、分享发送、分享完成、分享失败全过程

最新推荐文章于 2024-05-15 21:31:16 发布
最新推荐文章于 2024-05-15 21:31:16 发布
阅读量1.4w 收藏 8
点赞数 3
分类专栏： 学习笔记 文章标签： js 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/famiou/article/details/40984335
版权

另外一个微信JS，功能很强大，只贴了链接，自己看： https://github.com/sofish/wechat.js

/**!
 * 微信内置浏览器的Javascript API，功能包括：
 *
 * 1、分享到微信朋友圈
 * 2、分享给微信好友
 * 3、分享到腾讯微博
 * 4、隐藏/显示右上角的菜单入口
 * 5、隐藏/显示底部浏览器工具栏
 * 6、获取当前的网络状态
 * 7、调起微信客户端的图片播放组件
 * 8、关闭公众平台Web页面
 *
 * @author zhaoxianlie(http://www.baidufe.com)
 */
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
    };
})();


使用方法

// 需要分享的内容，请放到ready里
		    WeixinApi.ready(function(Api) {

		        // 微信分享的数据
		        var wxData = {
		            "appId": "", // 服务号可以填写appId
		            "imgUrl" : 'http://app.zciv.com/plug/fwc/template/wx.100.jpg',
		            "link" : 'http://app.zciv.com',
		            "desc" : '大家好123，我是Alien，Web前端&Android客户端码农，喜欢技术上的瞎倒腾！欢迎多交流',
		            "title" : "大家好456，我是赵先烈"
		        };

		        // 分享的回调
		        var wxCallbacks = {
		            // 分享操作开始之前
		            ready : function() {
		                // 你可以在这里对分享的数据进行重组
		                alert("准备分享");
		            },
		            // 分享被用户自动取消
		            cancel : function(resp) {
		                // 你可以在你的页面上给用户一个小Tip，为什么要取消呢？
		                alert("分享被取消");
		            },
		            // 分享失败了
		            fail : function(resp) {
		                // 分享失败了，是不是可以告诉用户：不要紧，可能是网络问题，一会儿再试试？
		                alert("分享失败");
		            },
		            // 分享成功
		            confirm : function(resp) {
		                // 分享成功了，我们是不是可以做一些分享统计呢？
		                //window.location.href='http://192.168.1.128:8080/wwyj/test.html';
		                alert("分享成功");
		            },
		            // 整个分享过程结束
		            all : function(resp) {
		                // 如果你做的是一个鼓励用户进行分享的产品，在这里是不是可以给用户一些反馈了？
		                alert("分享结束");
		            }
		        };

		        // 用户点开右上角popup菜单后，点击分享给好友，会执行下面这个代码
		        Api.shareToFriend(wxData, wxCallbacks);

		        // 点击分享到朋友圈，会执行下面这个代码
		        Api.shareToTimeline(wxData, wxCallbacks);

		        // 点击分享到腾讯微博，会执行下面这个代码
		        Api.shareToWeibo(wxData, wxCallbacks);
		    });


LOVE亦心
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信公众号开发教程(七)JSSDK-监听分享朋友圈事件
wolfcode_cn的博客
06-21 6262
作者：陈惠，叩丁狼教育高级讲师。原创文章，转载请注明出处。微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。我们先来看一个生活中常见的例子：如图所示的一个抽奖活动，抽奖次数有限，若...
JS实现微信里判断页面是否被分享成功的方法
10-19
主要介绍了JS实现微信里判断页面是否被分享成功的方法,结合实例形式分析了js调用微信接口判断网页分享功能的相关操作技巧,需要的朋友可以参考下
vue 公众号h5分享功能 监听微信右上角...
mslmhl的博客
10-15 4764
vue 公众号h5分享功能 监听微信右上角...
H5页面在微信端的分享（分享到朋友圈，好友）_js实现h5网页微信分享、朋友圈分享功能(微信右上角分享)
最新发布
2401_84620303的博客
05-15 589
前端资料汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
微信JS分享
牧竹子
10-21 1421
概述微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项准备工作 拥有自己的域名 绑定域名到公网服务器IP地址 拥有公司订阅
js使用微信分享功能
韩大璐
03-19 7326
在使用微信分享(包括微信api里的其他方法)之前，需要有一些准备、比如要准备 appId、timestamp、nonceStr、signature 这四个数据，只有在有这四个字段后，我们才可以去使用微信的一些方法和功能， 但这些东西是不能写死的，得是活的，所以就麻烦后端同学配合了一下，将数据帮忙生成了一下，但在调研阶段还是使用的手动生成，生成后他把得到的这几个字段发给我，我拿到后放到对应的位置就可...
微信JS-SDK实现分享功能
sean的博客
06-29 1143
1 申请一个微信公众号，并确认在开发–接口权限中拥有分享功能的权限。 2 公众号设置–功能设置：在JS接口安全域名中添加安全域名，这个安全域名不是url，只需添加一级域名即可。 3 开发，基本配置中，需要获得开发者id，开发者密码，ip白名单，ip白名单是服务器的ip。 4 获得jsapi_ticket： 先获取access_token:https://mp.weixin.qq.co
JSSDK实现微信分享功能
热门推荐
感恩、奋进、自信
10-03 3万+
功能：在微信内置浏览器页面实现分享页面功能。 注意：关于微信内置浏览器的私有对象WeixinJSBridge分享的接口都已经作废了，即下面的定义都是无效的： $(function(){ var appId = '公众号的appid'; var imgURL = '自定义分享时的图片地址'; var link = '分享页面的链接地址'; var desc = '
微信小程序开发-扫雷小游戏案例源码.zip
08-15
通过这个扫雷小游戏的源码，你可以学习到如何将这些技术点融会贯通，理解微信小程序开发的全过程。同时，这个案例也适合用来实践和提升自己的编程技巧，加深对微信小程序开发的理解。在实际操作中，你可以尝试修改...
网易云音乐小程序案例分享 附完整代码.zip
01-29
在这个案例中，开发者将深入到小程序的开发流程，体验从设计到实现的全过程，并可以参考提供的完整代码进行学习。 【描述】：这个压缩包包含了一个实际的网易云音乐小程序的全部源代码，为那些想要了解或提升小程序...
微信小程序全自动埋点
08-10
1. **事件监听**：微信小程序提供了丰富的API来监听用户的点击、滑动等交互事件。开发者可以利用这些API，如`wx.onTap()`、`wx.swipe()`等，结合页面生命周期函数，对用户行为进行实时捕获。 2. **数据追踪与上报**...
手机浏览器唤起微信分享(JS)
10-14
主要介绍了手机浏览器唤起微信分享功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Uni-App从入门到实战教程[视频课程].txt打包整理.zip
03-06
- 电商应用：通过一个完整的电商项目实例，实践从需求分析到项目上线的全过程。 - 实时聊天应用：了解如何在 Uni-App 中实现即时通讯功能，如使用 WebSocket 进行数据传输。 通过本教程的学习，你不仅能够掌握 ...
微信小程序全套源代码（后台、小程序php）（源码）源代码.zip
12-24
微信小程序的开发框架基于JavaScript，它提供了WXML（WeChat Markup Language）用于定义界面结构，WXSS（WeChat Style Sheets）用于样式设置，以及JavaScript处理数据和业务逻辑。开发者可以利用这套框架构建出与...
js sdk 一键分享 微信_微信jssdk实现分享到微信
weixin_39788792的博客
12-24 1653
本来用的是这个插件http://overtrue.me/share.js/和百度分享相同之处：在微信分享的时候，分享的链接都不能获取到缩略图。。。不同之处：百度分享在微信低版本是可以看到缩略图的(但是一点用都没有，不过还是要说一下)这两个在分享带图片的文章的时候，都是不符合要求的(在这上面耗费了我好多时间，一度让我怀疑人生了。。。)最后得出的你想要带标题 描述 图片都是完整的，就需要用微信的jss...
微信内置浏览器 用 JS 调用微信APP分享到微信朋友圈
kimizhou_blog的专栏
05-17 2万+
昨天开始搞分享到微信朋友圈，要求直接调用微信APP的分享到朋友圈。。。    1：首先你需要完成微信的六大前期准备工作，这也是最烦人的。请仔细阅读微信的APP文档：    文档地址：https://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html          1.1  绑定域名 这种东西，需要注册，
微信JS-SDK config OK,但分享配置失败（分享接口回调函数失效）
flysord的专栏
05-26 1万+
直接表现： 1.微信js的debug模式开启情况下，在微信端载入页面时，夺得config OK 的信息（认证成功） 2.但是在分享后，无法加载配置的分享信息，分享后仍然是非定制的信息。 条件说明： 1.参考微信官方文档进行配置 2.认证和分享js参考文章 http://www.jb51.net/article/99573.htm 调试过程：
php 微信分享成功判断,JS实现微信里判断页面是否被分享成功的方法
weixin_35196909的博客
03-17 376
本文实例讲述了JS实现微信里判断页面是否被分享成功的方法。分享给大家供大家参考，具体如下：var shareData = {img_url: "",img_width: 200,img_height: 200,link: '',desc: '',title: '',appid: 0};document.addEventListener('WeixinJSBridgeReady', function...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值