微信小程序_实现markdown支持代码复制功能

yma16

已于 2023-04-09 14:15:35 修改

阅读量3.7w

点赞数 12

CC 4.0 BY-SA版权

分类专栏：微信小程序_原生文章标签：微信小程序小程序 javascript

于 2023-04-08 17:21:41 首次发布

yma16

本文链接：https://blog.csdn.net/qq_38870145/article/details/130029118

微信小程序_原生专栏收录该内容

11 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在微信小程序中实现Markdown的代码复制功能，通过towxml渲染定位代码块，结合事件绑定和样式设置，成功实现了代码的复制到粘贴板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

⭐ 前言

大家好，我是yma16，不止前端，本文将介绍微信小程序中 markdown的代码复制功能实现。
往期微信小程序文章
小程序自定义微信昵称和头像
 小程序制作markdown博客
 小程序结合chatgpt制作聊天页面
 小程序组件传值
 小程序复制到粘贴板的功能实现

⭐ 复制代码功能实现

基于towxml渲染markdown 定位

因为是基于towxml渲染的markdown
通过渲染元素快速定位代码块 code 的位置
在这里插入图片描述
通过选择元素，可找到class 名称h2w__viewParent即为渲染代码块的元素布局。

h2w__code language-css 类名下是渲染的代码块

定位元素的代码块渲染class
在这里插入图片描述

查找样式的判断源码

通过new mardown的过程我们找到class是通过attr的class注入

在这里插入图片描述

attr注入属性用来判断是否是代码块 code

区分的标志：tag是否为code使用includes判断
e.tag.includes(‘code’)

// 代码块判断
if(e.tag.includes('code')||item.name.includes('code')||attrs.class.includes('code')){
   attrs.isCodeBlock=true
   attrs.element=e
}

复制代码样式及事件绑定

样式

<view 
wx:if="{{item.attrs.isCodeBlock}}" 
bindtap="cloneCode" 
data-code="{{item}}" 
data-attr-data="{{item.attrs.data}}" 
style="float: right;position: relative;top:-20px;user-select: none;">
复制代码
</view>

事件绑定

cloneCode(e) {
			const { code } = e.target.dataset
			const { attrs } = code
			const { element } = attrs
			const { child } = element
			let lineCount = 0
			const getCodeFormat = (array) => {
				let text = ''
				array.forEach(item => {
					if (item.tag && item.tag.includes('ul')) {
						// 多少行判断
						lineCount = item.child.length
					}
					else if (item.tag && item.tag.includes('span')) {
						// 子集的text 递归回去
						text += getCodeFormat(item.child)
					}
					else if (item.tag && item.tag.includes('br')) {
						// 换行标志
						text += '\n'
					}
					else if (item.text) {
						// 文字
						text += item.text
					}

				})
				return text
			}
			let content = getCodeFormat(child)
			wx.setClipboardData({
				data: content
			})
			wx.getClipboardData({
				success: (option) => {
					console.log(option)
				},
			})
		}