微信公众号文章开源导出工具 wechat-article-exporter 架构剖析

• authorInfo(biz: string)：获取公众号主体信息（如认证状态、原创文章数量）；
• getArticleList(fakeid: string, token: string, begin = 0,)：分页获取公众号文章列表；
• getAccountList(token: string, begin = 0,)：搜索公众号列表；
• getComment(commentId: string)：获取文章评论及回复（依赖用户提供的 credentials）。

3.1.2 关键实现分析

以 getArticleList 为例，其核心逻辑包括：

1. 构造请求参数（公众号 fakeid、分页起始位置 begin、关键词 keyword 等）；
2. 调用微信后台接口 /api/appmsgpublish，并处理跨域与身份认证；
3. 解析返回数据，提取文章列表（publish_list）并转换为统一格式；
4. 记录接口调用日志（updateAPICache），用于后续统计与故障排查；
5. 非关键词搜索结果写入缓存（updateArticleCache），优化重复请求性能。

// 关键代码片段：文章列表获取与缓存更新
export async function getArticleList(
  fakeid: string,
  token: string,
  begin = 0,
  keyword: ''
): Promise<[AppMsgEx[], boolean, number]> {
  const resp = await $fetch<AppMsgPublishResponse>('/api/appmsgpublish', {
    method: 'GET',
    query: { id: fakeid, token, begin, size: ARTICLE_LIST_PAGE_SIZE, keyword },
    retry: 0,
  })
  // 记录 API 调用日志
  await updateAPICache({
    name: 'appmsgpublish',
    account: loginAccount.value.nickname!,
    call_time: new Date().getTime(),
    is_normal: resp.base_resp.ret === 0 || resp.base_resp.ret === 200003,
    payload: { id: fakeid, begin, size: ARTICLE_LIST_PAGE_SIZE, keyword },
  })
  if (resp.base_resp.ret === 0) {
    const publish_page: PublishPage = JSON.parse(resp.publish_page)
    const publish_list = publish_page.publish_list.filter(item => !!item.publish_info)
    const isCompleted = publish_list.length === 0
    // 非关键词搜索结果写入缓存
    if (!keyword) {
      await updateArticleCache(publish_list, isCompleted, fakeid)
    }
    const articles = publish_list.flatMap(item => {
      const publish_info: PublishInfo = JSON.parse(item.publish_info)
      return publish_info.appmsgex
    })
    return [articles, isCompleted, publish_page.total_count]
  } else if (resp.base_resp.ret === 200003) {
    throw new Error('session expired') // 处理会话过期
  } else {
    throw new Error(`${resp.base_resp.ret}:${resp.base_resp.err_msg}`)
  }
}

3.2 数据存储层（store/article.ts）

存储层基于 IndexedDB 实现客户端数据缓存，减少重复请求，提升离线使用体验，核心功能包括缓存更新、查询与读取。

3.2.1 缓存设计逻辑

• 以 fakeid:aid 作为文章唯一标识（fakeid 为公众号唯一 ID，aid 为文章 ID）；
• 采用复合索引 fakeid_create_time，支持按公众号与发布时间范围查询；
• 维护公众号信息缓存（info 表），记录缓存完成状态、文章总数等元数据。

3.2.2 关键实现分析

updateArticleCache 方法负责将新获取的文章列表写入缓存，核心步骤：

1. 开启数据库事务（transaction(['article', 'info'], 'readwrite')）；
2. 遍历文章列表，通过 put 方法更新缓存（已存在则覆盖，不存在则新增）；
3. 统计新增文章数量，更新公众号信息缓存（updateInfoCache）。

// 关键代码片段：文章缓存更新
export async function updateArticleCache(
  publishList: PublishListItem[],
  completed: boolean,
  fakeid: string
) {
  const db = await openDatabase()
  const tx = db.transaction(['article', 'info'], 'readwrite')
  const articleStore = tx.objectStore('article')
  const infoStore = tx.objectStore('info')
  const keys = await getAllKeys(articleStore) // 获取现有缓存的所有 key
  let articleCount = 0
  for (const item of publishList) {
    const publish_info: PublishInfo = JSON.parse(item.publish_info)
    for (const article of publish_info.appmsgex) {
      const key = `${fakeid}:${article.aid}`
      if (!keys.includes(key)) {
        await updateArticle(articleStore, article, fakeid)
        articleCount++ // 统计新增文章数
      }
    }
  }
  // 更新公众号缓存信息
  await updateInfoCache(infoStore, {
    fakeid,
    completed,
    articles: articleCount,
    nickname: activeAccount.value?.nickname,
    round_head_img: activeAccount.value?.round_head_img,
  })
}

3.3 UI 组件层（components/）

UI 层基于 Vue 组件化思想设计，核心组件包括头部导航（Header.vue）、文章列表（ArticleList.vue）、文章项（ArticleItem.vue）等，负责用户交互与数据展示。

3.3.1 核心组件分析

• Header.vue：实现公众号搜索、账号切换、导航菜单等功能，通过 v-model 与子组件通信；
• ArticleItem.vue：展示单篇文章信息（标题、封面、发布时间等），提供'查看原文''复制链接''下载'等操作；
• BaseSearch.vue：封装搜索框组件，支持关键词输入与搜索事件触发。

3.3.2 下载功能实现

ArticleItem.vue 中的下载功能通过 downloadArticleHTML 与 packHTMLAssets 实现：

1. 调用 downloadArticleHTML 获取文章完整 HTML；
2. 通过 jszip 库打包 HTML、图片及样式文件为 ZIP；
3. 使用 file-saver 库将 ZIP 文件保存到本地。

// 关键代码片段：文章下载与打包
async function download(link: string, title: string) {
  try {
    downloading.value = true
    // 移除标题中的高亮标签
    title = title.replace(/<em>(?<content>.+?)<\/em>/g, '$<content>')
    const fullHTML = await downloadArticleHTML(link)
    const zip = await packHTMLAssets(fullHTML, title) // 打包 HTML 与资源
    const blob = await zip.generateAsync({ type: 'blob' })
    saveAs(blob, title + '.zip') // 保存文件
  } catch (e: any) {
    alert(e.message)
  } finally {
    downloading.value = false
  }
}

3.4 工具层（utils/）

工具层封装了通用功能，如时间格式化（formatTimeStamp）、HTML 资源处理（packHTMLAssets）、接口代理（proxyMpRequest）等，为其他模块提供支撑。

3.4.1 接口代理实现

server/utils/index.ts 中的 proxyMpRequest 方法解决跨域问题，核心逻辑：

1. 解析客户端 Cookie，构造微信接口请求头（Referer、Origin、User-Agent 等）；
2. 转发请求至微信后台接口，并返回响应结果；
3. 支持 GET/POST 请求，自动处理参数序列化。

// 关键代码片段：接口代理
export async function proxyMpRequest(options: RequestOptions) {
  const cookies = parseCookies(options.event)
  const cookie = Object.keys(cookies).map(key => `${key}=${cookies[key]}`).join(';')
  const fetchInit: RequestInit = {
    method: options.method,
    headers: {
      Referer: 'https://mp.weixin.qq.com/',
      Origin: 'https://mp.weixin.qq.com/',
      'User-Agent':
        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 ...',
      Cookie: options.withCredentials ? cookie : '',
    },
  }
  if (options.query) {
    options.endpoint += '?' + new URLSearchParams(options.query as Record<string, string>).toString()
  }
  return fetch(options.endpoint, fetchInit).then(resp =>
    options.parseJson ? resp.json() : resp
  )
}

四、难点分析与解决方案

4.1 微信接口认证与会话管理

难点：微信公众号后台接口需要登录状态（Cookie）与 token 验证，会话过期后需重新登录，且接口参数（如 fakeid）加密方式不透明。

解决方案：

• 通过前端 Cookie 维护登录状态，请求时自动携带认证信息；
• 接口调用失败时捕获 session expired 错误，引导用户重新登录；
• 利用公众号后台搜索功能的公开性，绕过复杂的参数加密逻辑。

4.2 文章样式 100% 还原

难点：公众号文章包含复杂的 HTML 结构、自定义样式与图片，直接导出会丢失格式或图片无法加载。

解决方案：

• 下载文章完整 HTML，保留所有样式标签与类名；
• 解析 HTML 中的图片 URL，通过代理服务下载图片并替换为本地路径；
• 使用 jszip 将 HTML、图片、样式文件打包为 ZIP，确保离线可用。

4.3 数据缓存策略优化

难点：公众号文章数量庞大，频繁请求会触发接口限制，且重复加载影响用户体验。

解决方案：

• 基于 IndexedDB 实现客户端缓存，按公众号与文章 ID 分区存储；
• 非关键词搜索结果写入缓存，关键词搜索结果不缓存（避免无效数据占用空间）；
• 通过 fakeid_create_time 复合索引，支持按时间范围快速查询历史文章。

4.4 跨平台与部署兼容性

难点：不同操作系统与浏览器对 IndexedDB、Cookie 的处理存在差异，且微信接口可能针对特定 User-Agent 限制访问。

解决方案：

• 基于 Nuxt.js 框架实现跨平台兼容，通过 Docker 支持私有化部署；
• 统一设置 User-Agent 为主流浏览器标识，规避接口限制；
• 对 IndexedDB 操作进行异常捕获，兼容不支持该特性的环境。

五、总结与展望

5.1 项目总结

wechat-article-exporter 通过模块化设计实现了微信公众号文章的批量导出功能，核心优势包括：

• 无需本地环境，在线使用便捷，同时支持私有化部署；
• 多格式导出且 HTML 格式完整还原样式，满足不同场景需求；
• 基于 IndexedDB 的缓存机制提升性能，减少接口请求；
• 开源架构便于社区贡献，快速响应微信接口变化。

5.2 不足与展望

目前项目存在以下待优化点：

• 评论与阅读量数据获取依赖用户手动提供 credentials，操作门槛较高；
• 缺乏自动化订阅功能，无法实时获取新发布文章；
• 大规模文章导出时可能出现内存占用过高问题。

未来可沿着以下方向迭代：

• 简化 credentials 获取流程，探索更便捷的认证方式；
• 实现订阅机制，支持按公众号、关键词自动下载新文章；
• 优化大数据量处理逻辑，引入分页导出与后台任务队列。

5.3 结语

wechat-article-exporter 为公众号文章的批量获取与归档提供了高效解决方案，其模块化设计与接口适配思路对同类工具开发具有借鉴意义。随着微信生态的不断变化，项目需持续迭代以应对接口更新与用户需求升级，在开源社区的支持下实现长期发展。

参考文献

1. 项目源码：wechat-article/wechat-article-exporter
2. Deno Deploy 官方文档：https://deno.com/deploy
3. IndexedDB API 参考：MDN Web Docs