微信小程序实现长按复制选中文字的效果

在微信小程序中实现长按复制选中文字的效果，主要有以下几种方式：

方法一：使用组件属性实现基础复制

通过设置 text 组件的 selectable 属性为 true，可以实现长按文本后自动弹出复制选项。这种方法简单直接，适用于普通文本内容的复制需求。

<view><!-- 方法一：使用selectable属性 --><text selectable="true">这段文字可以直接长按复制</text></view>

方法二：通过API实现自定义复制

利用微信小程序的 wx.setClipboardData API 可以实现更灵活的复制功能。可以为 view 或 text 组件绑定 bindlongtap 事件（长按约500ms触发），在事件处理函数中调用此API将指定内容写入剪贴板。

  <!-- 方法二：使用API实现长按复制 --><view class="copy-area" bindlongtap="handleLongTap" data-text="这是要复制的内容">长按我复制自定义内容</view>

Page({data: {richText: [{name: 'div',attrs: { style: 'color: red;' },children: [{ type: 'text', text: '这是富文本内容' }]}]},handleLongTap: function(e) {const text = e.currentTarget.dataset.text;wx.setClipboardData({data: text,success: (res) => {wx.showToast({title: '复制成功',icon: 'success'});},fail: (err) => {console.error('复制失败:', err);}});}
});

方法三：富文本内容的复制处理

对于富文本内容，rich-text 组件本身不支持直接复制。一种解决方案是使用正则表达式将富文本转换为纯文本，然后借助 text 组件的 selectable 属性实现长按复制。另一种方法是设置 rich-text 组件的 selectable 属性为 true，并结合 user-select 样式属性。

  <!-- 富文本内容复制 --><rich-text selectable="true" style="user-select: text" nodes="{{richText}}"></rich-text>

使用外部组件库
对于更复杂的选择复制需求，例如聊天对话框中的复制场景，可以考虑引入 @miniprogram-component-plus/select-text 组件库。该组件提供两种模式：长按出现选区（类似浏览器默认效果）或长按出现复制按钮。

页面结构文件定义了三种复制方式：基础selectable属性、API长按复制和富文本复制
逻辑处理文件实现了长按事件监听和剪贴板API调用
样式文件为复制区域提供了视觉反馈效果
在实际开发中，可根据具体需求选择合适的实现方式，普通文本推荐使用selectable属性，需要自定义复制内容时使用API方式，富文本内容则需要额外的处理步骤