【web前端】19.手机分享网页链接的描述，标题，图片的控制

最新推荐文章于 2023-02-13 15:08:06 发布
最新推荐文章于 2023-02-13 15:08:06 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： 【Web前端】 文章标签： qq分享 标题 图片 标题图片

（1）微信

微信中可以通过微信提供的jssdk进行配置，详细文档参考微信JS-SDK说明文档

（2）QQ

在手机qq中可以直接配置meta标签进行配置

我们在qq聊天中有时候给朋友发一个链接，我们看到的是卡片类型，在meta标签里面设置，就可以自定义卡片的文字及图片信息，如下图所示，QQ获取分享信息的规则在QQ开放平台里面里面有具体说明：腾讯移动WEB开发平台，文档说可以通过js配置，但是引入jssdk以后未配置成功，提示当前环境无法使用通用API，暂时可以通过mete标签配置成功。

注意：

（1）如果是在公司内网的情况下，分享出去的内容或者转发出去的链接，文字图片就会有问题，有可能不是卡片的形式，这个有可能是腾讯内部对网络的限制。

（2）缓存：缓存也会影响效果，如果设置完以后不成功，记得清理一下缓存，url链接后面随便拼接一个参数，再重新访问一次，就能起到清理缓存的效果。

（3）图片要是http的，或者同一个域名下面的

<head>
    <title>阿坤向您发起了篮球邀请</title>
    <!-- Meta -->
    <meta charset="utf-8" />
    <meta itemprop="name" content="阿坤向您发起了篮球邀请" />
    <meta itemprop="image" content="http://club.hyrongames.com/mobile/img/sc_icon.png" />
    <meta name="keywords" content=" 〇 接受 丨 〇 同意"/>
    <meta name="description" itemprop="description"  content=" 〇 接受 丨 〇 同意"/>
</head>

 另外添加如下link标签，可以设置title标题左边的小图标

<link rel="icon" sizes="76x76" href="http://club.hyrongames.com/mobile/img/sc_icon.png">

 

Anabel Chen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信分享网页链接自定义标题，图片,文字描述
Alisane的博客
06-19 2356
我先描述一下该h5的业务场景：想实现微信中的h5页面分享给好友或者是朋友圈时有自定义的标题，描述，分享图片；而不是...如下图 前提条件： 1、请确认公众号已经认证，只有认证的公众号才具有分享相关接口权限 2、登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。(需要调用微信接口的h5域名) 3、配置IP白名单，基本配置-公众号开发信息-IP白名单。(调用后台接口的域名) h5实现具体步骤如下：（只有前端部分，别问为啥，因为后端我不会···泪目） 1.页面引入JS-.
【H5页面分享框的标题和描述】
最新发布
Min_Fox的博客
12-26 1117
在H5 项目中，页面通常在浏览器或者微信,QQ中打开，经常会分享给自己的好友，此时用户就会看到当前网站的分享链接内容，如果不去编辑链接内容，用户将看到张空白的分享链接，不利于用户的观看，因为不利于网站的传播。下面我们来了解一下property=og的用途。property=og 标签是一种开放内容协议（Open Graph Protocol）的标签，它可以让网页成为一个“富媒体对象”，并被其他社会化网站如Facebook、百度、谷歌等引用和展示。
JS_初始化页面属性
Knight__D
09-28 1321
! function() { var a = "@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-w
微信自定义网页分享链接（可自定义链接 图片 内容介绍）
weixin_33735077的博客
05-23 879
一、需求描述如图，图1是其它游戏分享链接的显示效果（前提是在微信中打开并分享出去），图2是我们游戏页面（同样在微信中打开并分享出去）分享链接的显示效果。要达到图1的自定义文案与图标的效果，经研究与各种尝试，得到的最佳解决方案为采用微信提供的JS-SDK，微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。PS: 不懂技术的朋友可以前往 ：http:/...
前端分享链接标题、描述和缩略图实现
web_long的博客
02-13 1105
分享链接缩略图实现
微信分享第三方连接（H5页面）自定义缩略图、标题、描述（显示分享框，而不是链接）（微信JS-SDK）
qq_17627195的博客
09-09 1万+
现在微信不支持自定义按钮分享组件（也就是说不能点击某个按钮分享），只能通过微信右上角的三个小点，点击后选择分享给朋友，朋友圈等。当前从企业微信分享到微信好友和微信朋友圈是有问题的，一些手机（有些是因为app版本，企微版本4.0.10版本就不可以）对应设置的信息（标题、描述、缩略图）不会显示。当前微信JS-SDK版本是，企微的是（两个是同一个，只是版本不同）
web前端之HTML语言基础教程共19页.rar
09-29
HTML（HyperText Markup Language）是Web前端开发的基础，它是一种用于创建网页的标准标记语言。本教程将深入浅出地介绍HTML的基本概念、语法结构以及实际应用，帮助初学者快速掌握HTML语言的核心知识。 HTML的全称...
19web_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip
08-03
标题中的“19web_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip”表明这是一个包含HTML、CSS和JavaScript技术的网站模板，适用于手机和电脑，具有自适应布局的特性。描述部分与标题...
Web前端知识点总结.pdf
11-16
`描述">`提供网页内容的描述；`; charset=utf-8">`定义文档类型和字符编码。 【CSS 知识点】 CSS（Cascading Style Sheets）用于美化和布局HTML元素。CSS通过选择器来指定要应用样式的HTML标签，常见的选择器包括...
WEB前端开发技术PPT课件.rar
07-08
首先，我们从【标题】和【描述】可以推断出，这个压缩包包含了一套关于WEB前端开发的PPT教学资源。这些课件将帮助我们系统地理解和掌握这一领域的核心概念和技术。 1. **HTML概述与HTML文件**（第1讲）：HTML...
手机端网页分享至微信朋友圈
04-12
github上的资源,NativeShare 是一个整合了各大移动端浏览器调用原生分享的插件！！！
《web前端开发基础》作业考核试题.pdf
03-05
Web前端开发基础是网页制作的重要领域，涉及到HTML、CSS、JavaScript等关键技术。下面将详细解析题目中的知识点： 1. **浮动元素与父元素高度塌陷**：当元素使用`float`属性（如`float:left`或`float:right`）时，...
基于静态URL的微信分享自定义缩略图及标题和摘要
baozhengw的专栏
07-14 1万+
本文介绍如何在静态页中实现微信分享自定义缩略图和摘要、标题的功能。相信对大家会有比较大的帮助。
微信分享第三方网页链接自定义标题、描述、图片
jomante的博客
04-08 1万+
前言 我们在微信给朋友分享一些网站的时候，如果直接从浏览器复制网页地址，通常是这样的效果：只单纯显示一个链接。 或者是在微信打开网页后点击分享按钮，会显示类似这样的效果： 当我们想要做网站推广时，希望显示的内容更丰富一点，能否显示一些描述和图片呢，就像这样？ 当然可以，让我们来看看它的制作方法吧。 一、准备工作 （一）一个已备案的网站 （二）一个已认证企业公众号 如果公众号未经认证，是没有分享权限的，我们可以在开发 -> 接口权限中查看公众号的分享权限是否已经开放 二、公众号设置 （一）首先
为什么微信分享的链接有的会有logo图和描述，有人分享的却没有呢？
ooppbbbbbn的博客
07-23 5098
效果对比如下： 上图我们可以看出，未开发过的链接在好友，微信群之间分享出来只能显示出标题，描述摘要显示链接，图片显示一个回形针。这样的分享展示看起来非常之不正规，用户点击欲望直线下降，更别人裂变分享了。而开发过的链接分享之后可显示完整的摘要描述，标志性的logo。不仅正规而且美观，更容易吸引人点击分享。 那我们如何开发出这类可以显示描述摘要和logo图片的分享链接呢？ 1，微信分享卡片工具生成。 如果我们的分享方式只是在好友之间和微信群转发分享，不需要点击链接进入之后点击...
nuxt项目中设置分享链接的描述及图标
程展威的博客
03-24 891
如何设置分享给好友的链接中的标题、描述及图片。
微信自定义分享链接的标题、描述和图片都是怎么实现的？
Qiming789的博客
04-24 736
自定义微信链接是什么？ 自定义微信分享链接是指将一条网页链接通过微信接口生成一张卡片，并且该卡片的标题，内容和图片都可以自己编辑。如下图效果 ● 自定义网页链接示例（带标题，内容简介，缩略图） ● 未自定义的网页链接 如上图，如果不做相关处理，页面进行二次分享，用户看到的要么就是链接，要么就是没有内容介绍＋空图，上面显示的文案实际上是获取的title标签中的文案，网上查的相关例子有说明，图片如果不设置，将会自动获取浏览器渲染的第一张图片，经过个人测试，并没有实现（朋友圈同理，不做图片展示）。 解决方案
微信分享网页链接自定义图片和文字描述
热门推荐
走召爱木土的博客
05-18 3万+
今天开发需要微信分享网页链接自定义图片和文字描述,于是网上各种查找资料和各种看手册,遇到了好多坑,不过啃了半天以后终于把问题解决了,以防以后忘记,今天记录一下; 首先,由于微信已经发布了想要分享链接必须调用认证了的公众号的JSSDK接口,所以,像以前的在html页面中的head中放入图片,我试过已经不管用了,当然不是绝对的,但是我这个方法试了多好次,不能用,所以没有办法只好调接口来做这个功能了; ...
利用h5 meta 头标签设置og属性进行帖子分享图片时而有时而无
weixin_30636089的博客
12-28 522
<meta property="og:title" content="fgsfg"> <meta property="og:description" content="fgsfg"> <meta property="og:image" content="图片的绝对路径"> 　　 有部分帖子分享可以看到图片，有的还是...
web.xml springmvc的前端控制器
05-13
在传统的Java Web项目中，web.xml文件是一个重要的配置文件，它定义了Web应用程序的配置信息，包括Servlet、Filter、Listener等组件的配置以及相关的参数设置。在Spring MVC框架中，web.xml文件中的配置主要是与前端控制器有关的配置。 前端控制器是Spring MVC框架中的一个核心组件，它负责接收客户端的请求并将请求分发给相应的处理器进行处理。在web.xml文件中，需要配置一个Servlet来作为前端控制器，通常这个Servlet的名称为“DispatcherServlet”。 以下是一个web.xml文件中配置Spring MVC前端控制器的示例： ```xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0"> <display-name>SpringMVC</display-name> <!-- 配置Spring MVC前端控制器 --> <servlet> <servlet-name>dispatcherServlet</servlet-name> <servlet-class> org.springframework.web.servlet.DispatcherServlet </servlet-class> <!-- 配置Spring MVC配置文件的位置 --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/spring-mvc.xml</param-value> </init-param> <!-- 配置Servlet的启动顺序 --> <load-on-startup>1</load-on-startup> </servlet> <!-- 配置前端控制器的映射 --> <servlet-mapping> <servlet-name>dispatcherServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!-- 其他配置 --> ... </web-app> ``` 上述示例中，配置了一个名为“dispatcherServlet”的Servlet作为前端控制器，并将其映射到根路径“/”。此外，还配置了一个用于加载Spring MVC配置文件（通常为spring-mvc.xml）的init-param和一个用于指定Servlet启动顺序的load-on-startup元素。 在配置完web.xml文件后，还需要编写Spring MVC配置文件（如上述示例中的spring-mvc.xml），来定义处理器映射、视图解析器等相关配置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值