当前位置：首页 > article >正文

【面试】【前端】【微信小程序】微信小程序面试内容总结

article 2025/1/30 12:22:27

微信小程序作为轻量化的应用平台，是前端开发者的重要技能之一。在面试中，微信小程序的考察内容主要围绕基础知识、开发技能、性能优化以及项目经验展开。以下是面试内容的总结。

(1) 小程序的基本架构
- 三层架构：视图层（WXML + WXSS）、逻辑层（JavaScript）、数据层（双向绑定）。
- MVVM 模型：小程序通过数据绑定（Data Binding）和事件系统实现视图层与逻辑层的分离。
(2) 小程序文件结构
- 必备文件：
  - app.js：全局逻辑文件，注册小程序。
  - app.json：全局配置文件，定义页面路径、窗口样式、底部导航等。
  - app.wxss：全局样式文件。
- 页面文件：由 .wxml, .wxss, .js, .json 四部分组成。
(3) 小程序生命周期
- 全局生命周期：onLaunch（初始化）、onShow（进入前台）、onHide（进入后台）。
- 页面生命周期：onLoad（加载）、onShow（显示）、onReady（初次渲染完成）、onHide（隐藏）、onUnload（卸载）。

(1) 双向数据绑定
- 使用 this.setData 方法更新页面的数据并触发视图更新。
(2) 组件化开发
- 自定义组件：通过 Component 构造器定义组件，支持属性传递（properties）、事件通信（triggerEvent）。
- 原生与第三方组件库：如使用 Vant Weapp、WeUI 等提升开发效率。
(3) 网络请求
- 使用 wx.request 发起 HTTP 请求，结合小程序云开发（云函数）实现后端接口调用。
- 注意处理跨域问题，通常通过配置合法域名解决。
(4) 小程序路由跳转
- 支持页面间的跳转（navigateTo、redirectTo、switchTab、reLaunch），传递参数通过 URL 查询参数或全局变量实现。
(5) 数据缓存与存储
- 使用 wx.setStorage 和 wx.getStorage 进行本地存储。
- 配合云开发的数据库实现实时数据存储。

(1) 页面性能
- 减少 setData 调用：仅更新视图需要的数据，避免大数据量操作。
- 使用懒加载技术：例如图片的 lazy-load 属性。
(2) 代码优化
- 合理拆分代码，避免单个页面文件过大。
- 使用异步加载（如动态加载分包）。
(3) 资源优化
- 图片压缩：选择合适格式（如 PNG、JPG、WebP）。
- 减少 HTTP 请求：通过合并资源、使用 CDN 加速。
(4) 使用小程序云开发
- 减少接口请求次数，降低后端压力。
- 通过云函数处理复杂逻辑。

(1) 项目开发流程
- 需求分析：根据用户需求设计小程序功能模块。
- 技术选型：使用自定义组件或第三方组件库提升效率。
- 接口设计：与后端协商接口格式和数据交互方式。
(2) 常见场景案例
- 电商小程序：商品列表、购物车、支付功能实现。
- 社交小程序：用户登录、好友系统、消息推送。
- 工具类小程序：数据统计、图表展示、生成海报。
(3) 问题解决思路
- 性能问题：优化数据加载和页面渲染逻辑。
- 跨端问题：兼容 iOS 和 Android 的差异，如样式和功能表现。