开发vscode插件「Markdown Publisher 博文多平台一键发布客户端」之简书实现篇

哈喽，大家好！我是「励志前端小黑哥」，我带着最新发布的文章又来了！

老规矩，小手动起来~点赞关注不迷路！

上篇文章，咱们的插件已经发布1.0版本了，支持了csdn的一键发文。这篇文章，我们就来实现一下简书一键发文的核心逻辑。

感兴趣的去vscode插件库搜索markdown publisher，就可以安装了！

本插件使用的视频效果：

视频-插件使用效果

需求回顾

此插件的大致需求是：一键发布vscode保存的markdown文件到CSDN、知乎、掘进等三方平台。

插件的详细需求分析，请参考我的另一篇文章《基于vscode的markdown文章一键发布客户端 - 需求梳理》。

话不多说，开干！

界面流程分析

因为技术选型是puppeteer，实质上就是一个浏览器，平常你怎么用的，你就调用它怎么操作。

首先，我们分析一下，要在简书发布一篇文章需要经过的步骤，这里就用图例的形式展示给大家吧！

第一步，打开浏览器，跳转到https://jianshu.com，这一步是浏览器的初始化阶段

第二步，登录流程：

第三步，打开文本编辑器：

第四步，输入标题、输入内容、点击保存：

简单的几个步骤，一篇简书文章就保存好了，这几步非常关键，后面都会用到。

有了这几步，咱么就可以对应的写一下入口函数了！

代码实现

/**
 * 发布文章的入口函数
 */
 export async function startSync() {
    // 初始化
    await pageInit();
    // 登录
    await loginAndRedirect();
    // 点击新建文章
    await page.click(CONSTANTS.SELECTOR_BTN_NEW_ARTICLE);
    await sleep(1);
    // 构造数据
    const mdTextToEditor = await contentCreator();
    // 输入
    await inputResult(mdTextToEditor)
    // 保存
    const url = await saveArticle();
    // 结束
    await pageExit();
}

可以看到，代码里的步骤，与我们上一小节文章内的步骤，基本是一模一样的，每一步都对应一个处理函数。

通过一步步的拆分，咱们把整个流程分解为了一个个小小的函数。

Tips：这一步在软件开发过程中叫接口设计，其实不止是后端开发才有接口设计，前端开发过程中也是需要的！

后面的流程，基本就跟CSDN的实现逻辑一模一样了，只需要一步步的实现每一个小函数即可。

请移步至CSDN的实现逻辑进行查看：开发vscode插件「markdown文章一键发布」之CSDN实现篇

问题与优化

核心代码倒是很简单，不过本人在开发过程中也做了很多的优化。这些优化的代码并不是本文的重点，这里就不一一贴出来了。

这些优化仅罗列在此，需要的朋友可以在本篇文章留言，本人必将一一回复！

• puppeteer如何防止csdn的自动化检测
• puppeteer如何存储上一次的登录状态
• puppeteer如何设置UserAgent
• puppeteer如何设置代理，并输入秘钥
• puppeteer如何防止界面弹窗
• puppeteer如何上传图片
• markdown文档如何处理
• …

这些优化问题，如果你也遇到了，欢迎留言或者给我发私信，很乐意给你解答！

结语

这篇文章，介绍了简书的登录和发文步骤，使用函数的形式对每个步骤进行了细分，具体实现细节与CSDN一键发文一致，开发过程中遇到的优化点，欢迎大家留言私信！

励志前端小黑哥，全网唯一账号！
关注我，带你了解更多前端知识！