您的位置：首页 > 移动开发 > 微信开发

非微信公众号web网页二次分享链接中图片丢失的问题

2016-12-02 16:55 375 查看
       对于目前的移动互联网，客户端分成了3大块，IOS、安卓和html5。为了吸引更多的用户使用IOS和安卓客户端，我们都会在手机APP上添加分享按钮，能够将APP中的内容分享到微信、QQ、微博等社交工具上面，这属于第一次分享，分享链接的标题、图标和描述是IOS和安卓设置的，对于web前端开发而言，在这里不需要做任何处理。第一次分享的截图如下所示:



       但是如果我们在微信中打开这个链接后，再次分享出去，分享链接图标变了（不同的页面，也可能没有图标），而且描述变成了链接url地址，截图如下：



       说明：网上很多文章是利用JSSDK中的wx.onMenuShareTimeline()和wx.onMenuShareAppMessage()方法初始化分享链接的，和下面我讲的方法是两码事，对于一般的html页面，使用下面的方法就可以了。       
       通过查找资料，才知道微信在非微信公众号中网页中抓取的是<body>标签中第一张尺寸大于300*300的图片作为分享链接的图标，既然如此，添加一张图片即可，代码如下：
html代码:

<body>
<div class="weixin-share-img"><img></div>       <!--微信抓取<body>中第一张尺寸大于300*300的图片作为分享链接小图标-->


不希望这样图片显示的话，设置div的样式：

.weixin-share-img {
display: none;
}

js代码:
$(".weixin-share-img img").attr('src', imagesPrefix + liveStudio.thumbnail);

需要注意的是图片一定要大于300*300，否则二次分享不正常。
对于分享链接描述的问题，网上有人说添加一个<meta name="description" content="分享链接描述测试">就可以了，但是我实际测试不行。如果有人知道方法的，请留言教教我，谢谢！

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                微信
                                                分享链接
                                                javascript
                                                html
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航