常见的小程序面试题（中级）_中级小程序开发面试题-优快云博客

微信小程序的双线程模型是什么？如何保证数据安全？
- 答案：
  - 双线程模型：视图层（WebView 渲染）与逻辑层（JavaScriptCore 执行）分离，通过 Native 层（微信客户端）通信。
  - 数据安全：逻辑层与视图层通过 setData 单向通信，且数据需序列化为字符串，避免直接操作 DOM。
小程序的生命周期函数有哪些？说明 onLoad 和 onShow 的区别
- 答案：
  - 页面生命周期：onLoad（首次加载）、onShow（页面显示）、onReady（初次渲染完成）、onHide（页面隐藏）、onUnload（页面销毁）。
  - onLoad 在页面创建时触发（参数传递），onShow 在页面每次显示时触发（如从后台切回）。
如何实现小程序页面的全局样式与局部样式隔离？
- 答案：
  - 全局样式：app.wxss；
  - 局部样式：页面 .wxss 默认启用样式隔离（类似 Vue 的 scoped），或通过 Component 构造器设置 options: {styleIsolation: 'isolated'}。

小程序中如何实现父子组件通信？
- 答案：
  - 父传子：通过 properties 属性传递；
  - 子传父：通过 triggerEvent 触发自定义事件；
  - 跨组件：使用 getCurrentPages() 获取页面栈，或全局 EventBus。
解释 wx:key 的作用及使用场景
- 答案：
  - 用于列表渲染（wx:for）时标识节点唯一性，优化 diff 算法效率。
  - 必须为唯一值（如 id），避免使用 index。
如何在小程序中实现用户登录流程？
- 答案：
  - 调用 wx.login 获取 code → 发送至服务端换取 openid 和 session_key → 服务端生成自定义登录态（如 token）返回 → 前端存储 token 用于后续请求。

小程序启动白屏时间过长，如何优化？
- 答案：
  - 分包加载、减少首包体积；
  - 预请求数据（onLoad 阶段异步加载）；
  - 使用骨架屏（Skeleton Screen）；
  - 避免在 onLaunch 中同步执行耗时操作。
为什么频繁调用 setData 会导致性能问题？如何解决？
- 答案：
  - 原因：setData 会触发视图层渲染，数据需序列化为字符串，频繁调用会导致线程阻塞。
  - 解决：合并数据更新、避免传递大数据（如长列表）、使用 this.data 直接修改非渲染数据。
如何实现小程序的分包加载？需要注意什么？
- 答案：
  - 在 app.json 中配置 subPackages，将非核心页面拆分为子包。
  - 注意：主包大小不超过 2MB，总包不超过 20MB；分包不能互相依赖。

解释 Behaviors 的作用及使用场景
- 答案：
  - Behaviors 类似 Mixin，用于复用组件逻辑（如共享方法、数据）。
  - 示例：多个组件需要相同的表单验证逻辑。
如何实现小程序的实时音视频功能？
- 答案：
  - 使用 <live-pusher> 和 <live-player> 组件；
  - 结合 wx.createLivePusherContext 和后台服务（如腾讯云 TRTC）。
小程序如何防止 XSS 攻击？
- 答案：
  - 禁用 innerHTML（默认转义），使用 rich-text 组件时过滤不安全标签；
  - 服务端校验数据，避免直接渲染用户输入内容。

如何集成微信支付功能？
- 答案：
  - 服务端生成支付参数（统一下单 API）→ 前端调用 wx.requestPayment → 监听支付结果回调。
解释 open-data 组件的用途及限制
- 答案：
  - 用途：展示用户授权信息（如头像、昵称）无需主动授权；
  - 限制：不可添加样式、不可绑定事件、仅用于展示。
如何实现小程序分享到朋友圈（仅限安卓）？
- 答案：
  - 使用 onShareTimeline 生命周期函数；
  - 配置 enableShareTimeline: true，返回自定义分享参数。

用户反馈小程序页面滚动卡顿，如何排查？
- 答案：
  - 检查是否频繁触发 setData；
  - 使用 WXML 面板查看节点数量（避免过多节点）；
  - 使用 scroll-view 时禁用动画（enable-flex 属性）。
如何实现一个图片懒加载组件？
- 答案：
  - 监听页面滚动，使用 wx.createIntersectionObserver API 判断图片是否进入可视区域；
  - 动态替换 src 属性加载真实图片。