微信小程序之长按复制文本

问题背景

在微信小程序中，遇到了一个很常见的功能，就是对一段文字长按进行选取复制，没想到就这么个小功能，在微信小程序的表现和h5中竟然不一样；

解决方式

1. 利用Text标签的userSelect

将我们需要复制的文字用Text标签包裹，并配置userSelect属性；

具体代码：

<View className='test-wrapper'>

<Text>没有设置userSelect属性的Text组件</Text>

<Text userSelect>Text组件的长按复制功能</Text>

<Text>没有设置userSelect属性的Text组件</Text>

</View>

具体效果：

安卓手机：

iPhone13:

这里有一些要注意的问题：

1. 能被选中的只是设置userSelect的文本区域；即(Text组件的长按复制功能)这段文字；
2. 如果不想复制了，想要取消这个操作，按照常识，点击未选中的区域就可以了，然而并不是，只能点击设置了userSelect的文本区域的未被选中的地方才可以；也就是如下图，我选中了（的长按复制功），只有点（Text组件）或者（能）才可以取消；
3. 不推荐使用selectable属性，因为如果文本是单行的时候根本不能取消；
4. 还有就是有时候选中的东西并不准确，你向前选中，它给你向后选中；

2.利用微信的剪贴板

从第一种解决方案来看，局限性还是很大的，这种方案只能说是补救的方案，只能复制我们让用户复制的内容，通过在要复制的地方加一个复制的按钮，用户点击的时候，把这段文字复制到剪贴板；

微信的API： setClipboardData

这里就不上代码了！

我记录的时间是2022.10.11，希望以后微信小程序的官方会继续完善长按复制的功能吧！