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

自己做博客以来,很早之前分享过文章至朋友圈,那个时候分享过去的文章自动获取页面的比例适合的图片为所缩略图:

后期就很少分享至朋友圈, 近来分享文章给朋友后,发现不带缩略图和简介了,觉得这样很不好看,百度一下如何解决这个问题,发现网友贡献最多的就是在body之后加一个img标签并且设置display:none,虽然这种方法感觉不科学,但我还是尝试了一下,发现已经失效了。又百度了一些资料,才知道微信在2017年年初的时候设置了分享只能通过微信的分享接口来实现缩略图和简介的调用,网上的教程要么太深奥,要么不实用。

 

md9qhouh.png

余斗研究一番后,精简了一些代码,实现了在网站上实现微信分享接口(设置标题、缩略图、连接、描述),具体的方法如下(文章末尾有demo下载入口):

一、先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。(注:认证帐号才有分享权限

二、创建一个demo.php文件和wxshare.js文件:

demo.php

<?php
        // 步骤1.设置appid和appsecret
        $appid = 'wxff4f410748ba11027'; //此处填写绑定的微信公众号的appid
        $appsecret = '246fbf3e581efeff3b11100aa17d4c4'; //此处填写绑定的微信公众号的密钥id

        // 步骤2.生成签名的随机串
        function nonceStr($length){
                $str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJK1NGJBQRSTUVWXYZ';//随即串,62个字符
                $strlen = 62;
                while($length > $strlen){
                $str .= $str;
                $strlen += 62;
              
### 实现微信分享朋友圈功能 在 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、付费专栏及课程。

余额充值