微信小程序实现@功能解析

"微信小程序纯文本实现@功能" 在微信小程序中实现@功能，尤其是在`textarea`标签内，是一项挑战，因为需要处理一键删除和文本变色等复杂性。虽然Web端可以利用现有的库如caret.js或At.js轻松完成，但在小程序环境中，我们需要自定义解决方案。 首先，@功能的核心是将被@人的ID发送到后端，以便通知相关人员。在实现一键删除功能时，开发者最初尝试使用特殊符号标记和正则表达式来定位和删除@人名，但这种方法可能扩展性不佳，如果要处理更多复杂情况（如话题匹配），代码会变得冗余。 幸运的是，微信小程序提供了`wx.getSelectedTextRange`接口，它可以在文本框聚焦时获取光标位置。这使得我们可以精确地在用户输入时插入@人员，并在特定位置删除。在`textarea`的`bindinput`事件中，我们可以获取到变化后的文本值、光标位置和触发的键值，以此判断是否触发了@操作。 实现@功能的流程如下： 1. 用户点击@按钮，跳转到人员列表页面。 2. 用户选择一个或多个人员后，通过`wx.navigateBack`返回。 3. 在`onShow`生命周期函数中，组装@数据。获取到的@人员ID需根据光标位置插入到文本中。如果没有获取到光标位置，可默认将@人员添加到文本末尾。 4. 对@人员的ID、当前文本等关键数据进行备份，以备后续处理。 此外，页面间通信是一个重要的环节。在本例中，开发者选择了使用数据缓存来传递信息。当用户从人员列表返回时，存储在缓存中的@成员数据会被读取并用于组装新的文本内容。 总结来说，微信小程序中的@功能实现涉及到了事件监听、光标位置处理、字符串操作以及页面间的通信。通过合理利用微信小程序提供的API，开发者可以构建出类似Web端的交互体验，尽管在某些特性（如文本变色）上可能有所妥协。通过这种方式，可以确保在小程序中实现的@功能既实用又高效。