微信分享到朋友圈的链接没有图片。开发工具中正常没有报错-解决方案

橙-极纪元JJY.Cheng

已于 2023-07-14 08:41:40 修改

阅读量7k

点赞数

分类专栏：微信公众号文章标签：微信

于 2021-12-08 19:36:04 首次发布

本文链接：https://blog.csdn.net/cplvfx/article/details/121798753

版权

微信公众号专栏收录该内容

11 篇文章 2 订阅

订阅专栏

重要的话说三遍

一定要保证你写的程序调用的接口，在“微信开发工具”中正常没有报错

一定要保证你写的程序调用的接口，在“微信开发工具”中正常没有报错

一定要保证你写的程序调用的接口，在“微信开发工具”中正常没有报错

我引用的JS-SDK版本是V1.6.0

 <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

分享朋友的效果

分享朋友圈的效果

检查

1.测试页面的【标题】和【内容】不能有敏感词，否则不显示图片；如：红包，分享等；

2.测试页面的内容不丰富，测试发现，内容短也会引起不显示图片；

3.缩略图过小，这个没有测试过，不过建议最好像素大于100*100；

4.页面还没有完全加载好，点击了分享，也是不会显示缩略图的；

5.图片一定要在页面里加载下，如下代码

如果不是页面的图片，但是想在分享的时候显示出来，你需要按照下面的方式写

注意：一定要把图片放在页面的最上方，让图片可以优先加载


<img id="logo1" src="logo.jpg" width="0" height="0" />

    <script>
 var shareJsonData = {
                title: '中储粮与巴西等多国供应商签约 进口大豆840万吨', // 分享标题
                desc: '介绍：中储粮与巴西等多国供应商签约 进口大豆840万吨', // 分享描述
                link: 'http://xxx.xxx.xx/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: $("#logo1").attr("src") // 分享图标
            }
    </script>

如果是页面里正常显示的图片，可以参考文章底部的代码

程序代码检查

1.签名

2.公众号是否设置了--IP白名单

3.域名是否加入了公众号的--JS接口安全域名

4.页面里微信的JS-SDK---wx.config配置参数大小写是否和官方提供的一致

5.你用到的功能是否在wx.config的“jsApiList”参数里

6.一定要确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

7.可以对比我下面的代码

<html>
<head>
    <meta name="viewport" content="width=device-width">
    <title>中储粮与巴西等多国供应商签约 进口大豆840万吨</title> 
    <script src="/Content/js/jquery.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
    <div>
         <h1>中储粮与巴西等多国供应商签约 进口大豆840万吨</h1>
        <img id="logo1" src="http://xxx.xxx.xx/Uploads/20211022/e71da312871f4e0f880ceb085ffc7304.jpeg" alt="Alternate Text"> 
         <h1>中储粮与巴西等多国供应商签约 进口大豆840万吨</h1>
         <h1>中储粮与巴西等多国供应商签约 进口大豆840万吨</h1>
         <h1>中储粮与巴西等多国供应商签约 进口大豆840万吨</h1>
         <h1>中储粮与巴西等多国供应商签约 进口大豆840万吨</h1>
         <h1>中储粮与巴西等多国供应商签约 进口大豆840万吨</h1>
         <h1>中储粮与巴西等多国供应商签约 进口大豆840万吨</h1>
         <h1>中储粮与巴西等多国供应商签约 进口大豆840万吨</h1>
         <h1>中储粮与巴西等多国供应商签约 进口大豆840万吨</h1>
         <h1>中储粮与巴西等多国供应商签约 进口大豆840万吨</h1>
         <h1>中储粮与巴西等多国供应商签约 进口大豆840万吨</h1>
         <h1>中储粮与巴西等多国供应商签约 进口大豆840万吨</h1> 
    </div>
    <script>
         $(function () {

        wx.config({
            debug: false,
            appId:'xxxxxxxxxxxxxxx',
            timestamp:1638961770,
            nonceStr:'3a9be6xxxxxxxxxxxxx97d911',
            signature:'7a64608xxxxxxxxxxxff4fc13e5',
            jsApiList: [ 
               'updateAppMessageShareData',
               'updateTimelineShareData'
            ]
        });

        //通过ready接口处理成功验证
        wx.ready(function(){
             
            console.log("执行ready（）方法"); 
            var shareJsonData = {
                title: '中储粮与巴西等多国供应商签约 进口大豆840万吨', // 分享标题
                desc: '介绍：中储粮与巴西等多国供应商签约 进口大豆840万吨', // 分享描述
                link: 'http://xxx.xxx.xx/WeiXinShare/ShareFriend?id=115 ', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: $("#logo1").attr("src") // 分享图标
            }
            console.log(shareJsonData);


            //“分享给朋友”及“分享到QQ”按钮的分享内容
            wx.updateAppMessageShareData({
                title: shareJsonData.title, 
                desc: shareJsonData.desc,
                link: shareJsonData.link,
                imgUrl: shareJsonData.imgUrl,
                success: function () {}
            });

            //“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
            wx.updateTimelineShareData({
                title: shareJsonData.title,
                link: shareJsonData.link,
                imgUrl: shareJsonData.imgUrl,
                success: function () {}
            })
              
        });

        //通过error接口处理失败验证
        wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，
            //具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            console.log("res==============")
            console.log(res) 
            alert(res);
            });
                         
        })
    </script>


</body>
</html>