微信小程序选中文字变色，没被选中不变色

要实现微信小程序中选中文字变色的效果，可以通过使用 `rich-text` 组件来实现。具体步骤如下：

1. 将需要展示的文本放在 `rich-text` 标签中，并设置一个唯一的 `id` 属性，例如：

<rich-text id="myText" nodes="{{richTextNodes}}"></rich-text>

2. 在 `wxml` 文件中添加以下样式：

::selection {
  background-color: #FFC0CB; /* 设置选中文字的背景色 */
  color: #000; /* 设置选中文字的文本颜色 */
}

#myText {
  user-select: none; /* 禁止用户选择文本 */
}

3. 在 `js` 文件中，定义 `richTextNodes` 数据，用于渲染 `rich-text` 组件的内容。当用户选中文本时，`bindtap` 事件会触发，可以通过 `wx.createSelectorQuery()` 获取选中的文本节点，并设置 `style` 属性，以达到选中文字变色的效果，例如：

Page({
  data: {
    richTextNodes: [
      {
        type: 'text',
        text: '这是一段需要展示的文本'
      }
    ]
  },
  // 绑定 tap 事件，获取选中的文本节点
  bindtap: function() {
    wx.createSelectorQuery().select('#myText').boundingClientRect(function(rect) {
      // 获取选中文本的开始和结束位置
      let start = rect.startOffset;
      let end = rect.endOffset;
      // 获取选中文本的父节点
      let parent = rect.parentRect;
      // 获取选中文本节点的数组
      let nodes = rect.nodes;
      // 遍历选中文本节点数组，设置选中文本的样式
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.nodeType === 3) { // 文本节点
          let text = node.textContent;
          let textLength = text.length;
          let textStart = start - node.start;
          let textEnd = end - node.start;
          if (textStart < textLength && textEnd > 0) {
            if (textStart < 0) {
              textStart = 0;
            }
            if (textEnd > textLength) {
              textEnd = textLength;
            }
            let subText = text.substring(textStart, textEnd);
            let newText = text.replace(subText, `<span style="background-color:#FFC0CB">${subText}</span>`);
            node.textContent = '';
            node.insertAdjacentHTML('beforeend', newText);
          }
        }
      }
    }).exec();
  }
})

这样，当用户选中文本时，被选中的文本会变色，未被选中的文本保持原来的颜色。