原生开发h5进行微信分享,没有自定义设置成功头像、标题的问题解决方案

1.最近做原生h5开发,测试发现分享有时候能显示图片及设置的标题等信息、大概率没有显示
bug图
在这里插入图片描述
2.原因:
在使用微信JS-SDK进行分享时,wx.ready函数是非常关键的,因为它确保了微信JS-SDK的配置已经完成并且可以安全地调用JS-SDK的API。在wx.config配置完成并且微信客户端验证了配置信息之后,wx.ready回调函数会被触发。在该回调函数内部调用的任何JS-SDK方法都会正常工作。
如果不使用wx.ready直接调用JS-SDK的API,可能会导致以下几种情况:
1.配置未完成:如果wx.config的配置信息尚未被微信客户端验证,直接调用API会导致API调用失败。
2.异步问题:wx.config是异步的,这意味着即使你紧接着wx.config之后调用API,配置可能还未完成,因此API调用可能无效。
3.权限问题:微信客户端需要验证wx.config中的签名信息才能授权使用JS-SDK的API。如果没有经过验证,API调用将不会被授权。
因此,在你的代码中,如果省略了wx.ready,那么wx.onMenuShareTimeline和wx.onMenuShareAppMessage可能在wx.config配置信息未被验证之前就被调用,从而导致分享功能失败。
在这里插入图片描述
解决方案:加上wx.ready后即可

function share(shareData) {
	$.ajax({
		url: wxMessage.url,
		data: {
			"url": window.location.href
		},
		type: "post",
		error: function (XMLHttpRequest, textStatus, errorThrown) { },
		success: function (data) {
			var resultData = data.data;
			console.log("数据", resultData)
			wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
				appId: resultData.appId, // 必填,公众号的唯一标识
				timestamp: resultData.timestamp, // 必填,生成签名的时间戳
				nonceStr: resultData.nonceStr, // 必填,生成签名的随机串
				signature: resultData.signature, // 必填,签名,见附录1
				jsApiList: [ // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
					'checkJsApi',
					'onMenuShareTimeline',
					'onMenuShareAppMessage',
					'onMenuShareQQ',
					'onMenuShareWeibo',
					'updateAppMessageShareData',
					'showOptionMenu',
					'chooseImage',
					'previewImage'
				],
			});
		}
	});
	wx.ready(function () {
		console.log("验证成功~~~~~~~")
		wx.onMenuShareTimeline(shareData);
		wx.onMenuShareAppMessage(shareData);
	})

}
share(shareData);

展示效果图
在这里插入图片描述

  • 11
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值