admin管理员组文章数量:1037775
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>同步滚动逻辑：
编辑框和预览框可以通过以下代码实现滚动同步：
代码语言：javascript代码运行次数：0运行复制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 文件通常是文本文件，为了限制加载过大的文件，我们动态判断文件大小，并提示用户文件过大。以下是实现代码：
代码语言：javascript代码运行次数：0运行复制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 和高级分享功能实现了这两个需求：
本地保存：
代码语言：javascript代码运行次数：0运行复制saveFile() {
try {
const fileName = `markdown_${Date.now()}.md`;
wx.setStorageSync(fileName, this.data.content);
wx.showToast({
title: '文件已保存',
});
} catch (e) {
wx.showToast({
title: '保存失败',
icon: 'none',
});
}
}分享链接：
通过小程序路径参数实现文件的分享与打开：
代码语言：javascript代码运行次数：0运行复制onShareAppMessage() {
const path = `/pages/editor/editor?filePath=${encodeURIComponent(this.data.filePath)}`;
return {
title: '查看我的 Markdown 文件',
path: path,
};
}通过以上逻辑，好友点击分享链接后可以直接在预览页面查看文件内容，进一步提升了协作效率。
技术点 4：文件选择的局限性与解决方法
微信小程序的 supportedMaterials 配置能够允许从聊天中直接打开指定类型的文件，但由于微信小程序限制，这个配置无法支持 .md 文件类型。如果需要从聊天中打开 .md 文件，只能通过文件选择页面间接实现：
文件选择页面逻辑：
代码语言：javascript代码运行次数：0运行复制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,
});
},
});
}小程序的功能与优势
通过上述技术实现，Markdown轻助手 支持以下核心功能：
- 从聊天中选择文件进行 Markdown 预览。
- 本地编辑 Markdown 文件，实时保存与加载。
- 实时预览 Markdown 格式，边写边看。
- 通过分享链接让好友快速查看文件内容。
- 性能优化：支持较大文件的加载与编辑。
需要注意的是
不建议手机上进行编辑，主要是用来预览的，一是因为电脑编辑markdown会很方便，二是因为由于微信保存文件的问题
另外本意是想在聊天中打开文件后，使用更多文件打开的方式来简化操作，但由于微信的限制暂时无法支持。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2025-01-16，如有侵权请联系 cloudcommunity@tencent 删除小程序同步微信小程序效率markdownMarkdown轻助手：边写边预览，助力你的 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>同步滚动逻辑：
编辑框和预览框可以通过以下代码实现滚动同步：
代码语言：javascript代码运行次数：0运行复制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 文件通常是文本文件，为了限制加载过大的文件，我们动态判断文件大小，并提示用户文件过大。以下是实现代码：
代码语言：javascript代码运行次数：0运行复制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 和高级分享功能实现了这两个需求：
本地保存：
代码语言：javascript代码运行次数：0运行复制saveFile() {
try {
const fileName = `markdown_${Date.now()}.md`;
wx.setStorageSync(fileName, this.data.content);
wx.showToast({
title: '文件已保存',
});
} catch (e) {
wx.showToast({
title: '保存失败',
icon: 'none',
});
}
}分享链接：
通过小程序路径参数实现文件的分享与打开：
代码语言：javascript代码运行次数：0运行复制onShareAppMessage() {
const path = `/pages/editor/editor?filePath=${encodeURIComponent(this.data.filePath)}`;
return {
title: '查看我的 Markdown 文件',
path: path,
};
}通过以上逻辑，好友点击分享链接后可以直接在预览页面查看文件内容，进一步提升了协作效率。
技术点 4：文件选择的局限性与解决方法
微信小程序的 supportedMaterials 配置能够允许从聊天中直接打开指定类型的文件，但由于微信小程序限制，这个配置无法支持 .md 文件类型。如果需要从聊天中打开 .md 文件，只能通过文件选择页面间接实现：
文件选择页面逻辑：
代码语言：javascript代码运行次数：0运行复制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,
});
},
});
}小程序的功能与优势
通过上述技术实现，Markdown轻助手 支持以下核心功能：
- 从聊天中选择文件进行 Markdown 预览。
- 本地编辑 Markdown 文件，实时保存与加载。
- 实时预览 Markdown 格式，边写边看。
- 通过分享链接让好友快速查看文件内容。
- 性能优化：支持较大文件的加载与编辑。
需要注意的是
不建议手机上进行编辑，主要是用来预览的，一是因为电脑编辑markdown会很方便，二是因为由于微信保存文件的问题
另外本意是想在聊天中打开文件后，使用更多文件打开的方式来简化操作，但由于微信的限制暂时无法支持。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2025-01-16，如有侵权请联系 cloudcommunity@tencent 删除小程序同步微信小程序效率markdown本文标签： Markdown轻助手边写边预览，助力你的 Markdown 编辑效率
版权声明：本文标题：Markdown轻助手：边写边预览，助力你的 Markdown 编辑效率 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1748250222a2275278.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论