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

朴灿烈づ我的快乐病毒、 2022-07-28 06:14 202阅读 0赞

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

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

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

![这里写图片描述][20160331143908570]

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

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

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

下面是wx.config的主代码

下面是扫一扫的代码

前提是有一个

$("#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使用步骤中的第四步用到

![这里写图片描述][20160331145317700]

下面是官方的解释

> **步骤四：通过ready接口处理成功验证**
> 
> wx.ready(function()\{
> 
> // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。  
> \});

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

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

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

而对于分享事件属于

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

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

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

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

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

# 效果 #

通过菜单进入页面

![这里写图片描述][20160331152651621]

进入后呈现的页面

![这里写图片描述][20160331152725636]

点击发送给朋友

![这里写图片描述][20160331152807480]

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

![这里写图片描述][20160331152853449]

分享成功执行的方法

![这里写图片描述][20160331152931387]

分享成功的页面

![这里写图片描述][20160331153158935]

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

![这里写图片描述][20160331153009591]

分享到朋友圈的页面

![这里写图片描述][20160331153240045]

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

# 参考文献 #

> [微信JS-SDK说明文档][JS-SDK 1]
> 
> [微信公众号开发–微信JS-SDK扫一扫功能][JS-SDK]

[JS-SDK]: http://blog.csdn.net/frankcheng5143/article/details/50163615
[20160331143908570]: /images/20220727/f43f75ccaeba46e084d95c9d8c0289b2.png
[20160331145317700]: /images/20220727/12c6e71ac23e497d89ddf7f806b02d58.png
[20160331152651621]: /images/20220727/bed6d3c1169a4eba80d9226b91ccc11c.png
[20160331152725636]: /images/20220727/ada71327e30143a5a1989801e2e43f07.png
[20160331152807480]: /images/20220727/f362a5a028fe425dbe4633e6de4a6362.png
[20160331152853449]: /images/20220727/123b7a12889a45de8edcfb5b945f29c9.png
[20160331152931387]: /images/20220727/ea705943bb254f1e9cc4dfcd11191f60.png
[20160331153158935]: /images/20220727/38030ac0a7c24c87bef6cee6374abd40.png
[20160331153009591]: /images/20220727/cd16127bdb284c82a52c4e9b98473c83.png
[20160331153240045]: /images/20220727/da48dc9560ec4d25b865a350c43ec3a2.png
[JS-SDK 1]: http://mp.weixin.qq.com/wiki/7/1c97470084b73f8e224fe6d9bab1625b.html#.E9.99.84.E5.BD.951-JS-SDK.E4.BD.BF.E7.94.A8.E6.9D.83.E9.99.90.E7.AD.BE.E5.90.8D.E7.AE.97.E6.B3.95