收藏
回答

网页实现自定义“分享到朋友圈”及“分享到QQ空间”的分享内容无法显示自定义内容,还是一个链接?

我的网页链接:https://www.zhangw.vip/details.html?id=51

1、页面已加入JS <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2、公众号已配置JS接口安全域名

3、阿里云服务器白名单已配置

4、前端主要JS代码如下

$(document).ready(function () {
	//分享朋友圈
	getWeCharShareData();
});
function getWeCharShareData(){
	//获取当前页面的url
	var linkUrl = window.location.href;
	console.log(linkUrl);
	//调用后台获取接口参数
	$.ajax({
		type:'GET',
		url:baseUrl+'/api/v1/pub/wechat/share',
		data:{
			link_url:linkUrl
		},
		dataType: 'json',
		success: function(resp){
			console.log(JSON.stringify(resp));
			//JSON.stringify() 
			if (resp.code == 0) {
				weCharShare(resp.data.signature, resp.data.appId, resp.data.jsapi_ticket, resp.data.url, resp.data.nonceStr, resp.data.timestamp, resp.data.title, resp.data.desc, resp.data.imgUrl);
			} else{
				
			}
		},
		error: function(jqXHR, textStatus, errorThrown){
			alert("其他错误:" + jqXHR.status);
		}
	});
}
function weCharShare(usignature, uappId, ujsapi_ticket, uurl, unonceStr, utimestamp, utitle, udesc, uimgUrl){
	var signature = usignature;
	var appId = uappId;
	var jsapi_ticket = ujsapi_ticket;
	var url = uurl;
	var nonceStr = unonceStr;
	var timestamp = utimestamp;
	var title = utitle;
	var desc = udesc;
	var imgUrl = uimgUrl;
	
	//**配置微信信息**
	wx.config ({
	    debug : true,
	    appId : appId,
	    timestamp : timestamp,
	    nonceStr : nonceStr,
	    signature : signature,
	    jsApiList : [
	        // 所有要调用的 API 都要加到这个列表中
			//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
	        'updateTimelineShareData',
			//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
	        'updateAppMessageShareData'
	    ]
	});
	
	wx.ready(function(){
		// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
		// 微信分享的数据
		var shareData = {
		    "imgUrl" : imgUrl,
		    "link" : url,
		    "desc" : desc,
		    "title" : title,
		    success : function () {
		        // 分享成功可以做相应的数据处理
				console.log("回调000000");
		    }
		};
	});
	
	//分享微信朋友圈
	wx.updateTimelineShareData ({
		    "title" : title,
			"desc" : desc,
			"link" : url,
			"imgUrl" : imgUrl,
		    success : function () {
		        // 分享成功可以做相应的数据处理
				console.log("回调000000");
		    }
	});
	
	//分享给朋友
	wx.updateAppMessageShareData({
	    title: title, // 分享标题
	    desc: desc, // 分享描述
	    link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	    imgUrl: imgUrl, // 分享图标
	    success: function () {
	        // 设置成功
			console.log("回调updateAppMessageShareData");
	    }
	});
	
	wx.checkJsApi({
		jsApiList: ['updateTimelineShareData','updateAppMessageShareData'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
		success: function(res) {
			// 以键值对的形式返回,可用的api值true,不可用为false
			// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
			console.log("检查检查");
			console.log(JSON.stringify(res));
		}
	});
}

5、部署生产环境后,真机测试看到debug弹出内容均为OK或者success,以下截图为第一步中的文章链接测试:

6、点击右上角三个点选择分享到朋友圈,仍然是一个链接:

7、微信开发者工具测试看控制台内容感觉无问题:

麻烦请问下这还有可能是什么原因造成没有自定义分享效果?

回答关注问题邀请回答
收藏

1 个回答

  • xxxidream
    xxxidream
    2022-04-26

    外链打开分享配置不生效。只能通过公众号菜单链接打开,收藏链接打开,扫码二维码打开,app分享链接微信打开,才能生效

    2022-04-26
    有用 1
    回复 2
    • A丨ZW
      A丨ZW
      2022-04-26
      这样子哦,我去摸索下是不是这样子。感谢
      2022-04-26
      回复
    • A丨ZW
      A丨ZW
      2022-04-26
      再请问下如果我要实现在我的网页中能通过扫一扫来分享到朋友圈这个应该怎么实现,我好像也没找到相关的资料
      2022-04-26
      回复
登录 后发表内容