微信转发或分享朋友圈带缩略图、标题和描述的实现方法

问题描述:

  1. 微信公众号中(页面均用vue),分享出去的页面,二次分享不能获取缩略和描述;

APP内嵌的H5页面(有用vue写的页面,也有jsp页面),分享给好友或朋友圈,二次分享不能获取缩略和描述;

å¾ç

 

nitj9bsl.png

问题思考:
百度总结,发现网友贡献最多的就是在body之后加一个img标签并且设置display:none,虽然这种方法感觉不科学,但我还是尝试了一下,发现在微信6.5.5版本之后已经失效了。分享只能通过设置微信的分享接口来实现缩略图和简介的调用,接通jssdk。
不管是微信公众号中分享的内容 还是 普通的H5页面 都需要微信签名验证的。

解决方案
1.在jsp页面中

页面引入
 

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/js/common/shareJssdk.js"></script>

shareJssdk.js内容为:

$(function(){
    var url = encodeURIComponent(location.href.split('#')[0]);
    //分享
    
### 实现微信分享朋友圈功能 在 UniApp 中实现微信分享朋友圈的功能主要依赖于 `onShareTimeline` `onShareAppMessage` 方法。通过这两个 API 可以轻松地为应用中的所有页面添加分享朋友圈以及发送给朋友的功能。 #### 配置教程 为了使整个应用程序支持分享功能,可以在项目的公共组件全局事件处理文件中统一设置分享逻辑[^1]: ```javascript // common.js 者 main.js 文件内定义通用分享配置 export default { onLaunch() { this.$once('hook:beforeCreate', function () { const pages = getCurrentPages(); pages.forEach(page => { page.onShareTimeline = function () { return { title: '自定义分享标题', path: '/pages/index/index?query=参数' } }; page.onShareAppMessage = function (options) { if (options.from === 'button') { // 来源于按钮触发 console.log(options.target); } else { // 来源于顶部转发按钮 console.log(options.target); } return { title: '自定义分享标题', path: '/pages/index/index?query=参数', imageUrl: 'https://example.com/image.png' // 自定义图片链接 } }; }); }); } } ``` 上述代码片段展示了如何利用生命周期钩子函数来确保当任何新页面被创建时都会自动注册相应的分享行为。对于每一个页面实例而言,`onShareTimeline` 定义了该页面用于分享朋友圈的信息;而 `onShareAppMessage` 则涵盖了两种场景下的消息分享——即点击右上角菜单项是特定按钮触发的分享操作。 #### 使用方法说明 - **title**: 设置分享卡片显示的文字描述; - **imageUrl** *(可选)* : 提供一张代表性的缩略图作为预览图像(仅限 `onShareAppMessage`),这有助于提高用户体验并吸引更多的关注。 完成以上步骤之后,在开发环境中可以通过连接微信开发者工具来进行测试验证效果[^2]。一旦确认无误,则可以正式上线发布有完善社交互动特性的小程序版本。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值