H5网页如何在微信中自定义分享链接（可设置标题+简介+图片）

最新推荐文章于 2024-08-21 17:22:33 发布
最新推荐文章于 2024-08-21 17:22:33 发布
阅读量2.7k 收藏 2
点赞数
文章标签： javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42859627/article/details/107820149
版权

H5网页如何在微信中自定义分享链接（可设置标题+简介+图片）

  最近开发了一个微信分享的功能，发现目前很多网站上都止步于wx.config的介绍，那么接下来就由我会详细的介绍一下微信的分享的功能。

JSSDK使用步骤

  1. 绑定域名
    先登录微信公众平台进入公众号设置功能设置”里填写“JS接口安全域名”。
    备注：登录后可在“开发者中心”查看对应的接口权限。
  2. 引入JS文件
    在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
    如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。
    备注：支持使用 AMD/CMD 标准模块加载方法加载
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  1. 通过config接口注入权限验证配置
    所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
wx.config({
   
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', <
最低0.47元/天 解锁文章
破壳费事
关注
h5 修改title 微信_微信h5网页自定义分享（标题、描述、图标）
weixin_28716443的博客
02-15 1338
$this->appId =$appId;$this->appSecret =$appSecret;}publicfunction getSignPackage() {$jsapiTicket= $this->getJsApiTicket();//注意 URL 一定要动态获取，不能 hardcode.$protocol = (!empty($_SERVER['HTTPS']) &...
微信公众号h5自定义分享功能
最新发布
nothing_2020的博客
04-16 318
原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的。直接通过链接访问页面并分享时，分享的内容还是链接而不是卡片。
分享！微信自定义分享链接的标题（描述和图片）都是怎么实现的？
weixin_45595835的博客
09-02 6078
自定义微信链接是什么？ 自定义微信分享链接是指将一条网页链接通过微信接口生成一张卡片，并且该卡片的标题，内容和图片都可以自己编辑。如下图效果 ● 自定义网页链接示例（带标题，内容简介，缩略图） ● 未自定义的网页链接 如上图，如果不做相关处理，页面进行二次分享，用户看到的要么就是链接，要么就是没有内容介绍＋空图，上面显示的文案实际上是获取的title标签中...
微信扫一扫功能
qq_38354883的博客
09-14 516
let para = { opentoken : token, currUrl : location.href }; $.ajax({ type: "POST", url: url, ...
微信分享第三方连接（H5页面）自定义页面
J_Lee
04-22 3563
微信分享第三方连接（H5页面）自定义页面
H5微信自定义分享图文链接（设置标题+简介+图片）——附源码
吾行远方
07-04 3万+
1、 最近突然发现微信“卡片式”分享链接变成了如下形式： 原来的是这样的： 后来也解决了，原来是部署域名换了，微信公众号的相关配置没有改造成的。微信的其他域名都可以写多个，唯独服务器地址只能写一个，所以非常好看的“卡片式”分享图文链接变成了光秃秃的文字。 错误提示：（出现这种提示要查看公众号ip白名单、相关域名、appid等是否正确） 2、代码案例： "weixin-js-sdk": "...
h5页面生成图片分享到微信js_H5微信自定义分享链接（设置标题+简介+图片）
weixin_39673947的博客
12-28 1450
起源：最近公司在做招募广告的html5页面，然后做出来后，产品提出一个问题，需要分享出去的链接是卡片形式，内容也要自己定义，这下就难到我了，因为是第一次遇到这种需求，果断百度，然而，我就像大家一样，看都看不懂，一大堆什么微信jssdk官方文档，看得我眼花缭乱，博客上面的也大多都是php形式的解释，也不知道怎么导入进来，然而接着去了解这个卡片分享，发现官方的分享卡片，是众多在微信生态中传播的html...
H5网页实现微信分享，分享朋友圈功能（分享带图片，附源码）
热门推荐
一火的专栏
08-14 5万+
H5网页实现微信分享，分享朋友圈功能，网上的代码基本上都过期了，特基于最新的jweixin-1.6.0版本的微信分享实现，以作备忘。 1.微信分享文档及配置 1.1微信分享官网文档 地址https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3 需要注意一下，即将废弃接口，建议不要再调用了。 1.2 appid对应的公众号是否有分享接口权限 登录公众号后，接口状态为已获得，表示有权限。如下图 ..
h5页面生成图片分享到微信js_H5页面在微信端分享自定义样式（标题+简介+图片）...
weixin_42525343的博客
12-28 525
在网上搜到这文章https://www.cnblogs.com/hejun26/p/9894742.html，写的很详细，下面贴上代码，记录一下'use strict';(function() {//var vConsole = new VConsole();setJSSDK();})()var curScrollTop = 0; //记录点击时页面滚动的位置function ajaxData(m...
微信自定义分享链接信息（标题，图片和内容）实现过程详解
12-09
网页分享到微信要怎么才能自定义标题，内容和图片呢？ 需求概述 微信中可以直接转发网页链接，用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友，朋友圈，QQ等。但直接这样分享的话，用户看到的只是一条链接，没有任何的图文内容。 如下图，图1是别人分享给我的链接效果，图2是我分享给别人的效果。两种方案的用户体验我想都不用我多说了，一眼就能看的出来. 方案实现 要达到上图自定义文案与图标的效果，必须要采用微信提供的JS-SDK，微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。可参考微信JS-SDK说明文档。（如果你不懂技术或者没有认证的公众号，使
html 微信发送给朋友,H5链接分享给微信好友，显示标题、描述、缩略图
weixin_35730840的博客
06-08 2730
效果展示image.png1.公众号设置1.1公众号需要经过认证，具有分享接口功能image.png1.2填写正确的域名(域名需要经过备案)image.png1.3 保存好AppID、AppSecret、设置好ip白名单(非常重要)image.png2.php代码(需要有php环境下，放到域名目录下)2.1展示下目录结构-wxDemoimage.pngimage.png2.2index.htmlw...
H5 微信分享设置自定义title与图片
weixin_40739653的博客
04-23 1461
先引入微信js文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入...
H5微信自定义分享链接（设置标题+简介+图片）
ygunoil的博客
05-21 422
起源：最近公司在做招募广告的html5页面，然后做出来后，产品提出一个问题，需要分享出去的链接是卡片形式，内容也要自己定义，这下就难到我了，因为是第一次遇到这种需求，果断百度，然而，我就像大家一样，看都看不懂，一大堆什么微信jssdk官方文档，看得我眼花缭乱，博客上面的也大多都是php形式的解释，也不知道怎么导入进来，然而接着去了解这个卡片分享，发现官方的分享卡片，是众多在微信生态中传播的htm...
h5项目微信分享（以卡片形式，带标题和图片）
m0_67624022的博客
07-02 4642
1. 注册成为微信开放平台开发者2. 配置安全域名3. 获取Access Token和JSAPI Ticket4. 引入微信JS-SDK5. 配置微信JS-SDK(通过后端接口获取参数) 6、wx.updateAppMessageShareData
H5页面在小程序内点击右上角分享给朋友或朋友圈，以及点击链接显示图片、标题等
weixin_43907578的博客
08-21 1885
做一个H5分享页面，可以有自定义的标题、图片在微信里面转发。
如何在微信分享的网页中显示描述和图片
weixin_44542598的博客
11-23 5480
微信分享网页显示图片和标题隐藏网址 由于项目需要，需要在微信公众号中添加分享，显示图片和标题 这个分享是 需要jssdk 才能 展示图片 和 标题的 开发文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 如果是php开发 ，知道去下载sdk 里面demo 即可 具体操作如下， 如果没有绑定js 完全域名 请绑定域名，下载对应的文件，上传到服务器即可 因为获取token 还有加密 微信sdk都已经写好，可以直
H5网页如何在微信中自定义分享链接
11-07
H5网页要在微信中实现自定义分享链接，你需要利用微信的JSSDK（JavaScript SDK）。首先，需要在公众号后台配置，并获取到`APPID`和`JSAPI安全域名`。然后，在你的H5页面上，添加微信的分享按钮并执行以下步骤： 1. **引入JSSDK库**： 在HTML头部添加微信的`<script>`标签，引入微信的JSSDK文件。 ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.7.0.js" charset="utf-8"></script> ``` 2. **注册事件监听**： 在页面加载完成后，初始化微信JSSDK，通过`wx.config()`设置config信息，如timestamp、nonceStr等。 ```javascript window.onload = function() { var config = { debug: false, // 开启调试模式，显示log（默认关闭） appId: 'your_app_id', // 必填，公众号的唯一标识 timestamp: '', // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '', // 必填，签名 jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 需要使用的功能列表，比如分享朋友圈和复制链接 }; wx.config(config); // ... 其他JSSDK配置和初始化代码 }; ``` 3. **设置分享内容**： 使用`wx.ready()`回调函数，当SDK准备就绪后，可以调用相应的方法设置分享信息。 ```javascript wx.ready(function() { // 分享到朋友圈 wx.onMenuShareTimeline({ title: '自定义标题', // 分享标题 link: '自定义链接地址', // 自定义分享链接，格式通常是 http(s)://你的域/your_page.html?timestamp=当前时间戳 imgUrl: '图片URL', // 分享图标 desc: '自定义描述' // 分享描述 }); // 分享给朋友 wx.onMenuShareAppMessage({ title: '自定义标题', desc: '自定义描述', link: '自定义链接地址', imgUrl: '图片URL' }); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值