微信自定义分享实现：从零开始

2024-02-23 14:30:31

正文

一、实现效果

在介绍具体实现步骤前，让我们先了解一下微信自定义分享的最终效果。用户在访问页面时，可以通过点击按钮或链接触发分享操作，此时会弹出一个分享菜单，其中包含了标题、和缩略图。当用户选择分享到朋友圈或其他平台时，这些信息就会被自动填充，从而让分享内容更具吸引力和传播性。

二、遇到的问题

在实现微信自定义分享的过程中，我遇到了几个常见的问题：

需求：项目需要带参分享，进行好友拆礼盒的类似操作，需要带个参与活动的id，其实这种分享微信是不太赞成的。

为了解决这个问题，我使用了 URL 参数来传递活动 ID。当用户点击分享按钮时，我会将活动 ID 附加到分享链接中。这样，当用户通过分享链接访问页面时，活动 ID 就会被自动传递过来。
问题：在微信中分享页面时，缩略图无法正常显示。

这个问题是由服务器端配置不当引起的。为了解决这个问题，我需要在服务器端配置 CORS 跨域资源共享，以便微信能够访问缩略图资源。
问题：在朋友圈中分享页面时，标题和无法正常显示。

这个问题是由微信的审查机制引起的。为了解决这个问题，我需要对标题和描述进行审查，确保它们符合微信的规定。

三、解决方法

针对以上问题，我分别采取了以下解决方法：

解决方法：使用 URL 参数来传递活动 ID。

const shareUrl = `${window.location.href}?activityId=${activityId}`;

<button @click="share(shareUrl)">分享</button>

解决方法：在服务器端配置 CORS 跨域资源共享。

location / {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}

解决方法：对标题和描述进行审查，确保它们符合微信的规定。

const title = document.title;
const description = document.querySelector('meta[name="description"]').content;

if (title.length > 50) {
    title = title.substring(0, 50) + '...';
}

if (description.length > 100) {
    description = description.substring(0, 100) + '...';
}