微信分享后ajax回调的success中不会运行问题记录

1 篇文章 0 订阅
1 篇文章 0 订阅

在我们微信端开发中,经常会遇到这样的需求,当用户分享朋友圈可以获得某某奖励,例如积分等。好像很简单的一个需求,那么我们直接开发。。

这里说明一下,我使用的还是微信1.2.0版本的分享,现在快要废弃了,不过项目中一直用的这个版本,暂时也就不改了,推荐使用1.4.0版本的,详细可查看微信开发者文档

分享代码如下:

try{
		$(function(){
			if($.isWeiXin() && $.isDomain()){
				//获取微信 js接口的权限 
				var t=Math.random();
				$.ajax({
					url:"wx/signConfig.shtml?t="+t, 
					type:"POST", 
					cache: false,
					data:{url:location.href},
					success:function(data){
						data['debug']=false;
						data['jsApiList']=['onMenuShareTimeline','onMenuShareAppMessage',
						                   'imagePreview','hideToolbar','hideOptionMenu','onMenuShareQQ','onMenuShareQZone'];
						
						wx.config(data);//通过config接口注入权限验证配置
						wx.ready(function(){//通过ready接口处理成功验证
							wx.onMenuShareTimeline({//分享朋友圈
								title: "分享朋友圈有礼", //分享标题 
							    desc: "分享朋友圈可获得积分!",
							    link: $.absolute_url("/signin/sign.shtml"), // 分享链接 
							    imgUrl: "sign_share_20190404.png", // 分享图标
							    success:function(){
							    	//分享成功可获得积分
							    	$.ajax({
											url:"signin/sharesuccess.shtml",
											type:"POST",
											async:true,
											cache: false,  
								            dataType: "json",
											success:function(json){
												alert("分享成功");
												//分享成功后操作  此处省略一万字
											}
									});
							    },
							    cancel:function(){
							    	try{window.shareCancel()}catch(e){};
							    } 
							});
						});
					}
				});
			}
		});
	}catch(e){

	}

在这里插入图片描述
关于微信分享的内容就不多解释了,大家开开发者文档就好。

上述代码的大致的功能实现就是分享当前的朋友圈,分享成功之后可获得一定的积分。

问题描述:
分享正常,分享成功后积分添加正常,可是alert(“分享成功”)这一步不会走,也就是说走了ajax,没等ajax回调,分享就已经结束了,自然就不会在alert了。

网上有说把 ajax异步改成同步的,我试过了依然不行。

解决办法1:

function shareSuccess(){
		$.ajax({
			url:"signin/sharesuccess.shtml",
			type:"POST",
			async:true,
			cache: false,  
            dataType: "json",
			success:function(json){
					alert("分享成功");
					//分享成功后操作  此处省略一万字
			}
		});
	}

单独把ajax拉出来写成function,然后在分享成功里面进行调用,就能很好的解决上面的问题。

 success:function(){
    	shareSuccess();
    },

解决办法2(不推荐):

使用方法1已经能解决问题了,不过还有一个方法也可以尝试,就是另外一些一个页面。

 success:function(){
    	window.location.href="sign/success.shtml";
    },

然后在分享成功的页面,进行添加积分的ajax请求操作。

<script type="text/javascript">
	$(function(){
		try{
    		$.ajax({
				url:"signin/sharesuccess.shtml",
				type:"POST",
				async:true,
				cache: false,  
                dataType: "json",
				success:function(json){
					if(json!=null){
			    		window.location.href = "signin/signIndex.shtml";
		    		}
				}
			});
		}catch(e){};
	});
</script>

不过这种方法因为存在跳转页面的操作,不方便对原有的页面元素进行操作,而且跳转页面了,要返回到原来的页面就进行了页面加载,增加了服务器的负担。

最后提醒一下,微信是不支持诱导用户进行分享的。“请注意,不要有诱导分享等违规行为,对于诱导分享行为将永久回收公众号接口权限”,
根据《公众平台运营规范》第3.3.1 诱导分享
禁止通过外链或公众号消息等方式,强制或诱导用户将消息分享至朋友圈的行为。奖励的方式包括但不限于:实物奖品、虚拟奖品(积分、信息)等。
若违反相关协议,我司会根据公众帐号违规情况,对公众帐号限制或禁止使用全部或部分功能、帐号封禁/注销等相应处罚。

而且在微信6.7.2版本之后,onMenuShareTimeline这些分享的接口,不管是分享成功还是取消分享都是走的success回调,不再走cancel接口了。至于updateAppMessageShareData和updateTimelineShareData这两个1.4.0之后的接口,我暂时还没有去尝试,好像分享也是不会走cancel接口,大家可以去试一试。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现在微信浏览器进行H5分享,可以通过以下步骤实现: 1. 引入微信JS-SDK库:在H5页面的<head>标签添加以下代码: ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 这样就可以在页面使用微信的JavaScript API了。 2. 配置微信分享参数:在页面正文添加以下代码: ```html <script> // 通过ajax请求服务器端获取微信分享所需要的参数 $.ajax({ url: 'your_server_url', data: { // 在服务器端生成签名所需要的参数,如当前页面的URL等 }, success: function(response) { // 服务器返回的数据包括签名等信息 wx.config({ debug: false, // 开启调试模式,可在开发阶段进行调试 appId: response.appId, timestamp: response.timestamp, nonceStr: response.nonceStr, signature: response.signature, jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 需要使用的分享接口列表 }); // 配置成功后进行分享 wx.ready(function() { wx.onMenuShareAppMessage({ title: '分享标题', // 分享标题 desc: '分享描述', // 分享描述 link: '分享链接', // 分享链接 imgUrl: '分享图标', // 分享图标 success: function () { // 用户完成分享后的回调函数 }, cancel: function () { // 用户取消分享后的回调函数 } }); // 可以添加更多分享接口... }); }, error: function(xhr, status) { // 处理请求失败的情况 } }); </script> ``` 以上代码首先通过ajax请求服务器端获取微信分享所需要的参数,包括appId、timestamp、nonceStr、signature等。然后通过wx.config方法进行配置,指定需要使用的分享接口。wx.ready方法可以添加多个分享接口的配置,如onMenuShareTimeline等。配置成功后,用户点击分享按钮即可进行分享操作。 以上就是在H5页面实现微信浏览器分享的方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值