如何实现微信分享的链接可以自定义标题（缩略图、内容）

2024-04-20 16:45:27

自定义链接是什么？

自定义微信分享链接是指将一条网页链接通过微信接口生成一张卡片，并且该卡片的标题，内容和图片都可以自己编辑。如下图效果

● 自定义网页链接示例（带标题，内容简介，缩略图）

● 未自定义的网页链接

如上图，如果不做相关处理，页面进行二次分享，用户看到的要么就是链接，要么就是没有内容介绍＋空图，上面显示的文案实际上是获取的title标签中的文案，我在网上查的相关例子有说明，图片如果不设置，将会自动获取浏览器渲染的第一张图片，经过个人测试，并没有实现（朋友圈同理，不做图片展示）。

解决方案

要达到上图自定义文案与图标的效果，必须要采用微信提供的JS-SDK，微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。可参考微信JS-SDK说明文档。

具体步骤如下：

1、准备一个备案的域名和空间，绑定域名到该空间去

2、登录微信公众平台，进入“公众号设置”的功能设置里面填写js接口安全域名，这个是要填写的是你微信浏览器要打开的域名地址，不能添加IP地址。

3、引入js文件，在需要调用js接口的页面接入JS文件。

http://res.wx.qq.com/open/js/jweixin-1.2.0.js

4、通过config接口注入权限并验证配置（这一步算是整个步骤中最关键的一步，必须正确的配置信息才可以进行调用JS-SDK。

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名，见附录1jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

如果你不懂技术或者没有认证的公众号，使用wecard工具也可以实现相关的效果。

如何实现微信分享的链接可以自定义标题（缩略图、内容）相关推荐

微信分享网页链接自定义图片和文字描述
今天开发需要微信分享网页链接自定义图片和文字描述,于是网上各种查找资料和各种看手册,遇到了好多坑,不过啃了半天以后终于把问题解决了,以防以后忘记,今天记录一下; 首先,由于微信已经发布了想要分享链接必 ...
php 微信分享功能_使用php怎么实现一个微信分享朋友链接功能
使用php怎么实现一个微信分享朋友链接功能发布时间:2021-02-15 09:11:24 来源:亿速云阅读:68 作者:Leah 这篇文章给大家介绍使用php怎么实现一个微信分享朋友链接功能,内 ...
微信分享签名无效php_php实现微信分享朋友链接功能
本文为大家分享了php实现微信分享朋友链接,供大家参考,具体内容如下不是些高深知识,但是第一次做,确实费了很多的时间,终于一点一点的扣了出来,目前已经使用中. 解决这个问题,总共碰到了几次BUG,1 ...
微信分享网页链接缩略图不显示解决方法
微信分享网页链接缩略图不显示解决方法参考文章: (1)微信分享网页链接缩略图不显示解决方法 (2)https://www.cnblogs.com/68xi/p/11596254.html 备忘一下.
微信分享网站链接带缩略图和描述
前言: 首先你得有一个公众号! 没有去申请就OK了,具体申请流程这里不展开了. 效果预览: 导入js //导入官方js <script src="https://res.wx.qq.c ...
微信分享网页链接不显示小图标怎么办
我们自己做的网站在微信中属于第三方网站,第三方网站想要显示缩略图和描述需要有两个前提条件. 微信分享网页链接不显示缩略图怎么办 1.认证的公众号 2.备案的域名有了公众号和域名才能去调用微信接口,也 ...
微信分享的链接，手机打开白屏，单页面应用(Hash模式下)，实现微信分享
前言:现在将相关的产品分享至朋友圈,进行宣传,成为一种很常见的方式.本文,主要想分享一下,微信分享所遇到的坑,微信分享的链接,手机打开白屏,以及产生的原因. 前端微信分享的基本步骤: 一.绑定域名先 ...
微信分享网站链接显示缩略图和描述的方法
最近在为一个网站添加微信分享文章显示图片和描述的功能,这个功能以前了解过,但并无完全实现过,这个功能须要认证的公众号支持.现最新微信分享网站链接显示缩略图和描述的方法(附带傻瓜式代码包使用简单,在你 ...
Android微信浏览器标题,企业微信内H5网页分享微信好友ios正常安卓自定义标题、图标、未生效...
企业微信内H5网页分享微信好友ios正常安卓自定义标题.图标.未生效问题类型 API/组件名称终端类型微信版本基础库版本 Bug 'onMenuShareWeibo', 'onMenuShar ...

最新文章

热门文章