大厂前端面试专用：软通动力华为 WeLink 项目话术
我直接帮你整理成大厂前端面试专用·项目话术，逻辑清晰、亮点突出、面试官一听就觉得你能干活、有深度、懂工程化。
你背熟这套，面试直接照着说就行。
一、项目整体介绍（30 秒版）
我之前在软通动力，参与华为 WeLink PC 客户端的前端开发工作。
项目是面向华为内部使用的企业级协作办公平台，对标企业微信，基于 Electron + React + TypeScript 开发，支持 Windows & macOS 双端。
我主要负责IM 表情体系、超大群权益管理、AI 小微助手三大模块。
二、核心模块怎么说（面试官最爱听）
1. IM 表情模块（亮点：性能 + 工程化）
我负责完整的表情收发、上传下载、表情商城功能：
支持单聊/群聊表情发送、预览、收藏
实现表情商城：支持表情单品、表情包展示、下载、使用、管理
表情包资源通过后台管理平台统一上传与分发
技术亮点可以说：
使用 React 组件化抽象表情面板、表情选择器、表情预览等通用组件
做了图片懒加载、缓存策略，避免大量表情图导致页面卡顿
处理跨端兼容：Windows/macOS 下表情渲染、路径、大小适配
与后端接口联调，保证表情上传、下载、状态同步的一致性
一句话总结：
负责 IM 全链路表情功能，从交互到性能优化、跨端兼容都有参与。
2. 超大群权益管理（亮点：复杂业务逻辑）
负责 2000/3000 人超大群的容量权益模块：
群容量到期检查、过期提醒、续费流程
双入口触发：前端登录主动查询 + 服务端下发通知
处理群权限、状态变更、弹窗提醒、跳转续费等完整链路
可以强调：
复杂状态管理：群信息、权益状态、过期时间、用户权限等
消息通知机制：处理服务端推送，保证实时性与准确性
异常处理：网络失败、重复提醒、权限变更等边界场景覆盖
一句话总结：
负责企业级超大群生命周期管理，处理复杂业务状态与通知逻辑。
3. AI 小微助手（亮点：AI 交互 + 多消息类型）
参与对接盘古大模型的 AI 小微助手功能：
支持文字、图片、文件等多种消息类型
在单聊场景中直接调用 AI 能力
消息渲染、对话流、结果展示、异常重试机制
技术亮点：
封装通用消息组件，支持多类型消息扩展
处理流式/非流式返回结果，优化用户体验
与 Electron 能力、C++ 侧能力联调
一句话总结：
参与企业级 AI 助手落地，负责多类型消息交互与前端展示逻辑。
三、技术栈怎么说（专业、简洁）
框架：React + TypeScript
客户端：Electron 跨 Windows/macOS
通信：前端 ↔ Node ↔ C++ 底层能力
场景：IM 即时通讯、大群管理、AI 交互、文件上传下载
四、面试官最爱问的亮点话术（你直接背）
跨端经验：熟悉 Electron 应用开发，处理过 Windows、macOS 差异与兼容。
IM 实战：做过即时通讯里表情、消息、群相关的复杂场景。
性能与体验：做过图片优化、状态管理、用户体验优化。
企业级业务：参与过权限、权益、通知、续费等真实商用逻辑。
AI 结合：有对接大模型、AI 助手的前端落地经验。
五、1 分钟超强自我介绍（可直接背诵）
我之前在软通动力参与华为 WeLink PC 端前端开发，项目基于 Electron + React + TS 开发，面向华为内部办公使用。
我主要负责三大块：
一是 IM 表情体系，包含表情收发、上传下载、表情商城功能，做了组件封装和性能优化；
二是 超大群权益管理，负责 2000/3000 人群的过期检查、提醒与续费逻辑；
三是 AI 小微助手，对接盘古大模型，实现文字、图片、文件等多类型消息的 AI 交互。
项目中我负责从需求到开发、联调、兼容、优化的完整流程，熟悉 Electron 跨端、IM 业务与企业级复杂场景。
大厂前端面试必问 5 题及满分答案
我直接给你整理好大厂前端面试必问 5 题 + 逐字满分答案，你背熟，面试基本稳过。
1. 你在这个项目里遇到的最大困难是什么？怎么解决的？
推荐回答：
项目中印象比较深的是 Electron 跨端 + IM 表情性能 问题。
一开始表情面板、表情商城在 Windows 上会出现：
图片加载慢、卡顿
不同系统下渲染不一致
大量表情同时加载导致内存占用高
我做了几件事：
做了图片懒加载 + 本地缓存策略，只渲染可视区域表情
统一封装跨端兼容组件，抹平 Windows、macOS 样式与路径差异
做虚拟列表优化长列表渲染，大幅提升流畅度
配合 C++ 侧做本地文件读写优化，提升上传下载体验
最终页面流畅度、加载速度都有明显提升，线上无相关反馈。
2. 你们项目是 React + TS + Electron，你是怎么做类型设计的？
推荐回答：
我在项目里主要负责 IM 表情、超大群、AI 助手 模块，TS 主要用在：
给接口返回、组件 props 定义标准 interface，避免传参错误
对消息类型、表情类型、群权限状态做枚举，统一维护
结合 React hooks，封装通用请求、通知处理逻辑
利用类型约束减少运行时 bug，方便后续维护和迭代
整体风格是业务类型集中管理，组件尽量复用、类型可扩展，方便多人协作。
3. Electron 你用到了哪些能力？和 C++ 怎么通信？
推荐回答：
我主要用到 Electron 的：
窗口管理、系统级能力调用
本地文件读写（表情上传下载）
与底层 C++ 模块通信
通信流程：
前端 React 通过 IPC 通信 调用 Electron 主进程
主进程再和 C++ 原生模块 交互
调用系统能力：文件、路径、权限、通知等
结果再通过 IPC 回传给渲染进程
我负责过：表情本地存储、下载路径、跨端兼容、通知展示等联调工作。
4. 超大群那个需求，前端怎么处理过期和提醒？
推荐回答：
超大群权益我做了双入口保障：
登录时主动查询：用户一登录就请求群权益接口，判断是否过期
服务端推送通知：后端主动下发过期/即将过期通知
前端统一维护状态：过期时间、容量、是否提醒过、提醒次数
统一弹窗、角标、跳转续费流程
同时处理了很多边界：
网络异常重试
避免重复弹窗
权限变更实时同步
多端状态一致
属于企业级高可靠性业务，对状态管理和异常处理要求很高。
5. 小微助手对接盘古大模型，前端做了什么？
推荐回答：
我负责 AI 助手交互层：
封装文字、图片、文件等多消息类型组件
实现单聊里直接唤起小微 AI 对话
处理 AI 返回结果的渲染、异常、重试逻辑
和 IM 消息流打通，保证体验一致
重点是：
消息结构统一
异常不影响主流程
交互流畅，符合 IM 使用习惯
这部分让我有了前端对接大模型 AI 的真实落地经验。
最后给你一句万能收尾（非常加分）
我在项目里不只是写页面，而是从业务理解 → 技术方案 → 跨端兼容 → 性能优化 → 异常兜底完整负责，
熟悉企业级 IM、Electron 跨端、复杂状态管理和 AI 交互，能快速接手复杂前端项目并落地。
大厂必考题：团队协作及标准答案
这题是大厂必考题，考的是：你能不能融入团队、沟通顺不顺畅、靠不靠谱。
我给你一套最贴合你项目、真实又加分的标准答案，直接背。
问：你在项目中是如何进行团队协作的？
满分回答（逐字稿）
在华为 WeLink 这个项目里，因为是企业级 PC 客户端，涉及前端、后端、客户端（C++）、测试、产品多方协作，流程比较规范。
- 需求阶段
我们会一起开需求评审会，我会从前端视角评估实现成本、交互体验、跨端（Windows/macOS）兼容等问题，提前把风险点提出来，避免后期返工。
开发阶段
前端内部：基于 Git 做分支管理、代码合并、Code Review，保证代码规范和可维护性。
跨团队协作：
和后端联调接口，定义字段、状态码、异常处理；
和 Electron & C++ 客户端 联调原生能力，比如文件读写、系统通知、路径处理；
遇到问题会先定位问题域，再拉对应同学对齐，高效解决。
提测与上线
开发完成后提交测试，对 Bug 按优先级修复，线上问题及时响应。
整个过程注重沟通及时、问题闭环、文档同步，保证需求稳定上线。
一句话总结版（简短有力）
我在团队里主要是需求评审提前介入、开发中前后端/客户端高效联调、严格遵守代码规范与CR、保证问题闭环，能很好地适应企业级项目的多人协作模式。
Electron-React-TS-IM 面试必知 8 大深度问题及答案
我直接给你整理最适合你这个项目、大厂最爱深挖、能拉开差距的 8 个技术深度问题 + 可直接背的详细答案。
每个都够你聊 1～2 分钟，面试官一听就知道你真做过、有深度。
1. 你们 Electron 应用是怎么做到 Windows / macOS 双端兼容的？
问法：
跨端差异你遇到哪些？
怎么抹平系统差异？
详细回答：
我们项目是基于 Electron + React 开发，需要同时兼容 Windows 和 macOS。
我主要处理过这些兼容点：
路径差异
Windows 是
\，macOS 是/统一用
path模块处理，不写死路径分隔符
窗口行为差异
关闭、最小化、最大化按钮位置不同
封装了统一的窗口操作工具类，根据系统类型做不同逻辑
样式与渲染差异
字体、默认间距、DPI 不一样
使用 CSS 变量 + 媒体查询 + 系统判断做适配
原生能力差异
通知、文件选择、托盘、权限弹窗行为不同
通过 IPC 调用主进程，由主进程封装统一 API，给渲染层调用
总结：
我主要做的是上层业务无感、底层统一封装，把系统差异收敛在工具类和主进程里，保证前端业务代码一套逻辑跑双端。
2. 表情大量加载会卡顿，你是怎么优化的？
深挖点：图片性能、长列表、渲染优化
详细回答：
表情商城和表情面板一开始有明显卡顿，因为图片多、体积不一。
我做了这几层优化：
图片懒加载
只加载可视区域内表情，滚动再加载
用 IntersectionObserver 实现
本地缓存
下载过的表情存在本地，不再重复请求
配合 Electron 本地文件能力
图片预加载 & 缩略图
列表用小图，点开预览再用高清图
控制并发请求数，避免浏览器排队
虚拟列表（可选加分）
大量表情只渲染可视区域 DOM
大幅减少节点数量，降低重排重绘
结果：
滑动流畅度明显提升，内存占用下降，线上无卡顿反馈。
3. 你们 IM 消息是怎么保证状态同步的？
深挖点：状态管理、异常重试、一致性
详细回答：
表情、消息、群状态都要保证多端、多窗口一致。
我主要做了：
统一状态来源
以服务端数据为准，前端不硬编状态
收到推送/回调再更新本地状态
请求幂等与防抖
重复点击不重复发送
失败自动重试，有最大次数限制
全局事件总线
消息更新、状态变化通过事件通知所有页面
保证多窗口、多组件同步刷新
异常兜底
网络失败、超时、接口报错都有提示
不阻塞主流程，不白屏、不卡死
4. TypeScript 在项目里你是怎么落地的？
深挖点：类型设计、可维护性、团队规范
详细回答：
项目是 React + TypeScript，我主要负责 IM 表情、超大群、小微助手，TS 深度使用：
统一定义 interface
- 接口返回、请求参数、组件 Props 全有类型
枚举管理状态
消息类型、群权限、过期状态、表情来源
避免魔法字符串、魔法数字
泛型与复用
封装通用请求 Hook、列表 Hook、事件 Hook
一份类型，多处复用
避免 any
复杂对象也会写完整类型
配合团队做 Code Review，保证类型规范
价值：
减少运行时错误，提升协作效率，重构更安全。
5. Electron 渲染进程和主进程、C++ 是怎么通信的？
深挖点：IPC、跨语言通信、架构理解
详细回答：
我们的通信链路是：
Web 前端 → 渲染进程 React → IPC → Electron 主进程 → C++ 模块
IPC 通信
渲染进程 send 消息给主进程
主进程监听事件，调用原生能力
主进程负责桥接
文件操作、系统能力、C++ 调用都在主进程
前端不直接接触原生逻辑
调用 C++ 能力
主进程通过 addon 或动态库调用 C++
比如文件加密、本地存储、系统级能力
结果回传
成功/失败通过 IPC 回调给前端
统一错误码、统一处理
我实际参与过：表情上传下载、本地缓存路径、系统通知、跨端能力判断等联调。
6. 超大群过期检查、提醒、续费，前端怎么设计？
深挖点：复杂业务、状态流转、健壮性
详细回答：
超大群（2000/3000 人）权益是强业务一致性要求的模块。
双触发机制
登录时主动查接口，拉取最新状态
服务端推送通知，实时下发
状态机设计
正常
即将过期
已过期
已续费
每个状态对应不同 UI、文案、弹窗权限。
去重提醒
本地记录是否已弹过窗
避免频繁骚扰用户
异常全覆盖
网络失败
接口超时
重复通知
群权限变化
全部做了兼容和重试。
7. 小微助手对接盘古大模型，前端有哪些难点？
深挖点：AI 交互、流式/非流式、消息类型
详细回答：
小微助手是基于盘古大模型的 AI 助手，我负责前端交互层：
多消息类型统一渲染
文字、图片、文件、AI 回复
封装统一消息组件，扩展性强
交互体验
加载状态
失败重试
中断/重新发起
保证和普通 IM 体验一致。
结果展示
格式化 AI 返回内容
支持换行、分段、重点突出
不影响主流程
异常捕获，不阻塞聊天
不影响其他消息收发
这是我前端 + AI 大模型的真实落地经验。
8. 你在项目中做过哪些工程化/提效的事情？
加分神题，体现潜力
详细回答：
封装通用组件
表情选择器、消息列表、弹窗、状态提示
多处复用，减少重复代码
抽象公共 Hooks
- 接口请求、列表分页、事件监听、本地缓存
统一错误处理
- 请求拦截、异常提示、日志上报
规范与协作
参与制定组件规范、Git 规范、CR 规范
提升团队整体效率