App端聊天气泡需用flex布局：左气泡flex-direction:row+头像右距，右气泡row-reverse+头像左距，均设flex:1、max-width及min-height；文字加word-break:break-word；滚动到底部须用createSelectorQuery查最后消息位置；web-view嵌IM SDK会白屏，应走原生插件；iOS圆角阴影异常时改用filter:drop-shadow并加overflow:hidden。
uni-app App端聊天气泡怎么用flex布局写才不翻车
直接说结论：App端（iOS/Android）聊天气泡必须用display: flex + align-items: flex-end控制垂直对齐，不能依赖vertical-align或line-height——后者在原生渲染层根本不可靠。
常见翻车点是气泡文字换行后底部错位、头像和气泡高度不一致、左右气泡间距忽大忽小。核心原因是uni-app在App端用的是原生View组件映射，CSS盒模型行为和H5有差异。
- 左气泡（别人发的）：用
flex-direction: row，头像margin-right，气泡flex: 1并设max-width: 70% - 右气泡（自己发的）：用
flex-direction: row-reverse，头像margin-left，气泡同样flex: 1+max-width - 所有气泡容器加
min-height: 40px，避免空消息塌陷 - 文字
view必须设word-break: break-word，否则长链接/无空格字符串会撑破气泡
App端发送消息后怎么让聊天窗口自动滚动到底部
uni-app的scroll-view在App端滚动行为和H5不同：调用scrollIntoView可能无效，scrollTop设为999999也不保险。真正稳定的做法是监听消息列表长度变化，用createSelectorQuery查最后一条消息元素位置再滚动。
- 给每条消息
view加唯一id，比如msg-{{item.id}} - 在
watch里监听messageList.length变化，延迟50ms再执行滚动（等DOM渲染完成） - 用
this.$nextTick(() => { ... })包裹createSelectorQuery调用 - 不要用
scroll-into-view属性绑定动态ID——App端不支持响应式更新该属性
示例关键代码：
const query = uni.createSelectorQuery().in(this);
query.select(`#msg-${this.messageList[this.messageList.length - 1].id}`).boundingClientRect();
query.exec(res => {
if (res[0] && res[0].top) {
this.scrollTop = res[0].top + this.scrollTop;
}
});
为什么uni-app里用web-view嵌入IM SDK在App端会白屏或报错
App端web-view本质是独立的WKWebView（iOS）或X5内核（Android），和主Vue实例完全隔离，无法直接调用this.$store或触发$emit。很多开发者试图在里面初始化Socket.IO或融云SDK，结果连WebSocket都连不上。
- 真要集成第三方IM SDK，必须走原生插件路线：用
uni-app的Native.js或App原生插件封装收发逻辑，JS层只做UI绑定 - 如果坚持用
web-view，只能作为纯展示页，消息收发必须由主页面通过postMessage透传，且需手动处理序列化/反序列化 - Android端X5内核默认禁用
WebSocket，需在manifest.json里开启"WebviewOnly": false并配置网络权限
App端聊天气泡圆角和阴影为什么在iOS上显示异常
不是代码写错了，是iOS原生渲染对border-radius裁剪逻辑更严格。当气泡内含image或rich-text时，圆角会被截断；加box-shadow则可能整个气泡变黑或消失。
- 圆角统一用
border-radius: 16px，避免用百分比值（如50%） - 阴影改用
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1))，比box-shadow兼容性好 - 气泡内部如果有图片，外层
view加overflow: hidden，图片本身设width: 100%; height: auto; - 测试务必在真机上跑，模拟器的渲染和真实设备差得远
最麻烦的其实是长按复制/转发功能——App端需要单独调用uni.setClipboardData并监听longpress事件，这个逻辑很容易被忽略。
