微信H5网页链接如何自定义分享标题，简介和图片

最新推荐文章于 2024-09-09 09:57:29 发布
最新推荐文章于 2024-09-09 09:57:29 发布
阅读量2.7k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45597286/article/details/100436308
版权
微信H5网页若要自定义分享内容，需使用微信JS-SDK。首先，确保拥有备案域名并配置js接口安全域名。接着，引入JS文件并使用config接口设置分享参数。不具备技术条件时，可借助工具如wecard实现相同效果。
摘要由CSDN通过智能技术生成

微信H5网页链接怎么才能自定义分享标题，简介和图片？

需求概述

微信中可以直接转发网页链接，用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友，朋友圈，QQ等。但直接这样分享的话，用户看到的只是一条链接，没有任何的图文内容。

如下图，图1是别人分享给我的链接效果，图2是我分享给别人的效果。两种方案的用户体验我想都不用我多说了，一眼就能看的出来.

 

f93dd9accdcc4f03.png

 

方案实现

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

5bfbf963b0276776.png

具体步骤：

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

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

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

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

4、通过config接口注入权

最低0.47元/天 解锁文章
weixin_45597286
关注
微信怎么定制分享链接的标题，内容和图片？
weixin_45597286的博客
09-03 3331
网页分享到微信要怎么才能自定义标题，内容和图片呢？ 需求概述 微信中可以直接转发网页链接，用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友，朋友圈，QQ等。但直接这样分享的话，用户看到的只是一条链接，没有任何的图文内容。 如下图，图1是别人分享给我的链接效果，图2是我分享给别人的效果。两种方案的用户体验我想都不用我多说了，一眼就能看的出来. 方案实现 ...
网页在微信中转发，自定义图片和文字
u014520797的专栏
06-16 2728
需求：网页在微信聊天和朋友圈中转发，自定义图片和文字，需要用到微信jssdk。 条件：1、认证的订阅号或者认证的服务号，需要有这样的接口权限 2、appid 和appsecret 3、白名单填写部署服务器的ip地址（获取accesstoken时需要） 4、填写js安全域名，域名为ICP备案域名（网页所在服务器的域名） ...
h5分享出去一会有自定义图片标题，一会没有自定义图片标题解决办法
最新发布
oneya1的博客
09-09 777
1.问题：做分享的时候发现，分享出去有时候有图片，有时候没有，尝试了很多方法都不行，最后发现如果在分享功能中不使用 wx.ready，可能会遇到以下问题：①API 调用失败：wx.ready 确保微信 JS SDK 完全加载和初始化。如果在 SDK 准备好之前调用 API 方法（如 wx.onMenuShareTimeline 或 wx.onMenuShareAppMessage），这些方法可能无法正常工作，因为 SDK 的相关功能可能尚未启用或配置。②功能无法正常实现：分享功能可能不会按预期执行。用户点击
总结之通过微信公众平台实现h5微信客户端自定义分享标题、描述和图标（前后端实现）
IManiy的博客
05-27 4864
前置动作（后端开发） 步骤一：绑定域名 js安全域名配置很重要，前端的服务的域名，非常重要！ 1、先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 JS接口安全域名需要和示例格式一模一样，不需要带http/https 备注：登录后可在“开发者中心”查看对应的接口权限。 2、需要开启开发者密钥，配置ip白名单（后端服务器ip，获取access_token等白名单不拦截）。 注意：ip白名单每天都在变化，可以参考官方获取ip方式 https://developers.weixin.
网页标题增加自己的图标&分享到微信显示图标
weixin_34409741的博客
03-13 444
2019独角兽企业重金招聘Python工程师标准>>> ...
微信公众号分享自定义图片和文字
ManNiaoQinFen的博客
01-11 866
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js。先登录微信公众平台进入**“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看对应的接口权限。
微信自定义分享链接信息（标题，图片和内容）实现过程详解
12-09
网页分享到微信要怎么才能自定义标题，内容和图片呢？ 需求概述 微信中可以直接转发网页链接，用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友，朋友圈，QQ等。但直接这样分享的话，用户...
微信分享网页时自定义标题、描述和图片
hu_Time的博客
12-10 1368
【描述】 微信分享网页时自定义标题、描述和图片 【参考链接】 微信公众平台 微信开发者文档 【实现思路/研究成果等】 微信分享网页时自定义标题、描述和图片 用微信打开一个网页，选择右上角的“发送给朋友”后，收到的消息是这样的： 而为了推广效果，我们更希望能自定义标题、描述和图片，效果如下图： 下面介绍下怎样来实现这个功能 步骤一：绑定域名 所有的JS接口只能在公众号绑定的域名下调用...
微信分享网页链接自定义标题，图片,文字描述
Alisane的博客
06-19 2463
我先描述一下该h5的业务场景：想实现微信中的h5页面分享给好友或者是朋友圈时有自定义的标题，描述，分享图片；而不是...如下图 前提条件： 1、请确认公众号已经认证，只有认证的公众号才具有分享相关接口权限 2、登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。(需要调用微信接口的h5域名) 3、配置IP白名单，基本配置-公众号开发信息-IP白名单。(调用后台接口的域名) h5实现具体步骤如下：（只有前端部分，别问为啥，因为后端我不会···泪目） 1.页面引入JS-.
H5微信自定义分享图文链接（设置标题+简介+图片）——附源码
热门推荐
吾行远方
07-04 3万+
1、 最近突然发现微信“卡片式”分享链接变成了如下形式： 原来的是这样的： 后来也解决了，原来是部署域名换了，微信公众号的相关配置没有改造成的。微信的其他域名都可以写多个，唯独服务器地址只能写一个，所以非常好看的“卡片式”分享图文链接变成了光秃秃的文字。 错误提示：（出现这种提示要查看公众号ip白名单、相关域名、appid等是否正确） 2、代码案例： "weixin-js-sdk": "...
网页分享如何展示标题，描述，缩略图
StarFishing
01-29 7914
在页面head标签中按如下设置 <meta itemprop="name" content="标题名称"/> <meta itemprop="image" content="图片地址，最好写成http形式"/> <meta property="og:image" content="图片地址，最好写成http
微信 网页转发时显示缩略图
10-22
微信 网页转发时显示缩略图微信 网页转发时显示缩略图微信 网页转发时显示缩略图
HTML链接分享微信 增加标题，描述，图标
qq_33208323的博客
08-16 1500
Html链接分享微信增加标题，描述，图标
微信自定义链接分享标题描述跳转任意链接url在线生成方法
m0_51526616的博客
11-19 2659
最近很多人问我微信如何去自定义分享出带logo和标题描述的链接，这里我把方法告诉大家，利用公众号原理代码： <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> wx.config({ debug: false, //appId: 'wx25367cbe46c663ce', appId: 'wxf7fec0...
微信js-jdk简单分享
sanlyshi's front-end road
03-18 3898
引入步骤： 1.js安全域名设置 2.引入微信接口文件  http://res.wx.qq.com/open/js/jweixin-1.0.0.js   3.通过config接口注入权限接口验证配置      wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过
uni-app - H5 公众号网页分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间，给微信分享卡片设置图标、标题、描述文字等（JS-SDK 通用解决方案放心用）
王佳斌
02-11 7640
uniapp H5 微信浏览器分享到朋友圈设置分享图标，uniapp,h5微信如何分享页面，完整设置分享链接图片简介，Uniapp发布为H5端时如何实现微信分享给好友及分享到朋友圈功能，如何把手机移动端网页设置成可以分享到朋友圈？H5网页怎么分享到微信、朋友圈、QQ和微博里，手机网页实现微信分享,分享朋友圈功能，uniapp H5网站在微信浏览器中进行分享、分享朋友圈功能，uniappH5微信公众号分享设置标题描述logo图标，uniapp H5网页微信分享自定义标题内容图片，uniappH5微信分享API
微信自定义链接分享网页（设置标题+简介+图片）
JiuShiWodaK的博客
06-23 2666
最近很多人问我微信如何去自定义分享出带logo和标题描述的链接 这里我把方法告诉大家，利用公众号原理代码： <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> wx.config({ debug: false, //appId: 'wx25367cbe46c663ce', appId: 'wxf7fec...
H5页面自定义标题、链接、描述、图片分享到微信朋友、朋友圈、QQ和QQ空间
lgj199505的博客
12-13 5542
最近在工作中遇到了一个功能，需要将我们手机端的H5页面自定义分享到微信朋友、朋友圈、QQ和QQ空间。 下面是我自己百度，然后自己亲身测试得到的一个方法；下面分享给大家，相互学习。 实现原理：H5的自定义分享需要用到微信公众平台的分享接口，也就是微信网页开发中的JSSDK,【具体的说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_W...
php的H5网页端如何分享到微信中带图片和缩略图-微信卡片式分享-微信分享链接带图片
jayguang的博客
04-19 1693
微信卡片式分享，php的H5网页端如何分享到微信中带图片和缩略图，微信分享带缩略图
html5页面微信分享,微信 js-sdk 完成 H5自定义页面分享
05-30
好的，关于微信分享的问题，我可以给你一些指导。首先，你需要在你的 HTML5 页面中引入微信 JS-SDK，然后在页面加载完成后初始化 JS-SDK。接着，你需要通过 JS-SDK 提供的接口来配置分享的内容和参数，最后调用分享接口即可完成分享。 具体步骤如下： 1. 引入微信 JS-SDK 在 HTML 页面中引入微信 JS-SDK，如下所示： ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 2. 初始化 JS-SDK 在页面加载完成后，初始化 JS-SDK。你需要先通过微信公众平台获取到你的 AppID 和 AppSecret，然后使用这些信息初始化 JS-SDK。示例代码如下： ```javascript wx.config({ debug: false, appId: 'your app id', timestamp: 'your timestamp', nonceStr: 'your nonceStr', signature: 'your signature', jsApiList: [ 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] }); ``` 其中，`appId`、`timestamp`、`nonceStr` 和 `signature` 分别是通过微信公众平台生成的，用于验证你的身份和权限的参数。`jsApiList` 是你需要使用的 JS-SDK 接口列表。 3. 配置分享内容和参数 在初始化 JS-SDK 后，你需要通过 JS-SDK 提供的接口来配置分享的内容和参数。示例代码如下： ```javascript wx.ready(function() { wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); ``` 其中，`onMenuShareAppMessage` 和 `onMenuShareTimeline` 分别是分享给好友和分享到朋友圈的接口。你需要提供分享的标题、描述、链接和缩略图等参数。 4. 调用分享接口 最后，在页面中调用分享接口即可完成分享。示例代码如下： ```javascript wx.ready(function() { wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); // 在需要分享的地方调用 shareAppMessage 和 shareTimeline 接口 // 示例代码如下 document.querySelector('#share-btn').addEventListener('click', function() { wx.shareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); document.querySelector('#share-timeline-btn').addEventListener('click', function() { wx.shareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); }); ``` 这样就完成了微信分享功能的实现。需要注意的是，由于微信的安全机制，分享的链接必须是在微信公众平台中配置过的域名，否则可能无法正常分享。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值