Markdown轻助手：边写边预览，助力你的 Markdown 编辑效率

不止于python

发布于 2025-03-17 16:09:40

5100

代码可运行

运行总次数：0

代码可运行

随着微信小程序的普及，许多工具类应用都能以轻量化的方式满足用户需求。工作中我们经常使用Markdown文件格式交流及总结，但是通过调研竟然没有一款能预览Markdown文件的小程序。于是，自己干，整了一个名为 Markdown轻助手 的微信小程序，它不仅支持 Markdown 文件的预览，还实现了文件的本地编辑、实时保存、以及通过链接分享文件等功能。本文将围绕小程序的几个技术点进行分享，帮助有需要的人处理 Markdown 文件。

技术点 1：实时编辑与预览同步

Markdown 编辑器的核心功能之一就是边写边看，为此我们实现了固定高度的编辑框和预览框，并且让它们能够同步滚动和更新内容。以下是实现的关键代码片段：

编辑与预览的同步滚动实现

在小程序中，通过 scroll-view 和 textarea 的事件绑定，我们可以监听滚动行为并同步到另一个区域：

<scroll-view class="editor-container" scroll-y bindscroll="onEditorScroll" scroll-top="{{editorScrollTop}}">
  <textarea 
    class="editor"
    bindinput="onInput"
    value="{{content}}"
    placeholder="在此输入 Markdown 内容..."
    id="editorTextarea">
  </textarea>
</scroll-view>

<scroll-view class="preview-container" scroll-y bindscroll="onPreviewScroll" scroll-top="{{previewScrollTop}}">
  <view class="markdown-preview">
    <rich-text nodes="{{previewContent}}" />
  </view>
</scroll-view>

同步滚动逻辑：

编辑框和预览框可以通过以下代码实现滚动同步：

Page({
  data: {
    content: '', // 用户输入的 Markdown 内容
    previewContent: '', // 预览内容
    editorScrollTop: 0,
    previewScrollTop: 0,
  },
  onInput(e) {
    const input = e.detail.value;
    this.setData({
      content: input,
      previewContent: this.convertMarkdown(input), // 将 Markdown 转为预览 HTML
    });
  },
  onEditorScroll(e) {
    this.setData({
      previewScrollTop: e.detail.scrollTop,
    });
  },
  onPreviewScroll(e) {
    this.setData({
      editorScrollTop: e.detail.scrollTop,
    });
  },
  convertMarkdown(content) {
    // 这里使用第三方库（如 marked.js）转换 Markdown 为 HTML
    return marked(content);
  },
});

通过这一功能，用户可以在一个页面中实时输入 Markdown 内容，并看到转为 HTML 的预览效果。

技术点 2：文件大小限制与性能优化

我们发现，用户可能会加载较大的 Markdown 文件，这可能导致小程序页面卡顿。为了避免此问题，我们通过设置文件大小限制和引入防抖机制优化了输入与渲染的性能。

限制文件大小：

Markdown 文件通常是文本文件，为了限制加载过大的文件，我们动态判断文件大小，并提示用户文件过大。以下是实现代码：

Page({
  data: {
    maxSize: 1048576, // 1MB 限制
  },
  onInput(event) {
    const input = event.detail.value;
    const byteSize = this.getByteSize(input);

    if (byteSize > this.data.maxSize) {
      wx.showToast({
        title: '文件大小超过 1MB！',
        icon: 'none',
      });
      return;
    }

    this.setData({
      content: input,
    });
  },
  getByteSize(str) {
    let size = 0;
    for (let i = 0; i < str.length; i++) {
      const charCode = str.charCodeAt(i);
      size += charCode <= 0x7f ? 1 : charCode <= 0x7ff ? 2 : charCode <= 0xffff ? 3 : 4;
    }
    return size;
  },
});

技术点 3：高级分享与本地文件保存

用户编辑完成的 Markdown 文件可以保存到本地，并通过分享路径给好友。我们使用了微信小程序的 wx.setStorageSync 和高级分享功能实现了这两个需求：

本地保存：

saveFile() {
  try {
    const fileName = `markdown_${Date.now()}.md`;
    wx.setStorageSync(fileName, this.data.content);
    wx.showToast({
      title: '文件已保存',
    });
  } catch (e) {
    wx.showToast({
      title: '保存失败',
      icon: 'none',
    });
  }
}

分享链接：

通过小程序路径参数实现文件的分享与打开：

onShareAppMessage() {
  const path = `/pages/editor/editor?filePath=${encodeURIComponent(this.data.filePath)}`;
  return {
    title: '查看我的 Markdown 文件',
    path: path,
  };
}

通过以上逻辑，好友点击分享链接后可以直接在预览页面查看文件内容，进一步提升了协作效率。

技术点 4：文件选择的局限性与解决方法

微信小程序的 supportedMaterials 配置能够允许从聊天中直接打开指定类型的文件，但由于微信小程序限制，这个配置无法支持 .md 文件类型。如果需要从聊天中打开 .md 文件，只能通过文件选择页面间接实现：

文件选择页面逻辑：

chooseFile() {
  wx.chooseMessageFile({
    count: 1,
    type: 'file',
    success: (res) => {
      const file = res.tempFiles[0];
      if (file.name.endsWith('.md')) {
        this.loadFile(file);
      } else {
        wx.showToast({
          title: '请选择 Markdown 文件',
          icon: 'none',
        });
      }
    },
  });
},
loadFile(file) {
  wx.getFileSystemManager().readFile({
    filePath: file.path,
    encoding: 'utf8',
    success: (res) => {
      this.setData({
        content: res.data,
      });
    },
  });
}