Next.js 集成微信分享及解决 280 字限制问题

前言

微信分享已成为许多网站必备的功能，但在 Next.js 等前端框架中，如何实现微信分享功能却是一大难题。本文将介绍如何在 Next.js 中集成微信分享，并解决微信分享中的 280 字限制问题。

步骤一：获取微信分享配置

首先，我们需要在微信公众平台获取微信分享所需的配置信息。在公众平台中，我们需要填写“JS接口安全域名”和“授权域名”，并在服务器端生成签名。下面是一个简化的示例代码：

// www.javascriptcn.com code example
const token = 'your_token';
const ticket = await getTicket(token); // 获取jsapi_ticket
const timestamp = Math.floor(new Date().getTime() / 1000);
const nonceStr = Math.random().toString(36).substr(2, 15);
const url = req.headers.referer; // 页面的url
const signature = sha1(`jsapi_ticket=${ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`);

// 返回微信分享所需的配置信息
return {
  appId: 'your_appId',
  timestamp,
  nonceStr,
  signature,
};

步骤二：使用微信分享API

在获取到微信分享配置之后，我们需要使用微信分享API将其应用到网站中。在 Next.js 中，可以使用 next/head 组件添加如下代码：

// www.javascriptcn.com code example
import Head from 'next/head';

const Layout = ({ children, title = 'Next App', description = 'Default description' }) => (
  <div>
    <Head>
      <meta charSet="utf-8" />
      <title>{title}</title>
      <meta name="description" content={description} />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="theme-color" content="#4285f4" />

      {/* 微信分享相关 */}
      <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
      <script dangerouslySetInnerHTML={{ __html: `
        window.wx.config({
          debug: false,
          appId: '${appId}',
          timestamp: ${timestamp},
          nonceStr: '${nonceStr}',
          signature: '${signature}',
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],
        });
      `}} />
    </Head>
    {children}
    <Footer />
  </div>
);

上面代码中最后一段是关键代码，其中我们调用了 window.wx.config 方法，将微信分享配置信息传入。此处需要注意，jsApiList 中必须包含 updateAppMessageShareData 和 updateTimelineShareData 两个方法，分别用于分享给好友和分享到朋友圈。

步骤三：解决 280 字限制问题

微信分享的一个限制是，无法分享超过 280 个字的内容。在 Next.js 中，可以通过在 meta 标签中添加 property="og:description" 来解决此问题。示例代码如下：

// www.javascriptcn.com code example
const Layout = ({ children, title = 'Next App', description = 'Default description' }) => (
  <div>
    <Head>
      {/* 微信分享相关 */}
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
    </Head>
    {children}
    <Footer />
  </div>
);

当我们分享页面时，微信将会优先读取 property="og:description" 中的内容，而忽略页面中其它超出 280 个字的内容。

结语

通过以上步骤，我们已经可以在 Next.js 中成功集成微信分享，并解决微信分享中的 280 字限制问题。希望本文能为需要在 Next.js 中实现微信分享功能的前端开发者提供一些指导和参考。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67832111935627c9002a8406