从APP里调用分享功能,将文章分享到微信里,这个时候还是正常显示,以卡片的形式显示,标题、描述、图片、logo全都有。
但是进入链接后再使用微信自带的分享功能分享出去给好友,就只显示标题和链接,不显示描述和图片了。
H5的meta里面 description和mage属性都设置了,页面审查元素也是有值得。
现在的说法都是2021年9月17日微信宣布开放外部网址链接,开放全域名访问后对平台链接进行了显示限制,对链接的进入场景做了判断,从公众号、我的收藏、分享SDK里进行分享的都是是正常的卡片形式,二次分享后是普通链接,不显示描述和缩略图。
那时至今日,2022年6月11日了,官方还没有对应的说明和处理方式吗?不管是公众号还是我的收藏,这些都是社区的开发自己摸索出来的,请问下各位大佬,官方有没有对应的说明?现在有解决办法了吗?
你好,若是点击的是链接形式分享也会是链接形式,若点击的是卡片形式,分享也是卡片形式
请问一下,具体怎么做才能显示呢,
同文,从APP分享到微信正常,从微信再次分享,之前分享的描述和图片都显示不了了,显示的标题也变成了分享页面的title
您好,请问问题解决了没,我也遇到相同的问题了。
这里好像有点小问题,应该按照官网的来。
http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
&符号连接timestamp
大佬,我和你的应用场景是一样的,但是我现在一直再报 config:invalid url domain 微信公众平台里面的js安全域名什么的都已经配了,不知道为啥会报这个错,麻烦大佬指点一下
已经解决了,二次分享可以显示摘要和图片了。
下面我把Java代码和HTML页面的JS代码贴出来
Java里面用的EhCache做的缓存,SpringBoot项目,微信公众号的配置在applicaiton.properties里面
@Value("${weixin.public.appid}") private String GAPPID; @Value("${weixin.public.appSecret}") private String GSECRET; @Value("${weixin.public.granttype}") private String GRANTTYPE; @Resource(name = CacheConstants.WECHAT_TICKET) private Ehcache ticketCache; @Resource(name = CacheConstants.WECHAT_TOKEN) private Ehcache tokenCache; /** * 获取JSSDK签名 * * @param request * @param pageUrl 页面路径 * @return * @throws Exception */ @RequestMapping("/getWxJsSign") public ResponseInfo getWxJsSign(HttpServletRequest request, String pageUrl) throws Exception { logger.info("WxJsPageUrl:{}", pageUrl); String wechatTicket = null; String wechatToken = null; Map signMap = new HashMap<>(); CmsSite site = SystemContextUtils.getSite(request); /***查看服务器是否存在缓存票据7200S*/ List tikeys = ticketCache.getKeys(); if (!CollectionUtils.isEmpty(tikeys)) { Element element; JSONObject json; for (Integer it : tikeys) { element = ticketCache.get(it); if (element != null) { json = JSONObject.parseObject(String.valueOf(element.getObjectValue())); wechatTicket = json.getString(CacheConstants.WECHAT_TICKET); } } } /***如果服务器有缓存的票据,则直接根据票据和URL获取签名*/ if (!StringUtils.isEmpty(wechatTicket)) { signMap = urlBySign(wechatTicket, pageUrl); logger.info("wechatTicket:{}", wechatTicket); logger.info("signMap:{}", signMap); return new ResponseInfo(signMap); } /***如果不存在有效票据,则查看服务器是否存在有效token 7200S*/ List tokeys = tokenCache.getKeys(); if (!CollectionUtils.isEmpty(tokeys)) { Element element; JSONObject json; for (Integer it : tokeys) { element = tokenCache.get(it); if (element != null) { json = JSONObject.parseObject(String.valueOf(element.getObjectValue())); wechatToken = json.getString(CacheConstants.WECHAT_TOKEN); } } } /***如果token也失效了,则先获取token*/ if (StringUtils.isEmpty(wechatToken)) { String requestUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=" + GRANTTYPE + "&appid=" + GAPPID + "&secret=" + GSECRET; String tokenDataStr = HttpRequestUtil.httpsRequest(requestUrl, null, HttpRequestUtil.REQUEST_TYPE_GET, "UTF-8"); JSONObject tokenJson = JSONObject.parseObject(tokenDataStr); logger.info("json:{}", tokenJson); wechatToken = tokenJson.getString("access_token"); if (tokenJson == null || StringUtils.isEmpty(wechatToken)) { String errMsg = checkSign(tokenJson.getInteger("errcode")); return new ResponseInfo(500, errMsg); } JSONObject json = new JSONObject(); json.put(CacheConstants.WECHAT_TOKEN, wechatToken); /****将Token存入缓存*/ tokenCache.put(new Element(site.getId(), json)); } /***如果Token拿到了,则获取票据*/ if (!StringUtils.isEmpty(wechatToken)) { /***获取token后,获取票据Ticket,存入缓存,然后返回签名*/ String requestTicketUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + wechatToken + "&type=jsapi"; String ticketDataStr = HttpRequestUtil.httpsRequest(requestTicketUrl, null, HttpRequestUtil.REQUEST_TYPE_GET, "UTF-8"); JSONObject ticketJson = JSONObject.parseObject(ticketDataStr); wechatTicket = ticketJson.getString("ticket"); if (ticketJson == null || StringUtils.isEmpty(wechatTicket)) { String errMsg = checkSign(ticketJson.getInteger("errcode")); return new ResponseInfo(501, errMsg); } /****将Ticket存入缓存*/ JSONObject json = new JSONObject(); json.put(CacheConstants.WECHAT_TICKET, wechatTicket); ticketCache.put(new Element(site.getId(), json)); /***如果票据获取到了,则获取签名*/ signMap = urlBySign(wechatTicket, pageUrl); logger.info("wechatToken:{}", wechatToken); logger.info("wechatTicket:{}", wechatTicket); logger.info("signMap:{}", signMap); return new ResponseInfo(signMap); } /***获取Token失败,报Token异常*/ logger.info("Token失败,别说签名了!~"); logger.info("wechatToken:{}", wechatToken); logger.info("wechatTicket:{}", wechatTicket); return new ResponseInfo(SystemExceptionEnum.TOKEN_ERROR.getCode(), SystemExceptionEnum.TOKEN_ERROR.getDefaultMessage()); } /** * 根据页面路径和ticket生成签名 * * @param wechatTicket 票据 * @param pageUrl 页面地址 * @return */ public Map urlBySign(String wechatTicket, String pageUrl) { Map map = new HashMap<>(); String timestamp = Long.toString(System.currentTimeMillis() / 1000); String noncestr = UUID.randomUUID().toString(); String signature = new StringBuffer()// .append("jsapi_ticket=").append(wechatTicket)// .append("&noncestr=").append(noncestr)// .append("×tamp=").append(timestamp).append("&url=")// .append(pageUrl) .toString(); // 加密 生成签名 signature = DigestUtils.shaHex(signature); // 返回值 map.put("signature", signature); map.put("timestamp", timestamp); map.put("noncestr", noncestr); map.put("appId", GAPPID); return map; }
HTML的JS代码
function getShareConfig() { var page_title = "${content.title!}"; //标题 var page_desc = "${content.description!}";//摘要 var page_img = "${content.iconUrl!}";//封面(小图) var page_link = window.location.href //当前页路径 console.log(page_title) console.log(page_desc) console.log(page_img) console.log(page_link) var data={"pageUrl":window.location.href}; $.ajax({ type:'GET', dataType:'json', contentType:"application/json", url: "/appLogin/getWxJsSign", data:data, success: function (sign) { console.log(sign, '签名') wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。打印标识config: appId: sign.data.appId, // 必填,公众号的唯一标识 timestamp: sign.data.timestamp, // 必填,生成签名的时间戳 nonceStr: sign.data.noncestr, // 必填,生成签名的随机串 signature: sign.data.signature, // 必填,签名,见附录1 jsApiList: [ "updateTimelineShareData", "updateAppMessageShareData", 'onMenuShareTimeline', 'onMenuShareAppMessage' ] //分享给好友、朋友圈 }); console.log(123, wx) var shareParams = {} wx.error(function (res) { // config信息验证失败会执行 error 函数,如签名过期导致验证失败,具体错误信息可以打开 config 的debug模式查看,也可以在返回的 res 参数中查看,对于 SPA 可以在这里更新签名。 console.log(res, 'res') }); wx.ready(function () { console.log('vx ready', wx) shareParams = { title: page_title, // 分享标题 desc: page_desc, // 分享描述 link:page_link, imgUrl: page_img, // 分享图标 } wx.updateAppMessageShareData(shareParams) wx.updateTimelineShareData(shareParams) wx.onMenuShareAppMessage(shareParams) wx.onMenuShareTimeline(shareParams) }) } }); }