兼容微信小程序，给出uniapp代码

<think>嗯，用户现在想要在UniApp中实现@人功能，而且还要兼容微信小程序。之前我已经给过一个方案，但用户现在特别提到了微信小程序的兼容性，可能需要调整代码，因为微信小程序的限制比较多。比如，微信小程序不支持contenteditable的div，所以必须用原生的editor组件。 首先，我得回忆一下之前的回答。在之前的回答里，用户可能使用了contenteditable的div，并配合用户列表弹窗来实现@功能。但现在微信小程序不支持这个，所以得用微信的editor组件。这个组件有自己的一套API，比如editorContext，用来操作输入内容。 然后，用户提到输入框输入@后弹出用户列表，选择后插入HTML，并处理删除。但是在微信小程序中，editor组件不能直接插入HTML，只能通过insertText或insertDiv等方法插入内容。所以需要找到一种方式，既能显示@用户的样式，又能记录用户信息。 接下来，数据结构的设计也很重要。可能需要维护一个数组，记录所有被@的用户及其位置，这样在删除的时候可以正确找到并更新数据。同时，插入的内容在微信中可能需要用特殊符号或占位符来表示，比如使用@[用户名称]，并附加data-userid属性，但微信的editor是否支持自定义属性呢？可能需要用其他方式，比如用JSON存储用户信息，或者通过正则匹配。 另外，获取和设置光标位置在微信小程序中也是一个挑战。微信的editorContext提供了getSelectionRange和setSelectionRange的方法，可以获取和设置光标位置。当用户输入@时，需要记录当前的光标位置，然后在用户选择后插入对应的内容，并调整光标到正确的位置。 删除处理也需要特别注意。在微信中，当用户按下删除键时，需要检测当前光标位置是否在@的内容附近，如果是的话，可能需要删除整个@块，而不仅仅是单个字符。这可能需要监听键盘事件，或者在内容变化时检查是否有@块被删除。 还有，用户列表的显示位置需要根据光标的位置动态调整。在微信小程序中，可以通过editorContext的getSelectionRange获取光标的位置，然后计算弹窗的显示位置。可能需要使用uni.createSelectorQuery来获取编辑器元素的位置，再结合光标的位置进行计算。 兼容性处理方面，可能需要条件编译，区分微信小程序和其他平台。比如在H5端使用contenteditable，而在微信小程序中使用editor组件。同时，插入的内容也需要根据平台做不同的处理，比如在微信中用insertText插入带有特殊标记的文本，并维护一个数据数组来记录被@的用户。 最后，测试各个平台的兼容性，确保在H5、微信小程序等环境下都能正常工作。可能需要处理不同平台的事件差异，比如微信中的bindinput和H5中的input事件可能有不同的行为，需要统一处理。 总结一下，关键点包括：使用editor组件替代contenteditable、处理插入内容的结构和样式、维护用户数据、动态调整弹窗位置、处理删除事件以及多平台兼容性。需要分步骤实现，确保每个功能模块在不同平台下都能正常运行。</think>基于微信小程序平台特性及UniApp跨端要求，这里提供兼容性实现方案： ### 一、核心实现思路 1. **双平台兼容策略**： - H5/APP端使用`contenteditable`实现富文本 - 微信小程序使用`<editor>`组件（需注意微信限制：`v-html`无效、不支持自定义DOM结构） 2. **数据结构同步**： ```javascript data() { return { content: "", // 纯文本内容 mentions: new Map(), // 被@用户映射表（结构：{位置索引: {id,name}}） showUserList: false, lastAtPos: -1 // 最后@符号位置 } } ``` ### 二、微信小程序专用代码 ```html <!-- 微信小程序专用编辑器 --> <editor v-if="isWeixin" id="msgEditor" :placeholder="placeholder" @input="handleWeixinInput" @keydown="handleWeixinKeydown" :show-confirm-bar="false" class="editor-box"> </editor> ``` ### 三、跨平台输入处理 ```javascript // 统一输入处理 async handleWeixinInput(e) { const { text, keyCode } = e.detail const { content, lastAtPos } = this // 检测@触发 if (text === '@' || (keyCode === 229 && content.endsWith('@'))) { this.showUserList = true const context = await this.getEditorContext() const res = await context.getSelectionRange() this.lastAtPos = res.start } // 同步纯文本内容 this.content = e.detail.text } // 获取编辑器实例 getEditorContext() { return new Promise(resolve => { const editor = uni.createSelectorQuery().select('#msgEditor') editor.context(res => resolve(res.context)).exec() }) } ``` ### 四、用户选择处理（微信小程序） ```javascript // 插入@用户 async insertWeixinMention(user) { const context = await this.getEditorContext() const mentionText = `@${user.name}` // 插入特殊格式文本 await context.insertText({ text: mentionText, style: { color: '#07c160', backgroundColor: '#e0f7e9' } }) // 记录被@用户 const selection = await context.getSelectionRange() this.mentions.set(selection.start - mentionText.length, { id: user.id, name: user.name, length: mentionText.length }) // 插入空格并聚焦 await context.insertText({ text: ' ' }) context.focus() } ``` ### 五、删除逻辑处理 ```javascript // 微信删除处理 async handleWeixinKeydown(e) { if (e.detail.keyCode !== 8) return const context = await this.getEditorContext() const selection = await context.getSelectionRange() // 检测是否删除@内容 for (const [pos, user] of this.mentions) { if (selection.start >= pos && selection.start <= pos + user.length) { // 删除整个@块 await context.deleteText({ start: pos, end: pos + user.length + 1 // 包含后续空格 }) this.mentions.delete(pos) break } } } ``` ### 六、H5/APP端兼容代码 ```html <!-- 通用富文本编辑器 --> <div v-if="!isWeixin" class="rich-editor" contenteditable @input="handleRichInput" @keydown="handleRichKeydown" ref="richEditor" v-html="richContent"> </div> ``` ```javascript // 富文本插入逻辑 handleSelectUser(user) { if (this.isWeixin) { this.insertWeixinMention(user) } else { const html = `<span class="mention" data-userid="${user.id}">@${user.name}</span>` document.execCommand('insertHTML', false, html) this.$refs.richEditor.focus() } } ``` ### 七、最终数据结构转换 ```javascript // 提交时生成结构化数据 generateFinalContent() { if (this.isWeixin) { return { text: this.content, mentions: Array.from(this.mentions.values()) } } else { return { html: this.richContent, mentions: [...this.$refs.richEditor.querySelectorAll('.mention')] .map(el => ({ id: el.dataset.userid, name: el.innerText.slice(1) })) } } } ``` **注意事项**： 1. 微信小程序需在`manifest.json`配置： ```json "mp-weixin": { "usingComponents": true, "permission": { "scope.userFuzzyLocation": { "desc": "用于定位附近用户" } } } ``` 2. 样式兼容方案： ```css /* 微信专用样式 */ #ifdef MP-WEIXIN .editor-box { min-height: 120rpx; padding: 20rpx; border: 1rpx solid #eee; } #endif ``` --相关问题--: 1. 如何实现@用户后的消息推送功能？ 2. 在微信小程序中如何优化编辑器性能？ 3. 如何将富文本内容转换为微信小程序支持的格式？ 4. 怎样实现跨平台的表情插入功能？[^3]