构建你的微信分享功能：轻松集成，迅速生效！

2024-01-04 01:34:24

前言：搭建微信分享舞台

随着互联网的快速发展，分享功能已成为众多网络平台的必备利器。在微信公众号的舞台上，分享功能更是扮演着重要的角色，能够让内容在各个社交媒体上流传，实现信息的广泛传播。

在实际开发中，需要将微信分享功能集成到具体的项目中。我最近就面临着这样的任务：将自用的微信公众号微信分享模块从 PHP 修改为 Node.js 的版本。虽然这是一个很小的功能，但为了未来继续开发公众号并做扩展准备，我还是选择了 Egg 框架。

这篇文章主要介绍这个项目，不涉及 Egg 的原理。我不打算深入探讨为什么不直接使用 Koa，而希望专注于分享功能的实现。

一、Egg 简介：简约而强大

Egg 框架是一个基于 Koa 2.0 的 Node.js 全栈框架，具有轻量、快速、可扩展的特点。它集成了许多强大的中间件和插件，能够满足大部分业务需求。

在 Egg 中，我们可以使用中间件来处理请求和响应，使用服务来处理业务逻辑，使用控制器来处理路由。这使得开发过程更加清晰和高效。

二、微信分享功能设计

在设计微信分享功能时，需要考虑以下几个方面：

获取微信 JSSDK 配置信息 ：需要通过微信 JSSDK 签名算法获取配置信息，以便使用微信的分享功能。
微信分享内容 ：需要指定分享的标题、、链接和缩略图等信息。
微信分享按钮 ：需要在页面中放置微信分享按钮，以便用户可以点击分享。

三、实践：使用 Egg 构建微信分享功能

接下来，我将介绍如何在 Egg 中构建微信分享功能。

1. 安装 Egg 框架

npm install -g egg-bin

2. 创建 Egg 项目

egg init my-egg-project
cd my-egg-project

3. 安装依赖

npm install --save egg-view-nunjucks
npm install --save egg-onerror

4. 配置 Egg 项目

在 config/config.default.js 中添加以下配置：

module.exports = {
  view: {
    defaultViewEngine: 'nunjucks',
  },
  onerror: {
    all(err, ctx) {
      // 在此处处理错误
    },
  },
};

5. 创建控制器

在 app/controller/home.js 中添加以下代码：

const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    await ctx.render('index.html', {
      title: '微信分享功能',
      description: '一个简单的微信分享功能示例',
      link: 'http://eggjs.org/',
      imgUrl: 'https://eggjs.org/static/home/logo.png',
    });
  }

  async getJsConfig() {
    const { ctx } = this;
    const config = await ctx.service.jssdk.getJsConfig();
    ctx.body = config;
  }
}

module.exports = HomeController;

6. 创建服务

在 app/service/jssdk.js 中添加以下代码：

const Service = require('egg').Service;

class JssdkService extends Service {
  async getJsConfig() {
    const { app } = this;
    const { ticket } = await app.redis.hget('wx_config', 'ticket');
    const url = this.ctx.request.href;
    const timestamp = Math.floor(Date.now() / 1000);
    const nonceStr = 'abcdefg';
    const signature = sha1(`jsapi_ticket=${ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`);
    return {
      appId: app.config.wx.appId,
      timestamp,
      nonceStr,
      signature,
    };
  }
}

module.exports = JssdkService;

7. 创建视图

在 app/view/index.html 中添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <meta name="description" content="<%= description %>" />
    <link rel="icon" href="<%= imgUrl %>" />
  </head>
  <body>
    <h1><%= title %></h1>
    <p><%= description %></p>
    <a href="<%= link %>" target="_blank">访问链接</a>
    <br />
    <button id="share-btn">分享</button>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script>
      const config = JSON.parse('<%= JSON.stringify(config) %>');
      wx.config(config);
      wx.ready(() => {
        wx.onMenuShareTimeline({
          title: '<%= title %>',
          link: '<%= link %>',
          imgUrl: '<%= imgUrl %>',
        });
        wx.onMenuShareAppMessage({
          title: '<%= title %>',
          desc: '<%= description %>',
          link: '<%= link %>',
          imgUrl: '<%= imgUrl %>',
        });
        document.getElementById('share-btn').addEventListener('click', () => {
          wx.shareAppMessage({
            title: '<%= title %>',
            desc: '<%= description %>',
            link: '<%= link %>',
            imgUrl: '<%= imgUrl %>',
          });
        });
      });
    </script>
  </body>
</html>