微信公众号开发--微信JS-SDK分享到朋友圈和分享给朋友

之前写过一篇使用微信JS-SDK来实现扫一扫功能的博客

微信公众号开发–微信JS-SDK扫一扫功能

在该博客里介绍了微信JS-SDK的基本用法,其中包括以下几个步骤

还详细介绍了通过config接口注入权限验证配置以及签名算法实现的Java版本

前两天在做微信分享的时候发现按照以前的思路每次都不能正确获取“分享到朋友圈”按钮点击状态及自定义分享内容接口,而是必须通过一个按钮先点击帮点事件,然后才能获取“分享到朋友圈”按钮点击状态及自定义分享内容接口。

回顾一下以前扫一扫的js代码

下面是wx.config的主代码

    <script type="text/javascript">
        $(function() {
            var timestamp = $("#timestamp").val();//时间戳
            var nonceStr = $("#noncestr").val();//随机串
            var signature = $("#signature").val();//签名
            wx.config({
                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId : ‘wx622ca8545e5c354b‘, // 必填,公众号的唯一标识
                timestamp : timestamp, // 必填,生成签名的时间戳
                nonceStr : nonceStr, // 必填,生成签名的随机串
                signature : signature,// 必填,签名,见附录1
                jsApiList : [ ‘scanQRCode‘ ]
            // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            });
        });
    </script>

下面是扫一扫的代码

前提是有一个

<button id="scanQRCode">扫码</button>
        $("#scanQRCode").click(function() {
            wx.scanQRCode({
                needResult : 1,
                desc : ‘scanQRCode desc‘,
                success : function(res) {
                    //扫码后获取结果参数:htpp://xxx.com/c/?6123,截取到url中的防伪码后,赋值给Input
                    var url = res.resultStr;
                    /* var tempArray = url.split(‘?‘);
                    var tempNum = tempArray[1]; */
                    if(url.indexOf(",")>=0){
                        var tempArray = url.split(‘,‘);
                        var tempNum = tempArray[1];
                        $("#id_securityCode_input").val(tempNum);
                    }else{
                    $("#id_securityCode_input").val(url);
                    }

                }
            });
        });

以上代码完全没有问题,但是当我配置获取“分享到朋友圈”按钮点击状态及自定义分享内容接口的时候却始终不能成功

解决方案

原来是wx.config执行需要时间,而我们把扫一扫放在外面完全没影响。是因为,我们点击扫码的时候wx.config已经加载好了,而我之前的点击一下再分享和扫码是一个道理,为了不让用户点击一下再分享需要将我上面讲的微信JS-SDK使用步骤中的第四步用到

下面是官方的解释

步骤四:通过ready接口处理成功验证

wx.ready(function(){

// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

});

上面的描述给出了我之前的扫码可以成功而分享不能成功的合理解释。

像点击扫码这样的事件属于

对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

而对于分享事件属于

如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行

下面就来看一下正确的获取“分享到朋友圈”按钮点击状态及自定义分享内容接口的使用方法

    <script type="text/javascript">
        $(function() {
            var timestamp = $("#timestamp").val();//时间戳
            var nonceStr = $("#noncestr").val();//随机串
            var signature = $("#signature").val();//签名
            wx.config({
                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId : ‘wx622ca8545e5c354b‘, // 必填,公众号的唯一标识
                timestamp : timestamp, // 必填,生成签名的时间戳
                nonceStr : nonceStr, // 必填,生成签名的随机串
                signature : signature,// 必填,签名,见附录1
                jsApiList : [ ‘scanQRCode‘,‘onMenuShareAppMessage‘ ]
            // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            });

            wx.ready(function(){
                // 分享事件必须放在这里
                wx.onMenuShareAppMessage({
                      title: ‘这是一个测试的标题‘,
                      desc: ‘这个是分享奥朋友圈的描述信息‘,
                      link: ‘http://www.baidu.com‘,
                      imgUrl: ‘https://www.baidu.com/img/bd_logo1.png‘,
                      trigger: function (res) {
                        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回
                        // alert(‘用户点击发送给朋友‘);
                      },
                      success: function (res) {
                          alert(‘分享成功‘);
                      },
                      cancel: function (res) {
                        alert(‘你没有分享‘);
                      },
                      fail: function (res) {
                        alert(JSON.stringify(res));
                      }
                    });
                    //alert(‘已注册获取“发送给朋友”状态事件‘);
            });
        });
    </script>

完整的分享到朋友圈和朋友的js代码

<script type="text/javascript">
        $(function() {
            var timestamp = $("#timestamp").val();//时间戳
            var nonceStr = $("#noncestr").val();//随机串
            var signature = $("#signature").val();//签名
            wx.config({
                debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId : ‘wx622ca8545e5c354b‘, // 必填,公众号的唯一标识
                timestamp : timestamp, // 必填,生成签名的时间戳
                nonceStr : nonceStr, // 必填,生成签名的随机串
                signature : signature,// 必填,签名,见附录1
                jsApiList : [ ‘scanQRCode‘,‘onMenuShareAppMessage‘,‘onMenuShareTimeline‘ ]
            // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            });

            wx.ready(function(){
                // wx.hideOptionMenu();
                wx.onMenuShareTimeline({
                    title: ‘这是一个测试的标题--程高伟的博客‘,
                    link: ‘http://blog.csdn.net/frankcheng5143‘,
                    imgUrl: ‘http://avatar.csdn.net/E/B/6/1_frankcheng5143.jpg‘,
                    success: function () {
                        // 用户确认分享后执行的回调函数
                         alert(‘分享到朋友圈成功‘);
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                         alert(‘你没有分享到朋友圈‘);
                    }
                });
                wx.onMenuShareAppMessage({
                      title: ‘这是一个测试的标题--百度‘,
                      desc: ‘这个是要分享内容的一些描述--百度一下,你就知道‘,
                      link: ‘http://www.baidu.com‘,
                      imgUrl: ‘https://www.baidu.com/img/bd_logo1.png‘,
                      trigger: function (res) {
                        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回
                      },
                      success: function (res) {
                          alert(‘分享给朋友成功‘);
                      },
                      cancel: function (res) {
                        alert(‘你没有分享给朋友‘);
                      },
                      fail: function (res) {
                        alert(JSON.stringify(res));
                      }
                    });
            });
        });
</script>

关于绑定域名和签名算法参考

微信公众号开发–微信JS-SDK扫一扫功能

效果

通过菜单进入页面

进入后呈现的页面

点击发送给朋友

出现我们在js中设置的分享内容

分享成功执行的方法

分享成功的页面

用户点击取消,没有分享时的方法

分享到朋友圈的页面

分享成功和没有分享和上面的效果一样

参考文献

微信JS-SDK说明文档

微信公众号开发–微信JS-SDK扫一扫功能

时间: 2024-10-23 22:44:32

微信公众号开发--微信JS-SDK分享到朋友圈和分享给朋友的相关文章

[5] 微信公众号开发 - 微信支付功能开发(网页JSAPI调用)

1.微信支付的流程 如下三张手机截图,我们在微信网页端看到的支付,表面上看到的是 "点击支付按钮 - 弹出支付框 - 支付成功后出现提示页面",实际上的核心处理过程是: 点击支付按钮时,执行一个Ajax到后台 后台通过前台的部分信息(如商品名额,金额等),将其组装成符合微信要求格式的xml,然后调用微信的"统一下单接口" 调用成功后微信会返回一个组装好的xml,我们提取之中的消息(预支付id也在其中)以JSON形式返回给前台 前台将该JSON传参给微信内置JS的方法

JAVA微信公众号开发入门

好久没进博客,最近应某人的要求,要每周写一篇博客,故此今天就把我这周刚学的微信公众号开发的知识在此总结总结,以供后人查阅.我写博客都是简要白话文,勿喷. 1.为什么要学微信公众号开发 微信的用户量庞大,微信公众号的完善和不断的开放力度,企业市场对公众号开发的需求不断增加 2.如何搭建微信开发平台 开发工具什么的就不说了,因为微信是要外网访问的,所有你必须有个网上的服务器资源,而且你必须申请一个微信公众号. 2.1申请微信公众号 公众号有3种:订阅号,服务号,企业号 区别是企业号适合内部人使用,因

VopSdk一个高逼格微信公众号开发SDK:自动化生产(装逼模式开启)

VopSdk一个高逼格微信公众号开发SDK(源码下载) VopSdk一个高逼格微信公众号开发SDK:自动化生产(装逼模式开启) 针对第一版,我们搞了第二版本,老规矩先定个目标. 一 我们的目标 a.移除PayExcute,统一执行入口,目前只保留一个入口Excute b.序列化特性统一,目前只用设置xml特性即可(反序列化时xml和json都可以直接用) c.支持文件上传,目前只有多客服管理上传头像接口用到过 d.使用T4模板自动生产所有Request.Response.以及所有测试Test(装

【微信公众号开发】获取并保存access_token、jsapi_ticket票据(可用于微信分享、语音识别等等)

步骤一:首先得开通公众号(目的是 获得appid.AppSecret.设置安全域名)~ [公众号设置]→[功能设置] 设置相应的域名 步骤二:编写帮助类WeixinLuyinHelper中的代码 #region 请求Url,不发送数据/// <summary>/// 请求Url,不发送数据/// </summary>public static string RequestUrl(string url){return RequestUrl(url, "POST")

利用OpenShift托管Node.js Web服务进行微信公众号开发

最近写了一个微信的翻译机器人.用户只要关注该微信号,发送英文的消息,就能收到中文翻译的回复.后台是用Node.js写的,托管在OpenShift的Paas平台上.翻译过程实际上是调用微软的Bing translation API做的,代码中用到了alexu84的bing-translate和JacksonTian的wechat这两个npm模块.下面把做的过程详细说一下. 1. 微信公众号开发 首先是要到https://mp.weixin.qq.com 申请一个公众号,并申请成为开发者.目前个人只

微信公众号开发总结

最近公司用到了微信公众平台,所以研究了一下微信公众号的开发技术,总体来说比较简单,结合现有的平台核技术,实现起来非常方便. 首先先来了解一下微信公众平台. "微信,是一个生活方式" ,这是微信的自我评价,是不是觉得如果那天不在朋友圈里分享一下自己的最新状态, 并且收到几个赞和评价的话,会觉得空虚寂寞呢?它实实在在的改变了我们的生活方式. " 微信,也是一个生意方式 ",在微信成为我们日常必备之app的同时,它同样具备巨大的的商业 或许不应该称为潜力,因为有很多人已经

微信公众号开发的一些总结

微信公众号开发,主要可以分为2大块 服务端开发 公众号服务端的开发,基于公众平台提供的那套接口,可以玩的花样比较少.总结一些小经验 利用菜单生成URL 看了很多公众号,一个普遍的做法是,点击下方的菜单之后,不是直接跳到页面上,而是返回一个图文消息,再点击图文消息,才会跳到新页面上 看起来有点多此一举,直接跳走不是更方便吗?这样做的目的是为了动态地生成URL.下面的菜单,一般都是固定的,粉丝点击了直接就跳走了,没有机会在服务器过一道.但是如果设置成EVENT,微信服务器就会往开发者服务器推一条消息

.NET微信公众号开发-5.0微信支付

一.前言 在开始做这个功能之前,我们要做的第一件事情就是思考,如何做这个微信支付,从哪里开始,从哪里入手,官方的sdk说明什么的,有没有什么官方的demo,还有就是老板给我的一些资料齐全不,那些要申请的接口什么的都有没有. 经过自己的一些探索,在老板的催促下终于硬着头皮做完了这个,很坑很坑的微信支付,在此做一些总结,希望对你们有所帮助,本人能力有限,如果有什么说的不好,希望大家多多包涵. 二.开发前准备. 1.0微信支付官方开发者文档 2.0官方demo下载 我们用c#所以选择.net版本 不过

微信公众号开发教程[002]-配置

一.注册微信公众号 微信公众号官方入口https://mp.weixin.qq.com注册公众号,注册过程中,类型选择可能是新手比较迷惑的地方.微信公众号分为订阅号和服务号(还有个企业号,似乎用的人不多),每种类型下面又分为公司,政府部门,社会组织,个人等不同性质.不同类型,不同性质的公众号,权限不同,申请资料也不同. 例如:公司(订阅号或服务号),你得提供工商注册号,银行对账号.注册成功后,也并不是所有权限都默认开通,需要手动开通.有些权限还得微信认证之后才能开通.关于这些细节,可参阅微信公众