之前写过一篇使用微信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,// 必填，签名，见附录1jsApiList : [ '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中的防伪码后，赋值给Inputvar 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,// 必填，签名，见附录1jsApiList : [ '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,// 必填，签名，见附录1jsApiList : [ '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扫一扫功能

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

视频教程-SpringBoot微信公众号开发-微信开发
SpringBoot微信公众号开发就职于国内知名在线互联网旅游公司,10+互联网开发经验,精通前后端开发刘志强 ¥149.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免 ...
视频教程-微信公众号开发-微信开发
微信公众号开发云知梦创始人,国际架构师,11年互联网培训和开发经验,曾在港电讯盈科.北大青鸟集团.远大教育.北京易第优教育等公司任职曾获得美国红帽RHCA构架师和RHCDS数据中心讲师,在国内排名第 ...
微信公众号开发---微信开发学习路线（及供参考）
目录(?)[-] 1. 热门学习 1. 微信支付之H5页面WAP端接入 2. 微信支付开发系统开发流程及完整Demo展示 3. 微信公共服务平台开 ...
Java微信公众号开发微信网页授权之前端传递code方式获取用户信息
本片博客讲解的网页授权分为两步,前端先传递backUrl(回调地址)到后台网页授权接口,该接口拿到回调地址后组装授权连接,重定向到前端页面,前端页面截取Code,传入后端获取用户信息方法,获取用户信息 ...
c# sha1签名微信_微信公众号开发——微信JSSDK使用（踩坑）
这段时间有个工作,是要在移动端给地图上加上导航功能,找了一圈,最后决定使用微信JSSDK的'打开地理位置接口'来开发,也是着实踩了下坑啊,分享一下微信JSSDK介绍因为微信公众号的开通对于大部分开 ...
jssdk信息验证失败_微信公众号开发——微信JSSDK使用
微信JSSDK介绍官方文档地址: 概述 | 微信开放文档links.jianshu.com 因为微信公众号的开通对于大部分开发人员来说还是一个稍高的门槛,所以,微信搞了一个微信测试号,开发人员使用 ...
微信公众号开发——微信获取、操作公众号文章
微信获取,操作公众号文章项目地址:https://gitee.com/wrzhxy/wx_article 我以为微信支付和微信企业付款文档就够坑爹了,直到我遇到了微信获取公众号文章... 微信获取公 ...
微信公众号开发——微信支付踩坑小记
记录下需要注意的几个问题: 1.在每个需要调用微信支付的页面都要引入js.如果部署的服务器支持https,则应换成对应的https的js链接 2.微信公众号内填写域名,不带http://或者https ...
微信公众号开发-----微信模板消息接口-----发送模板消息
发送模板消息接口调用请求说明 http请求方式: POST https://api.weixin.qq.com/cgi-bin/message/template/send?access_token= ...

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

解决方案

效果

参考文献

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

最新文章

热门文章