在 微信 里向朋友分享网页链接时，
标题、描述 和 图片，
这三者前端 能否 不借助其他工具自行设置呢？
具体 如何在页面里写代码控制该页面在微信里被分享时显示的相关信息呢？

如下图，在微信分享的过程

实现过程

1.标题

链接信息里，标题会自动获取该链接页面 <head> 标签内的 title 信息<title>文章标题/页面标题</title>

2.图片

链接信息右侧有一张缩略图，微信的机制是获取页面中第一张 300x300 以上的 可见图片

图片大小在 300px x 300px 以上，为了效果好，最好是正方形
图片本身要是 可见 的，但是如果不想在页面中展示这张图片，可以在图片外层包一个 div，将其设置为隐藏。<div style="display:none;"><img src="share.png">
</div>

3.描述

decs 不能
微信不能

微信JS-SDK可以自定义

注意事项：

wx.config 那里，需要一些敏感信息，由后端人员来计算输出最好，因此整个项目代码都是放在后端那里的；我将下面的代码放在 html 中，这样的话后端可以在里面写代码，下面的 {$variable} 都是后端的变量；分享图标或者说分享链接要展示的图片地址，我使用相对地址不行，所以使用了绝对地址；如果 wx.config 信息啥的都没问题，但是浏览器 console 里没有 log 信息，可以尝试清空浏览器缓存。

<!-- index.html --><!-- 微信 JS-SDK -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '{$appId}', // 必填，公众号的唯一标识timestamp: {$timestamp}, // 必填，生成签名的时间戳nonceStr: '{$nonceStr}', // 必填，生成签名的随机串signature: '{$signature}', // 必填，签名，见附录1jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});wx.ready(function() {// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。console.log('weixin 验证成功');// 分享到朋友圈wx.onMenuShareTimeline({title: '标题', // 分享标题link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标success: function() {// 用户确认分享后执行的回调函数},cancel: function() {// 用户取消分享后执行的回调函数}});// 分享给朋友wx.onMenuShareAppMessage({title: '标题', // 分享标题desc: '描述', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标type: '', // 分享类型,music、video或link，不填默认为linkdataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空success: function() {// 用户确认分享后执行的回调函数},cancel: function() {// 用户取消分享后执行的回调函数}});// 分享到QQwx.onMenuShareQQ({title: '标题', // 分享标题desc: '描述', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标success: function() {// 用户确认分享后执行的回调函数},cancel: function() {// 用户取消分享后执行的回调函数}});// 分享到腾讯微博wx.onMenuShareWeibo({title: '标题', // 分享标题desc: '描述', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标success: function() {// 用户确认分享后执行的回调函数},cancel: function() {// 用户取消分享后执行的回调函数}});// 分享到QQ空间wx.onMenuShareQZone({title: '标题', // 分享标题desc: '描述', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标success: function() {// 用户确认分享后执行的回调函数},cancel: function() {// 用户取消分享后执行的回调函数}});
});wx.error(function(res) {// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。console.log('weixin 验证失败');console.log(res);
});
</script>

QQ中实现

<meta itemprop="name" content="这是分享的标题"/>
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
<meta name="description" itemprop="description" content="这是要分享的内容" />

meta标签分享

在<head></head>标签内加上一个meta标签<meta name="sharecontent" data-msg-img="你的缩略图地址" data-msg-title="你的标题" data-msg-content="你的简介" data-msg-callBack="" data-line-img="你的缩略图地址" data-line-title="你的标题" data-line-callBack=""/>interface TKDProps {title?: string;keywords?: string;description?: string;share?: {img?: string;title?: string;content?: string;callBack?: string;};
}<Helmet>{title && <title>{title}</title>}{keywords && (<meta name="keywords" content={keywords.replace(/[，、]/g, ',')} />)}{description && <meta name="description" content={description} />}<metaname="sharecontent"data-msg-img={shareImg}data-msg-title={shareTitle}data-msg-content={shareContent}data-msg-callback={shareCallBack}data-line-img={shareImg}data-line-title={shareTitle}data-line-callback={shareCallBack}/></Helmet>

网页链接分享到微信里的海报制作相关推荐

网页链接分享到微信朋友圈带图标和摘要的完美解决方法
先看效果: 我不喜欢回形针. 以前我仅仅把网页开始的地方放一个不可见的图片,后来发现没有效果. 现在我们开始: 原料:GetwxLink 微信公众号: .步骤一:绑定域名先登录微信公众平台进入&qu ...
【解决方案】微信网页链接分享自定义
一.需求描述如图,图1是其它游戏分享链接的显示效果(前提是在微信中打开并分享出去),图2是我们游戏页面(同样在微信中打开并分享出去)分享链接的显示效果. 要达到图1的自定义文案与图标的效果,经研究与 ...
微信内置浏览器屏蔽网页链接怎么办，微信跳转外部浏览器的实现教程
分享链接被微信屏蔽导致无法正常打开的情况想必看到该文章的你肯定已经遇到这个问题了,其实屏幕前的朋友也知道要怎么解决,无奈只是不知道如何实现,下面我就给大家细说一下微信跳转外部浏览器功能的实现过程. 功 ...
关于网页链接分享朋友圈更换title 文字方法
 <head> <meta charset="UTF-8&q ...
怎样把本地html传到网上,如何制作自己的网页链接？教你怎么把自己制作的网站发布到网上？...
如何制作自己的网页链接?教你怎么把自己制作的网站发布到网上?下面就来一起看看吧! 确定网页架构. 要确定我们要做的网页内容,必须确定一个框架形式. 一般比较流行,大部分网页都是. ①网站页眉+网站导航 ...
微信公众号，微信网页链接，隐藏微信分享按钮的链接
1.界面操作 (1)隐藏右上角菜单接口 wx.hideOptionMenu(); (2)显示右上角菜单接口 wx.showOptionMenu(); (3)关闭当前网页窗口接口 wx.closeWin ...
html 微信发送给朋友,H5链接分享给微信好友，显示标题、描述、缩略图
效果展示 image.png 1.公众号设置 1.1公众号需要经过认证,具有分享接口功能 image.png 1.2填写正确的域名(域名需要经过备案) image.png 1.3 保存好AppID.A ...
最新链接分享给微信好友和微信朋友圈带图标和摘要的方法
首先这一定需要使用微信jssdk,但是在你使用了微信jssdk之后,依旧分享的链接不带图标和摘要,那就看看我踩的坑吧. 前端代码我这里引入了jQuery(不用jQuery的写法的话可以不引入),然后 ...
html 复制链接功能,h5分享功能[通过复制网页链接分享]
需求为分享网页,本意查询调用浏览器分享功能.对接新浪和QQ等方法.觉低效,遂起此方. function copy_url() { var textarea= document.createElemen ...

网页链接分享到微信里的海报制作

如下图，在微信分享的过程

实现过程

1.标题

2.图片

3.描述

微信JS-SDK可以自定义

注意事项：

QQ中实现

meta标签分享

网页链接分享到微信里的海报制作相关推荐

最新文章

热门文章