小程序面试题

Hello--_--World2026-05-08 16:32

文章目录

  • [一、什么是小程序（Mini Program）？](#一、什么是小程序（Mini Program）？)
    • [1. 核心特征](#1. 核心特征)
    • [2. 技术本质](#2. 技术本质)
    • [3. 小程序 vs H5 网页 vs 原生 App](#3. 小程序 vs H5 网页 vs 原生 App)
    • [4. 为什么会有小程序？](#4. 为什么会有小程序？)
  • 二、小程序的优缺点分析
    • [1. 优点 (Pros)](#1. 优点 (Pros))
      • [A. 对用户：极致便捷](#A. 对用户：极致便捷)
      • [B. 对开发者/企业：高效低成本](#B. 对开发者/企业：高效低成本)
    • [2. 缺点 (Cons)](#2. 缺点 (Cons))
      • [A. 对用户：功能与性能上限](#A. 对用户：功能与性能上限)
      • [B. 对开发者/企业：受制于人](#B. 对开发者/企业：受制于人)
    • [3. 总结对比表](#3. 总结对比表)
  • 三、微信小程序生命周期完全指南
    • [1. 应用生命周期 (`app.js`)](#1. 应用生命周期 (app.js))
    • [2. 页面生命周期 (`page.js`)](#2. 页面生命周期 (page.js))
      • [💡 重点：页面切换时的执行顺序](#💡 重点：页面切换时的执行顺序)
    • [3. 组件生命周期 (`component.js`)](#3. 组件生命周期 (component.js))
    • [4. 常见问题与面试考点 (QA)](#4. 常见问题与面试考点 (QA))
    • [5. 总结笔记](#5. 总结笔记)
  • 四、微信小程序登录流程详解
  • 五、微信小程序路由跳转完全指南
      • [1. 核心跳转方式对比](#1. 核心跳转方式对比)

一、什么是小程序（Mini Program）？

小程序是一种不需要下载安装即可使用的"轻量级"应用程序。它实现了应用"触手可及"的梦想，用户扫一扫或搜一下即可打开应用。它介于传统的"网站（H5）"和"原生手机 App"之间。

1. 核心特征

  • 触手可及：扫码或搜索即可打开，省去了去应用商店下载、安装、注册的繁琐步骤。
  • 用完即走：退出即关闭，不占用手机存储空间（仅产生极小缓存），也不会像后台 App 那样持续消耗电量和内存。
  • 宿主依赖：它必须运行在"宿主" App 中（如微信、支付宝、抖音、百度等）。没有宿主环境，小程序无法独立运行。

2. 技术本质

小程序在技术架构上通常采用 双线程模型：

  • 渲染层（View）：使用类似 HTML/CSS 的技术（如微信的 WXML/WXSS）来展示界面。
  • 逻辑层（App Service）：使用 JavaScript 处理业务逻辑。
  • 原生接口（JSBridge）：宿主环境提供了大量的 API，让小程序可以调用手机的摄像头、蓝牙、地理位置、支付等原生功能，这使得它的体验比普通网页（H5）更流畅。

3. 小程序 vs H5 网页 vs 原生 App

维度 H5 网页 小程序 原生 App
安装方式 无需安装 无需安装（即开即用） 需下载安装
开发成本 低 中 高（需适配 iOS/Android）
性能体验 一般（受限于浏览器） 优（接近原生） 极佳
获取权限 极少（仅限相机等） 丰富（支付、位置、步数等） 全权限
传播能力 强（链接分享） 强（社交分享/二维码） 弱（需跳转商店）

4. 为什么会有小程序？

  • 对用户：节省手机空间，解决了"为了低频需求专门下载一个 App"的痛点。
  • 对开发者：开发成本比原生 App 低得多，且能直接利用微信、抖音等庞大的流量池进行裂变。
  • 对平台：增强用户粘性，让用户在自己的生态内完成"吃喝玩乐买"的所有闭环，构建超级 App 生态。

总结 ：

小程序就是一个运行在大型 App 里的"轻量版应用"。它不仅拥有接近原生 App 的流畅度，还具备网页随处可见、随时打开的便利性。

二、小程序的优缺点分析

小程序作为一种"轻量化"的应用形态，在移动互联网生态中扮演着极其实用的角色。其优点和缺点都非常鲜明，以下从用户、开发者及企业的视角进行详细分析：

1. 优点 (Pros)

A. 对用户：极致便捷

  • 零成本进入：无需通过应用商店下载，扫码或搜索即用，解决了"为了低频功能非得下载 App"的痛点。
  • 节省空间：运行在宿主 App（微信、支付宝、抖音等）中，不占用手机存储空间，对内存紧张的用户极其友好。
  • 隐私保护：相比原生 App 动辄申请敏感权限，小程序的权限获取受宿主平台严格控制，安全性通常更高。

B. 对开发者/企业：高效低成本

  • 开发成本低：采用前端技术栈（JS/CSS），开发周期短，且一套代码即可实现跨系统运行。
  • 流量生态：直接利用超级 App 的社交流量，支持好友转发、群聊分享，裂变传播效率极高。
  • 转化路径短：支持"一键授权登录"和内置支付接口，省去了注册和绑卡的繁琐步骤，转化率远高于 H5 页面。

2. 缺点 (Cons)

A. 对用户：功能与性能上限

  • 性能瓶颈：虽然优于 H5，但在处理高频交互（如大型游戏）或复杂运算（如视频剪辑）时，性能仍不及原生 App。
  • 离线不可用：绝大多数小程序高度依赖网络，无网环境下往往无法启动或功能严重受限。
  • 入口隐蔽：没有默认的桌面图标，主要依赖下拉列表或搜索，不如原生 App 易于寻找。

B. 对开发者/企业：受制于人

  • 平台审核严：每次更新需提交平台审核，不像网站可即时发布，且审核标准受平台政策影响较大。
  • 功能受限：无法发送系统级推送通知（Push Notification），通常只能发送受限的模版或订阅消息。
  • 缺乏独立性：数据和流量寄宿在平台之上，若平台政策调整或账号违规，业务将面临极大的经营风险。

3. 总结对比表

维度 小程序 原生 App
安装体验 胜 (即开即用) 劣 (需下载安装)
性能极限 劣 (轻量化架构) 胜 (极致流畅)
留存率 中 (易被遗忘) 高 (常驻桌面)
开发费用 低 (一套代码) 高 (需多端适配)
社交传播 强 (生态内裂变) 弱 (传播路径长)

核心建议：

  • 小程序首选 ：适用于低频、工具类、或强依赖社交裂变的业务（如：餐饮点餐、共享单车、政务办理、拼团购物）。
  • 原生 App 首选 ：适用于需要极高性能、沉浸式体验或高频用户粘性的业务（如：重度游戏、专业编辑工具、社交核心平台）。

三、微信小程序生命周期完全指南

在小程序开发中，生命周期（Lifecycle） 是指一个对象（应用、页面或组件）从创建、运行到销毁的整个过程。理解这些钩子函数的执行顺序是掌握小程序开发、优化性能及处理业务逻辑的关键。

1. 应用生命周期 (app.js)

应用生命周期针对的是整个小程序实例。无论用户在小程序内如何切换页面，应用实例在未被系统销毁前始终存在。

钩子函数 说明 触发时机 备注
onLaunch 初始化 小程序启动时（冷启动）只触发一次。 常用于获取用户信息、检查更新、初始化全局数据。
onShow 切前台 启动或从后台切回前台时触发。 可通过参数获取场景值（Scene）或 Scheme 跳转信息。
onHide 切后台 点击 Home 键、熄屏或切换到其他 App 时。 用于清理临时缓存、暂停计时器或记录用户退出行为。
onError 错误监听 小程序发生脚本错误或 API 调用失败时。 适合接入日志系统，自动上报错误堆栈。

2. 页面生命周期 (page.js)

每个页面都有独立的生命周期，控制该页面的资源加载、渲染、隐藏和销毁。

钩子函数 说明 常见操作
onLoad 加载 核心钩子 。获取页面参数 options，发起初始网络请求。
onShow 显示 每次页面出现在视口时触发（包括从下级页面返回）。
onReady 初次渲染完成 此时页面视图层已准备好，可调用 createSelectorQuery 操作节点。
onHide 隐藏 页面被遮挡（如 navigateTo 到新页面或切换 Tab）。
onUnload 卸载 页面被关闭（如 redirectTo 或 navigateBack）。必须在此清理定时器。

💡 重点：页面切换时的执行顺序

  • A 页面跳转到 B 页面 (navigateTo) ：
    A.onHide -> B.onLoad -> B.onShow -> B.onReady
  • B 页面返回 A 页面 (navigateBack) ：
    B.onUnload -> A.onShow

3. 组件生命周期 (component.js)

组件生命周期建议写在 lifetimes 字段内，以获得更好的兼容性和结构。

钩子函数 说明 触发时机
created 实例创建 组件实例刚被创建，此时不能 调用 setData，适合定义非响应式变量。
attached 进入节点树 最常用。组件初始化完成并挂载，建议在此处发起业务数据请求。
ready 布局完成 组件在视图层布局完成，可以获取组件内部节点信息。
detached 销毁 组件被移除。必须在此解绑全局事件、清理 setInterval 等。

扩展：pageLifetimes

组件有时需要感知所在页面的状态，可使用 pageLifetimes 监听：

  • show: 所在页面显示时触发（例如：页面回来时组件自动重启动画）。
  • hide: 所在页面隐藏时触发。

4. 常见问题与面试考点 (QA)

Q: onLoad 和 onShow 的区别？

  • onLoad: 整个页面生命周期中只执行一次。适合初始化一次性的数据、获取 URL 传参。
  • onShow: 只要页面可见就会执行。适合需要实时更新的数据（如：从详情页改了状态，返回列表页时需要刷新列表）。

Q: 小程序进程是如何销毁的？

当用户点击关闭或回到手机桌面时，小程序进入"后台"模式（触发 onHide）。它只有在以下情况才会被真正销毁：

  1. 小程序在后台运行时间超过规定时长（通常约 5 分钟）。
  2. 系统内存警告，优先回收占用资源高的后台小程序。

Q: 数据请求应该放在哪个生命周期？

  • 页面 ：通常首选 onLoad；若需每次进入都刷新，选 onShow。
  • 组件 ：务必放在 attached 中，确保组件节点已挂载。

5. 总结笔记

  • App 链路 : onLaunch(1次) -> onShow -> onHide
  • Page 链路 : onLoad(1次) -> onShow -> onReady -> onHide/onUnload
  • Component 链路 : created -> attached -> ready -> detached
  • 性能技巧 : 所有的定时器、onSocketOpen、onAccelerometerChange 等全局监听，务必在 onUnload（页面）或 detached（组件）中进行销毁或解绑，防止内存泄漏。

四、微信小程序登录流程详解

微信登录的核心思想是：通过微信官方提供的临时票据（code），换取用户唯一标识（OpenID）和会话密钥（session_key），并在后端建立自己的登录态。

1. 核心流程图解

微信登录通常涉及 三个角色 的交互：小程序客户端 、开发者服务器（后端） 以及 微信接口服务。

2. 详细执行步骤

第一步：客户端获取临时凭证 code

小程序调用 wx.login()。微信服务器会返回一个 code（临时登录凭证，有效期 5 分钟）。

注意 ：code 只能使用一次。

第二步：客户端发送 code 到开发者服务器

小程序通过 wx.request() 将 code 发送给开发者后端接口。

第三步：后端向微信服务器换取用户信息

后端服务器携带以下四个参数请求微信接口 auth.code2Session：

  • appid: 小程序唯一标识。
  • secret: 小程序应用密钥。
  • js_code : 客户端传过来的 code。
  • grant_type : 填写为 authorization_code。
第四步：微信服务器返回关键字段

微信核对无误后，会返回：

  • openid: 用户在该小程序下的唯一标识。
  • session_key: 会话密钥（用于后端解密用户敏感数据，如手机号）。
  • unionid:（可选）如果绑定了开放平台，用户在同主体下所有应用（App、公众号、多小程序）的唯一标识。
第五步：后端自定义登录态

后端不应该 直接把 openid 返回给前端（存在安全风险）。正确做法是：

  1. 根据 openid 在数据库中查找或创建用户。
  2. 生成一个自定义登录态 （如 Token 或 Session ID）。
  3. 将 Token 与用户的 openid、session_key 关联并存入 Redis 或数据库。
  4. 将 Token 返回给小程序客户端。
第六步：客户端存储并携带 Token

小程序将 Token 存入本地缓存（wx.setStorage）。后续的所有业务请求，都在 Header 中携带这个 Token，后端通过验证 Token 来识别用户身份。

3. 关键概念 Q&A (面试加分项)

  • Q: 为什么需要 code，直接给 openid 不行吗？
    • A : 出于安全考虑。openid 是用户的永久唯一标识，如果直接在前端传输，极易被截获伪造。通过 code 这个一次性且短命的"中转票据"在服务器间交换，可以确保 openid 只在后端之间流动。
  • Q: session_key 的作用是什么？
    • A : 它是一个对称加密的密钥。当小程序需要获取用户手机号等敏感信息时，微信会返回加密数据，后端必须配合 session_key 才能解密出真实内容。
  • Q: 如何实现静默登录？
    • A : 通常在 app.js 的 onLaunch 中调用 wx.checkSession() 检查 session_key 是否过期。如果没有过期，可以直接使用本地缓存的 Token；如果过期，则重新执行 wx.login()。

4. 总结

小程序拿 code，后端拿 code 换 openid 并生成 Token 返回，后续请求带 Token。

简单伪代码示例：

javascript 复制代码 
wx.login({
  success: (res) => {
    if (res.code) {
      // 发送 res.code 到后台换取 token
      wx.request({
        url: '[https://your-server.com/onLogin](https://your-server.com/onLogin)',
        data: { code: res.code },
        success: (loginRes) => {
          // 全局存储 token
          this.globalData.token = loginRes.data.token;
          // 持久化存储 token
          wx.setStorageSync('token', loginRes.data.token);
        }
      })
    }
  }
})

五、微信小程序路由跳转完全指南

在小程序中，路由管理直接影响到页面栈（Page Stack） 。由于小程序规定页面栈最多只能保留 10 层，因此开发者必须根据业务场景选择最合适的跳转方式。

1. 核心跳转方式对比

微信提供了 5 种主要的跳转 API，它们对页面栈的影响各不相同：

API 功能描述 页面栈变化 适用场景
wx.navigateTo 保留当前页，跳转新页 新页面入栈 (Push) 普通业务进入下一级详情页
wx.redirectTo 关闭当前页，跳转新页 替换栈顶 (Replace) 登录成功后跳转，防止用户回退到登录页
wx.switchTab 跳转到 TabBar 页面 清空所有非 Tab 栈 切换底部导航主功能页
wx.reLaunch 关闭所有页面，重新打开 栈完全清空重置 切换账号、清除状态后回到首页
wx.navigateBack 返回上一页或多页 页面出栈 (Pop) 表单提交后返回、点击自定义返回按钮
相关推荐
AI行业应用研究2 小时前
会务小程序开发成本高？不如看看这个低代码解决方案
大数据·低代码·小程序
azhou的代码园5 小时前
基于微信小程序的图片识别科普系统的设计与实现
vue.js·spring boot·微信小程序·小程序·毕业设计·科普·图片识别
木风未来6 小时前
四川 UI 与数字视觉设计机构排名：政企定制服务实力榜单
ui·小程序·可视化大屏
焦糖玛奇朵婷8 小时前
终于搞清楚了，扭蛋机小程序这么厉害❗
java·服务器·前端·程序人生·小程序
求学中--9 小时前
状态管理一文通：@State、@Prop、@Link、@Provide/Consume全解析
人工智能·小程序·uni-app·wpf·harmonyos
求学中--9 小时前
ArkUI组件库完全指南：从基础组件到自定义装饰器
低代码·华为·小程序·uni-app·harmonyos
喜欢南方姑娘18 小时前
微信小程序热更新-用户打开小程序时检测版本自动更新
微信小程序·小程序·notepad++
一叶星殇18 小时前
高颜值微信小程序 UI 组件库大盘点，助你轻松开发！
微信小程序·小程序
晴天sir18 小时前
微信小程序订阅消息推送实战（Java Spring Boot + Redis）
小程序
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法04零基础教你claude code 接入 deepseek V405Linux 核弹级高危漏洞 CVE-2026-31431 完整修复指南06CC-Switch & Claude 基于 Linux 服务器安装使用指南07裂开！ChatGPT 居然开始要手机号验证，附详细解决方法08CVE-2026-31431 (Copy Fail) 漏洞复现与验证记录092026 年 AI 辅助编程工具全景对比：Copilot、Cursor、Claude Code 与 Codex 深度解析10【AI】2026 年具身智能模型和世界模型总结