uniapp - 微信H5 分享微信朋友圈展示链接，不是缩略图卡片的原因与解决方案

已于 2022-08-22 11:08:28 修改
阅读量1.9k 收藏
点赞数
分类专栏： vue js
于 2022-08-22 11:05:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37962440/article/details/126461717
版权

微信 uni-app
vue 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
js
6 篇文章 0 订阅
订阅专栏

问题：

在分享页面点了分享朋友圈，就会只展示链接

uniapp - 微信H5 分享微信朋友圈展示链接，不是缩略图卡片的原因与解决方案

前置条件 ：

1. 微信公众号已经配置完域名并且已完成 微信认证 / appId 也没有问题的情况下

原因 ：

微信开放全域名访问后出现的限制

解决办法

  • 将链接添加至公众号的自定义菜单中，从菜单进入
  • 扫描二维码进入项目中，进行分享
  • 将链接收藏到我的 - 收藏中，从收藏中点开进入分享页面
济宁、皮皮
关注
专栏目录
uni-app - H5 公众号网页分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间，给微信分享卡片设置图标、标题、描述文字等（JS-SDK 通用解决方案放心用）
王佳斌
02-11 7440
uniapp H5 微信浏览器分享到朋友圈设置分享图标，uniapp,h5微信如何分享页面，完整设置分享链接图片简介，Uniapp发布为H5端时如何实现微信分享给好友及分享到朋友圈功能，如何把手机移动端网页设置成可以分享到朋友圈？H5网页怎么分享到微信、朋友圈、QQ和微博里，手机网页实现微信分享,分享朋友圈功能，uniapp H5网站在微信浏览器中进行分享、分享朋友圈功能，uniappH5微信公众号分享设置标题描述logo图标，uniapp H5网页微信分享自定义标题内容图片，uniappH5微信分享API
uni-app 对接微信公众号分享功能
Kamikorosu的博客
05-28 3202
引用微信jssdk包 引入的方式有两种，可用npm也可直接下载js文件引入 npm install jweixin-module --save 依赖下载了之后可直接在需要掉起分享功能的页面直接配置参数: let jweixin = require('jweixin-module'); ...
uniapp - APP分享到微信，通过h5页面跳转至对应的app页面
最新发布
Jocelyn_书
08-02 1879
从app分享到微信再到微信网页跳转至app对应页面，其中需要注意的是在微信开放平台和微信公众平台的相关配置，看配置是否成功可以在微信开发者工具里测试，把debug模式打开，就可以看到对应的日志反应是否是配置成功了的。还有各个环节的传递参数，记得存取好。uni-app中使用wx-open-launch-app-CSDN博客。
分享到朋友圈没有缩略图？微信自定义标题描述及缩略图最简单完美的办法！
wutr4的博客
04-26 2341
首先看看分享到朋友圈没有缩略图的原因 微信为规范自定义分享链接功能在网页上的使用，自2017年4月25日起，JSSDK“分享到朋友圈”及“发送给朋友”接口，自定义的分享链接，其域名或路径必须与当前页面对应的公众号JS安全域名一致，否则将调用失败。自2017年4月1日起停用了以前自动获取页面第一张图的方法，对于未接入微信JSSDK或已接入但JSSDK调用失败的网页，被用户分享时，分享卡片将统一使用...
【微信H5】分享出去是链接，不是卡片的原因及解决方案
kikikiuu的博客
01-13 1万+
【微信H5】分享出去是链接，不是卡片 微信公众号已配置完域名且已完成微信认证、appid也准确无误 原因 因为这是微信开放全域名访问后出现的限制 解决方案 1.将链接添加至公众号的自定义菜单中，从公众号菜单进入分享 2.扫描二维码分享 3.将链接保存至微信收藏中，从我的收藏进入分享 其余其他地方进入分享都是链接形式 ...
如何解决微信公众号开发转发接口，分享出去是链接不是卡片
刘杨造梦的博客
05-25 1035
微信公众号已配置完域名且已完成微信认证、appid也准确无误，转发接口也是没有任何问题，但是分享出去后是链接不是卡片 原因 因为这是微信开放全域名访问后出现的限制 解决方案 1.将链接添加至公众号的自定义菜单中，从公众号菜单进入分享 2.扫描二维码分享 3.将链接保存至微信收藏中，从我的收藏进入分享 其余其他地方进入分享都是链接形式 ...
微信分享链接或网站文章到微信朋友圈，缩略图片不显示，该如何解决？
dietuo6403的博客
12-01 479
如图：分享到朋友圈的链接没有显示图片，简介变成了网址，如何让左侧那个图片显示尼？？？ 解决方法：在我们的网站网页html代码中的<body>之后(也就是网站的第一张图片)增加<imgsrc="http://singrr.com/wm/img/logo.jpg"style="visibility:hidden;height:0;width:0;"/&g...
最新微信分享网站链接带缩略图和描述的方法（附傻瓜式插件包+详细教程）
07-11
微信分享网站链接带缩略图和描述的插件包通用所有网址+详细教程 使用非常简单，修改下信息加入代码即可 压缩包附带详细教程 。 使用前提：有一个认证过的公众号
ASP 微信分享、朋友圈自定义缩略图内容
11-29
ASP 微信分享、朋友圈自定义缩略图内容。 亲测可以使用。内含实例。
前端微信分享给朋友，以及分享到朋友圈带缩略图跟描述功能
08-27
前端微信分享功能，代码不是很多，不过需要细心查看，刚开始着手一个东西，不管多陌生，但是不要害怕，就什么都好解决了。
Vue2 - 最新详细实现 H5 网页朋友圈分享转发，详解微信公众号网页分享到朋友圈功能，在微信环境下让第三方网站支持分享给朋友或朋友圈，支持将页面分享到QQ空间或手机好友（详细示例代码，注释详细）
王佳斌
06-01 3816
vue2，nuxt2，微信公众号网页，nuxt2如何实现分享网页，微信分享好友,分享朋友圈，H5公众号分享到微信朋友圈或好友，vue2 h5微信分享到微信，无法分享显示灰色解决，分享失败，无法分享转发朋友圈，标题和图标不显示，微信分享sdk，真机无法分享怎么办，怎么做微信转发分享功能，报错，出错，分享不了，部署上线无法转发，h5，移动端H5网页，微信分享，微信网页分享转发朋友圈，将网页分享转发给微信好友，微信朋友圈，微信好友，qq好友，qq空间，vue2网页分享到朋友圈，vue2网页分享转发给好友，vue公
微信分享链接或网站文章到微信朋友圈，缩略图片不显示解决【老版资料】
奇怪的接口
11-26 7626
如图：分享到朋友圈的链接没有显示图片，简介变成了网址， 如何让左侧那个图片显示尼？？？ 解决方法： 在我们的网站网页 html代码中的&lt;body&gt;之后(也就是网站的第一张图片)增加&lt;img src="http://singrr.com/wm/img/logo.jpg" style="visibility:hidden;height:0;width:0;" /&gt; 注...
app分享网页链接到微信朋友圈，二次转发后，分享卡片缩略图偶尔显示不出来的解决方法
weixin_42229667的博客
07-29 470
可能会出现分享卡片缩略图偶尔显示不出来，这个问题是偶现的，没有必现，如果点击这个图片丢失的卡片继续二次分享，就会必然出现分享小卡片图片丢失的问题。如果你点击分享的链接，快速的点击分享（页面还没加载完）这个时候是无法获取到分享图片和标题的，这个貌似无解。盲猜是微信客户端列表渲染有缓存机制，而他缓存的唯一依据就是分享的链接。当app分享一个h5网页链接到微信朋友圈后，二次分享，
uniapp H5端设置分享卡片
YiYeZhiQiuDe_yzq的博客
01-23 1788
最近遇到需要设置微信分享卡片的需求，在网上找了很久都发现相关的完整教程。自己摸索了几天才弄好，记录一下
微信浏览器h5分享卡片模式
weixin_52335582的博客
08-20 4838
微信浏览器中h5分享出去是带图片标题的卡片
h5微信分享只是链接，没有卡片
timebeign的博客
04-22 690
微信H5已成功接入，微信api以及配置项验证正常，通过手机微信里面链接打开页面进行分享，分享出去的还是链接。原因：全域名开放（即微信可访问淘宝、支付宝等友商的链接）造成的；3、公众号图文消息进入。5、公众号原文链接进入。
微信分享缩略图无法显示的解决办法
热门推荐
a10241234的专栏
04-13 2万+
首先这个问题分两种情况:  一是你停留在没有搞明白缩略图如何自定义:        即没有调用JS接口传给微信图片链接,这种情况微信会默认把你html5页面的第一页缩略图拿来当左侧的缩略图,第二种是你给的图片链接不可用或者图片尺寸不对这时左侧会显示一个灰色的链接占位图,这种情况就得去你上传的图床 或者 自己的服务器上排查了,微信推荐的图片尺寸是300*300以上,不过亲测小于或者大于这个尺寸也
uniapp开发的h5在微信以卡片的形式分享
m0_59722227的博客
11-09 1452
设置h5在微信内置浏览器分享
uni-app 中分享转发微信好友，转发链接上图片不显示问题
动感超人咸蛋黄博客
04-10 812
uni-app分享微信图片不显示
uniapp h5微信公众号分享到朋友圈代码实现
05-27
在uniapp中，可以使用微信JS-SDK来实现H5微信公众号分享到朋友圈的功能。具体代码实现如下： 1.在页面中引入微信JS-SDK： ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 2.获取微信JS-SDK权限： ```js // 通过ajax请求获取微信JS-SDK权限 uni.request({ url: 'http://yourserver.com/getWXJSSDKConfig', data: { url: location.href.split('#')[0] }, success: function (res) { let configData = res.data; wx.config({ debug: false, appId: configData.appId, timestamp: configData.timestamp, nonceStr: configData.nonceStr, signature: configData.signature, jsApiList: ['onMenuShareTimeline'] }); } }); ``` 3.在wx.ready回调函数中设置分享内容： ```js wx.ready(function () { wx.onMenuShareTimeline({ title: '分享标题', link: 'http://www.example.com', imgUrl: 'http://www.example.com/image.jpg', success: function () { console.log('分享成功'); }, cancel: function () { console.log('用户取消分享'); } }); }); ``` 其中，onMenuShareTimeline为分享到朋友圈的方法，title为分享标题，link为分享链接，imgUrl为分享图片链接。成功和取消的回调函数可以根据自己的需求进行修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值