html微信浏览器分享显示图片的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>demo</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <script>
        var imgUrl = "http://musicdata.baidu.com/data2/pic/115424459/115424459.jpg"; 

        var lineLink = "http://www.hougelou.com";
        var descContent = "描述"; //分享给好友的时候显示标题和描述,分享到朋友圈只显示标题
        var shareTitle = "阿猫的demo";
        var appid = "";

        var share = {
            shareFriend: function () {
                WeixinJSBridge.invoke(‘sendAppMessage‘, {
                    "appid": appid,
                    "img_url": imgUrl,
                    "img_width": "200",
                    "img_height": "200",
                    "link": lineLink,
                    "desc": descContent,
                    "title": shareTitle
                }, function (res) {
                    //_report(‘send_msg‘, res.err_msg);
                })
            },
            //分享到朋友圈
            shareTimeline: function () {
                WeixinJSBridge.invoke(‘shareTimeline‘, {//
                    "img_url": imgUrl,
                    "img_width": "200",
                    "img_height": "200",
                    "link": lineLink,
                    "desc": descContent,
                    "title": shareTitle
                }, function (res) {
                    //_report(‘timeline‘, res.err_msg);
                });
            }
        }

        document.addEventListener(‘WeixinJSBridgeReady‘, function onBridgeReady() {// 

            //发送给好友
            WeixinJSBridge.on(‘menu:share:appmessage‘, function (argv) {
                share.shareFriend();
            });
            //分享到朋友圈
            WeixinJSBridge.on(‘menu:share:timeline‘, function (argv) {
                share.shareTimeline();
            });

        }, false);

    </script>
</head>
<body>
hello,world!

</body>
</html>

以上的分享,可以为html分享的时候指定分享缩略图和标题以及描述。

分享朋友圈:只显示缩略图和标题。

分享给好友:显示缩略图、标题、描述

js里的imgUrl、lineLink、descContent、shareTitle分别代表缩略图地址、分享网页地址、分享描述文字、分享标题

以上测试是在魅族(安卓) wechat 6.0环境。

但是在IOS Iphone 4s的微信里。看到是这样的:

显然,这个显示的是网页地址和html文件的document里的title,而且没有显示缩略图。经过测试,发现iphone5s则可以显示和安卓手机一样。

————————————————————————————

那么改成这样呢:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>demo</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
</head>
<body>
hello,world!
<img src="http://musicdata.baidu.com/data2/pic/115424459/115424459.jpg" />
</body>
</html>

即什么js代码都没有,就是一个普通的html网页,其中放置一个img标签图片。

这个时候分享给好友,在魅族(安卓)和iphone4s里显示。你可以看到显示网页地址和html里document的title和html里的第一张图片(当有多个<img>的时候获取第一个,当图片是gif格式的时候iphone4s不能显示缩略图,iphone5s可以,魅族(安卓)也可以)。

时间: 2024-08-28 15:57:20

html微信浏览器分享显示图片的问题的相关文章

非微信图文网页,微信浏览器点击图片弹出自带图片浏览 (原创请勿转载)

微信图文网页点击插入的图片,会在微信的图片浏览器上浏览图片可以放大缩小,但是自己做的网页没有这个功能,下面我就来介绍一下这个功能,做出一个完美一点的demo.如果不想看过程直接到最后看demo... 教程需要:脚本编辑器(记事本或者是notepad++.DW都可以).jquery.js.微信浏览器作为测试 如下图效果 我们用到的是微信内置JsAPI的一个,这个函数在微信的开发者平台文档里我没有找到,是在网上搜到的. WeixinJSBridge.invoke('imagePreview',{  

微信网页分享标题图片自定义设置(最新)

1 前言 刚好有微信网页分享标题图片自定义设置这个需求,然后查找文档,发现有两种方案[1],但是第一种方案已经失效了,只能走第二种方案,然后根据实战配置好了,本文会写上配置中遇到的问题和解决方案,也作为记录使用,方便自己也方便他人. 2 步骤 2.1 准备工作 2.1.1 微信JS-SDK说明文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 2.1.2 附录6-DEMO页面和示例代码:在JS-SDK说明文档中

微信开发笔记:微信浏览器分享设置以及回调

在微信中分享给好友/分享到朋友圈这个功能应该是比较常用的了,就拿分享到朋友圈举例,分享出去的内容在朋友圈的展示是以一张小图片+一个简单的介绍的形式来给好友看到的,点击后才是详情,那么这么一来,这张小图片和这段小简介就直接成为了这个被分享后的内容的被点击率的重中之重.在默认情况下,这张图片会载入内容主题部分的第一张大图片,而简介只会加载一个网址.这样的展示方式还是相当不尽如人意的,那我们来看一下这一些内容,是通过什么形式来设置的,拿PHP来做一个举例: 首先我们需要有一个公众号,并且获得appid

webpack使用vue-moment-libs 在PC微信浏览器下显示空白

在chrome或者手机端,web应用显示正常,但在PC微信端不能显示,空白的. 通过测试IE9版本,也是显示空白的. 网络上说是PC微信浏览器不支持语法糖 ()=>{}  但是我看我这边是因为我使用了vue-moment-lib组件,这个组件生成的错误语句如下图 这个时候ES6的语法,IE9不支持,PC端也应该是IE9的内核. 最终解决:后来我是因为把moment改为了dayjs,所以解决了问题. 说说我是怎么定位到vue-moment-lib组件的锅的. 在IE中显示的错误是 点击保存的那行,

ie8浏览器 图片本身问题导致 无法显示图片--- 诡异现象的排查分享

引子:   前段时间 做新版2.0 首页 的时候, 总感觉 新版首页 线上 精彩回顾下的 2张图片颜色怪怪的,当时以为是图片压缩太厉害导致的,由于实在太忙就没太在意!以下 是来自线上 截图:  红色方框 我认为  那2张 怪怪的 图片,大家感受下颜色是否不一样!   问题描述:        今天,测试同学找到我,说新版首页 精彩回顾下方 2张图片 在 ie8下 图片展现不出来了!   开始排查:  通过 浏览器 查看图片 DOM结构, 代码如下:  <img data-original="

Windows10设置禁止IE浏览器显示图片的技巧

一位win10 32位系统用户反馈自己因为某些原因,必须要在电脑上使用移动数据流量上网.而此时,IE浏览器若是显示图片的话,就会造成流量消耗过快的问题.那么,在Win10上该如何设置IE浏览器禁止显示图片呢?下面,就随系统城小编来看看具体操作方法吧! 操作方法: 1.点击IE浏览器设置. 2.在设置菜单中,选择Internet选项. 3.选择高级选项卡. 4.在多媒体项目下,取消勾选365bet显示图片. 5.点击确定. 通过上述几步的简单操作,我们就能在Windows10系统下设置禁止IE浏览

Django在浏览器上显示本地图片, 外部图片

摘自:https://blog.csdn.net/lvluobo/article/details/80945257 url的配置: 如何在浏览器上显示图片呢? Django项目在浏览器上显示本地图片,本来还以为直接放在虚拟机上,开启Django项目就可以访问到了,后来发现并不是这样的简单- 步入正题,如何在浏览器上显示本地图片,关键在于url的配置: url的配置: from django.views.static import serve url(r'^book/(?P<path>.*)$'

IE浏览器中图片路径正确&lt; img ... /&gt;标签不显示图片

如下图所示,下面的html要去加载上面的jpg图片: 代码如下: <img src="luzhanshi1.jpg" alt="图片加载失败"> 使用谷歌打开这个html图片正常显示,但是使用IE浏览器就显示图片加载失败 路径肯定没有错,后来想了想,这个jpg图片原来是png格式的,我只不过强制把后缀名改了,最后我采取下面的办法解决了问题: 原文地址:https://www.cnblogs.com/luzhanshi/p/11009695.html

微信自定义分享操作步骤

微信内分享自定义图片.标题.摘要的设置及操作步骤 一.在微信内绑定站点域名 设置地址:https://mp.weixin.qq.com 位置:设置->公众号设置->功能设置->JS接口安全域名 这里填写好域名(比如 www.apple.com   比如 blog.apple.com) 按照提示下载对应文件上传到站点根目录,点"保存" (成功会有提示,没事别改着玩,有次数限制) 二.找到AppID(应用ID)和AppSecret(应用密钥) 地址:https://mp.