App端聊天室卡顿必须用nvue而非vue页面，因其基于Weex原生渲染，支持虚拟滚动和item复用，消息万条不卡；scroll-view在Webview中易掉帧、scrollTop不准、层级覆盖异常，而nvue的list组件可精准滚动、同层渲染、适配键盘，且仅需uni.request和uni.uploadFile等原生API。
App端聊天室卡顿、消息堆积、滑动不跟手？直接上 nvue 是最有效的解法——它不是“可选优化”，而是 App 端长消息列表的刚需底层方案。
为什么必须用 nvue 而不是 vue 页面做聊天主界面
vue 页面在 App 端靠 Webview 渲染，遇到几百条消息+图片/语音气泡时，scroll-view 会明显掉帧，尤其安卓低端机；而 nvue 基于 Weex 原生渲染引擎，<list></list> 和 <recycle-list></recycle-list> 组件天然支持虚拟滚动和 item 复用，消息列表万条也不卡。
- vue 页面中
scroll-view滚动时无法精确控制scrollTop，容易跳动或回弹错位；nvue的<list></list>通过scrollToAPI 可精准锚定到最新消息 - 原生组件（如
video、map）在 vue 页面里层级最高，无法被气泡菜单、长按弹窗覆盖；nvue所有元素同层渲染，ChatMsgItemPop这类弹出菜单能自然盖在消息气泡上 - vue 页面中使用
position: fixed做输入框吸底，在部分 Android 机型上会随软键盘抬起失效；nvue的 flex 布局 +flex: 1容器天然适配键盘高度变化
nvue 聊天页面结构必须用 <list></list> 而非 <scroll-view></scroll-view>
<list></list> 是 nvue 专属高性能列表组件，仅在 App 端生效，不支持 H5/小程序——这点必须接受。它不像 scroll-view 那样把所有消息节点一次性挂载 DOM，而是只渲染可视区域及缓冲区内的 <cell></cell>，滚动时动态复用。
- 每个消息项必须包裹在
<cell></cell>内，且<cell></cell>不能嵌套<scroll-view></scroll-view>或其他滚动容器 - 消息时间戳、气泡边距、头像对齐等样式，只能用 Flex 布局实现，禁用
float、position: absolute（nvue 不支持） - 若需“加载更多”上拉触底，监听
@scrollbottom事件，而非@scrolltoupper（那是scroll-view的） - 流式输出 AI 回复时，往
messages响应式数组 push 新对象即可，<list></list>会自动局部更新，无需手动this.$nextTick()
uni.request 是唯一可用的网络请求方式
nvue 页面中，FlyIO、axios、fetch 全部不可用——Weex 引擎未注入对应 polyfill。必须用 uni.request，且注意它不支持拦截器和全局配置。
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- 发送消息：调用
uni.request({ url: '/api/send', method: 'POST', data: { content, to } }) - 流式请求 AI 接口：需拼全地址（
config.baseUrl + '/stream'），并设置responseType: 'text'，用onHeadersReceived和onLoad分段处理 chunk - 上传图片/视频：必须用
uni.uploadFile，不能走FormData；上传成功后，再发文本消息附带 mediaUrl - WebSocket 补充：若用 MQTT 或自建 ws，需在
nvue页面中调用uni.connectSocket，而非浏览器原生WebSocket构造函数
消息定位与滚动同步极易出错
用户发完消息后要自动滚到底部，但 <list></list> 的 scrollTo 必须等 <cell></cell> 渲染完成才能生效，否则位置偏移。常见错误是直接在 messages.push() 后立刻调用 this.list.scrollTo({ index: this.messages.length - 1 })。
- 正确做法：在
nextTick后调用（uni.nextTick(() => this.list.scrollTo(...))），或监听@loadmore/@scrollbottom的回调时机 - 若启用消息已读回执，需用
plus.webview.getWebviewById获取当前页面 webview 引用，再调用evalJS向 vue 页面同步状态（nvue 和 vue 页面通信需走此通道） - 键盘弹起时，
nvue输入框不会被顶起——需手动监听@keyboardheightchange事件，动态调整<list></list>的flex: 1高度减去键盘高度
真正难的不是写出来，而是接受 nvue 的约束：没有 CSS 动画、不能用百分比宽高、调试靠 console.log 和真机日志。一旦跨过这个门槛，App 端聊天体验就不再是“将就”，而是“本该如此”。
