微信h5分享图标没有展示

最新推荐文章于 2024-07-08 16:22:22 发布
最新推荐文章于 2024-07-08 16:22:22 发布
阅读量1.7k 收藏 1
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/comedyking/article/details/111355856
版权

 

图标的尺寸太小，在webpack打包时被压缩成base64格式的，而微信分享的图标不支持这种格式。

解决办法： 1  把图标上传到cdn上，分享的地址写 图标上传后的地址即可，或者通过接口请求图标地址也可以，这种方法也容易更换

2 把图标的大小变大

就爱喝奶茶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue的H5项目实现微信分享给好友和朋友圈自定义缩略图显示内容和图标
BigFamer的博客
05-09 3422
遇到的问题（三） 接上篇文章的项目。在做完所有的页面后，后端小伙伴初步实现了微信分享，但是分享后缩略图是酱紫的： 最初的效果缩略图图标是一个回形针，内容是页面的title，我不想要这种效果，想实现下面那种图标和内容都可以自定义的效果，还有一点，我还想自定义每个页面（因为本项目有多个页面）分享后的URL（即点击分享缩略打开指定页面）。调用微信的接口时，遇到了这么几个问题： 1、微信的签名问题：“e...
微信h5页自定义分享标题描述图标
王敬辉的博客
12-24 1067
// 微信分享 $(function(){ function initWxShare() { var ajaxurl = "";//公众号信息存储 var link = location.href.split("#")[0];//获取url替换#后面的部分hash值 var title = "这里是标题...
微信h5分享自定义标题图标无效解决方案
weixin_43776965的博客
11-29 1955
此解决方案适用于配置已经OK的，并且在微信开发工具上调试显示的分享是OK的，但是手机上设置的标题和图标无效环境。原因是一开始我给后台的url是encodeURIComponent编码的，然后我给link的链接也是编码后的，但是link的链接不应该是编码的，所以只需要给link原始的链接就OK了 ...
微信分享网页 图标不显示
热门推荐
本人很懒
11-17 1万+
微信分享网页，分享出去自己可以看到图标，但是别人那里图标不显示。Android和IOS都出现这个问题。   图片大小确认不大于32k,代码设置确认没有问题，但就是不显示。 最后找到原因：标题含有敏感词汇,我们是有红包这个词，去掉以后显示正常。 如图所示 本应该显示是一张红包图片就是下面标题改为123456时显示才是正常的：
微信H5分享外部链接，缩略图不显示
TS_144636的博客
12-02 3205
微信公众号酒酒酒搜索 “微信H5分享外部链接，缩略图不显示” 查看原文 前言：最近做了一款推广茶的APP软件，展厅、产品需要分享功能；从APP内分享到H5网页；微信内打开H5网页，点击微信内右上角三个点，可再次分享； 注意：大多数情况下，点击右上角三个点，再次分享后，缩略图不显示，需要做特殊处理。 废话结束，正文开始，以下页面是在H5页面中执行。 前置条件： 开发环境：windows 开发框架：uni-app , H5+，nativeJS 编辑器：HbuilderX 2.8.13 兼容版本：安卓，IOS已
微信分享只有链接没有图标和标题正文的问题分析
时清云的博客
05-31 4518
出现上述问题的原因是微信规则的问题1、用链接的方式打开页面 然后分享只会出现当前页面链接不会出现图文；2、通过带图标的分享打开再次分享就是带图标标题的了；3、可以用二维码或者微信菜单的方式打开，分享一切正常。
解决网站分享到微信后,ico图标消失问题
前端程序猿的博客
05-18 521
【代码】解决网站分享到微信图标消失问题。
基于vue的h5网页微信分享链接图标丢失问题解决
qq_33315564的博客
11-03 2944
基于vue的h5网页微信分享链接图标丢失问题解决微信JS-SDK说明文档怎样调用微信JS-SDK重点 对于目前的移动互联网，客户端分成了安卓、IOS和h5三大块，为了引流，安卓和ios往往会分享到微信、QQ、微博等社交工具，第一次分享时图标、标题和描述是IOS和安卓配置的，对于web前端所做的分享页无需做任何操作。 但如果我们在微信打开这个链接之后，再次分享出去，分享的描述会变成链接地址，分享的图标也不见了。 查了相关文章，有说直接再网页body标签里面直接写img标签，设置样式，然而并不行，就选择用了
HBuilder：微信h5实现音乐图标旋转播放，停止暂停
01-15
本文将详细介绍如何使用HBuilder在微信H5环境中实现音乐图标旋转播放、停止和暂停的功能。 首先，我们需要创建一个H5页面，这可以通过HBuilder的内置模板或新建空白页面来完成。在HTML结构中，我们需要一个音乐播放...
宣传微信h5.zip
01-16
"宣传微信H5.zip"这个文件集合了H5手机页面的一些常见特效，包括触屏滑动上下翻页、上浮动箭头以及旋转音乐图标播放暂停功能，这些都是提升用户体验的关键元素。 首先，触屏滑动上下翻页是H5页面中常见的滚动效果。...
JS中静态页面实现微信分享功能
10-20
小编使用ajax实现静态页面也能实现微信分享功能，今天小编给大家分享实现代码，对js静态页面微信分享功能感兴趣的朋友参考下本
微信h5游戏源码
06-02
- **响应式设计**：由于微信H5游戏要在不同尺寸的设备上运行，所以理解响应式设计原则，使游戏适应不同屏幕尺寸非常重要。 - **微信小游戏接口**：如果这些源码是专门针对微信小游戏开发的，那么可能涉及微信提供的...
微信小程序demo：H5UI；部分图标
03-15
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO
JiuShiWodaK的博客
06-19 1460
微信在分享第三方网站是不显示缩略图和描述的，如下图所示 要解决这个问题必须调用微信JS-SDK接口，下面讲一下如何调用接口 方法一： 第一部分 准备步骤 注册微信公众号。 通过左侧导航“开发”–“基本配置”进入。通过开发者ID及密码调用获取access_token接口时，需要设置访问来源IP为白名单。 配置JS接口安全域名。 通过左侧导航“设置”–“公众号设置”–“功能设置”进入。设置JS接口安全域名后，公众号开发者才可在该域名下调用微信开放的JS接口。 完整代码下载 https://github..
微信的踩坑之路----微信分享title和icon不显示
weixin_30530939的博客
04-09 1165
以前也做过微信的分享功能，但是那次比较顺利，一次通过~ 这次再次弄这个的时候发现了以前遗漏的坑。同时也在网上找了好多，大部分写的都是配置方面的问题，下边我也会写到。 问题一 微信js接口安全域名配置问题；如果你的url 为 http://www.demo.com/?type=1;则应该配置安全域名为www.demo.com 或者www.demo.com/; 当然微信的url为https:/...
微信js-sdk 微信自定义分享显示图片和描述不显示
sunny327的专栏
06-21 1万+
在做h5页面分享时，用到了微信的自定义分享js-sdk 。 有时会不显示自定义的图片和描述。分步骤检查出现的问题： 调用config 接口的时候传入参数 debug: true 可以开启debug模式，页面会alert出错误信息。以下为常见错误及解决方法： 1.invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，仅支持80（http）和...
微信卡券
u013611033的博客
12-01 89
$(function () { function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) .
vue3 h5跳转到小程序，h5分享微信自定义标题和图标
无
10-25 1503
配置微信sdk需要的方法和组件updateAppMessageShareData、updateTimelineShareData、 wx-open-launch-weapp。这是一起非常绕闹的需求，虽说不难 ，但是一堆坑啊，我每天都在跳坑，本来这篇文章就只讲h5跳转小程序的，但是分享都一起了，那就一起讲了吧，话不多说，先上笔记。安装好之后 在需要的页面中 引入weixin-js-sdk 别人都封装了文件 我在这就不封装了 直接在需要的文件中使用 没问题了 自己再去封装。
HTML5新增的input元素类型：number、range、email、color、date等
最新发布
pan_junbiao的博客
07-08 581
HTML5 大幅度地增加与改良了 input 元素的种类，可以简单地使用这些元素来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。到目前为止，大部分浏览器都支持 input 元素的种类。对于不支持新增 input 元素的浏览器，input 元素被统一视为 text 类型。另外，HTML5 中也没有规定这些元素在浏览器中的外观形式，因此同样的 input 元素在不同的浏览器中可能会有不同的外观。下面将详细介绍这些新增的 input 元素的类型。daterange。
vue 微信H5分享 代码
05-20
以下是Vue微信H5分享的代码示例： ```javascript export default { data() { return { shareTitle: '分享标题', shareDesc: '分享描述', shareLink: window.location.href, shareImgUrl: '分享图标url' } }, mounted() { this.initWechatShare() }, methods: { initWechatShare() { // 引入微信JS-SDK const wx = require('weixin-js-sdk') const url = window.location.href.split('#')[0] const data = { url } // 向后端请求签名数据 axios.get('/api/wechat/signature', { params: data }).then(res => { if (res.data.code === 0) { const signatureData = res.data.data wx.config({ debug: false, appId: signatureData.appId, timestamp: signatureData.timestamp, nonceStr: signatureData.nonceStr, signature: signatureData.signature, jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData' ] }) wx.ready(() => { // 分享到朋友圈 wx.updateTimelineShareData({ title: this.shareTitle, // 分享标题 link: this.shareLink, // 分享链接 imgUrl: this.shareImgUrl, // 分享图标 success() { // 分享成功回调 } }) // 分享给朋友 wx.updateAppMessageShareData({ title: this.shareTitle, // 分享标题 desc: this.shareDesc, // 分享描述 link: this.shareLink, // 分享链接 imgUrl: this.shareImgUrl, // 分享图标 type: '', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success() { // 分享成功回调 } }) }) } }) } } } ``` 在以上代码中，我们使用 axios 向后端请求签名数据，获取 appId、timestamp、nonceStr 和 signature 等信息，然后使用微信 JS-SDK 进行配置和分享。分享到朋友圈使用的接口是 `wx.updateTimelineShareData`，分享给朋友使用的接口是 `wx.updateAppMessageShareData`。 注意，以上代码仅供参考，实际使用需要根据自己的情况进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值