1. 小程序开发基础概念解析微信小程序作为一种轻量级应用形态其技术架构与传统Web开发有着显著差异。理解小程序的核心设计理念是面试考察的重点方向之一。1.1 小程序与原生App的本质区别小程序采用Hybrid混合开发模式既不是纯Web也不是纯原生。其核心特点包括渲染层与逻辑层分离的双线程架构基于WebComponent的组件化开发受限的JavaScript运行环境无DOM/BOM API特有的生命周期管理机制这种设计带来了启动快、占用资源少的优势但也限制了部分原生能力的调用。在实际项目中我们需要根据功能需求评估是否适合小程序形态。1.2 小程序项目基本结构标准小程序项目包含以下关键文件project ├── app.js # 全局逻辑 ├── app.json # 全局配置 ├── app.wxss # 全局样式 ├── pages/ # 页面目录 │ ├── index/ │ │ ├── index.js # 页面逻辑 │ │ ├── index.json # 页面配置 │ │ ├── index.wxml # 页面结构 │ │ └── index.wxss # 页面样式 └── project.config.json # 项目配置特别注意app.json中的pages数组决定了小程序的路由注册顺序第一个元素将作为启动页。这个配置项在分包加载时尤为重要。2. 核心面试问题深度剖析2.1 小程序生命周期全解析小程序的生命周期分为应用级和页面级两个维度应用生命周期app.jsApp({ onLaunch(options) {}, // 初始化完成时触发 onShow(options) {}, // 启动或从后台进入前台 onHide() {}, // 从前台进入后台 onError(err) {} // 脚本错误监听 })页面生命周期page.jsPage({ onLoad(query) {}, // 页面加载时 onShow() {}, // 页面显示时 onReady() {}, // 初次渲染完成 onHide() {}, // 页面隐藏时 onUnload() {} // 页面卸载时 })常见面试陷阱题// 问题以下代码的输出顺序是什么 Page({ onLoad() { console.log(1) }, onShow() { console.log(2) }, onReady() { console.log(3) this.setData({...}, () { console.log(5) }) }, onHide() { console.log(4) } }) // 正确答案1 → 2 → 3 → 52.2 数据通信机制详解小程序中的数据流向遵循严格的单向数据流原则逻辑层到视图层通过setData方法每次调用都会触发视图层重渲染数据传输需要序列化为字符串存在性能开销// 正确做法合并更新 this.setData({ a: 1, b: 2 }) // 错误示范频繁单独调用 this.setData({a: 1}) this.setData({b: 2})视图层到逻辑层通过事件系统使用自定义属性data-*传递参数button bindtaphandleClick>Page({ handleClick(e) { console.log(e.currentTarget.dataset.id) // 123 } })全局状态管理简单场景使用getApp()获取全局实例复杂状态推荐使用Redux或MobX等库需手动集成3. 性能优化实战方案3.1 首屏加载优化策略分包加载// app.json { subpackages: [{ root: packageA, pages: [pages/cat, pages/dog] }] }主包不超过2MB整个小程序不超过20MB预加载策略// app.js App({ onLaunch() { wx.loadSubpackage({ name: packageA, success(res) { console.log(分包加载完成) } }) } })关键资源优化图片使用CDN加速字体图标替代图片开启HTTP缓存3.2 运行时性能优化setData使用规范避免频繁调用理想频率20次/秒数据量控制在256KB路径更新减少数据传输量// 推荐写法 this.setData({ array[0].text: new })长列表优化方案使用官方recycle-view组件实现虚拟滚动仅渲染可视区域分页加载数据内存管理技巧及时清理定时器移除未使用的页面监听避免全局变量滥用4. 安全与权限管理4.1 常见安全防护措施接口安全使用HTTPS协议实现请求签名验证敏感接口增加token校验数据安全敏感数据不存储在storage中用户信息加密传输防XSS攻击默认已过滤但需注意动态渲染场景代码安全开启代码压缩混淆关键逻辑放服务端定期更新SDK版本4.2 权限系统设计小程序权限体系分为权限类型获取方式使用场景用户信息button.open-typegetUserInfo获取头像昵称地理位置wx.getLocation地图服务相机wx.chooseImage拍照上传支付wx.requestPayment商品购买最佳实践// 检查权限状态示例 wx.getSetting({ success(res) { if (!res.authSetting[scope.userInfo]) { wx.authorize({ scope: scope.userInfo, success() { // 用户已同意 } }) } } })5. 跨平台开发方案对比5.1 主流技术方案评测方案原理优点缺点Taro编译时转换多端统一代码适配层性能损耗uni-app运行时适配生态丰富平台差异处理复杂原生开发直接使用小程序语法最佳性能无法跨平台5.2 选型决策树是否需要同时发布多端是 → 选择Taro/uni-app否 → 进入2是否追求极致性能是 → 原生开发否 → 考虑开发效率选择框架团队技术栈React背景 → TaroVue背景 → uni-app6. 调试与异常监控6.1 开发者工具高级技巧自定义编译条件设置启动参数模拟不同网络环境注入Mock数据性能面板分析查看FPS曲线分析setData调用检测内存泄漏真机调试秘籍使用vConsole输出日志抓取网络请求远程调试功能6.2 线上异常监控方案错误捕获// app.js App({ onError(err) { wx.request({ url: https://api.example.com/log, data: { error: err.stack } }) } })性能监控使用wx.getPerformance获取指标关键节点打点上报建立性能基线日志分级开发环境DEBUG级别生产环境ERROR级别关键流程INFO级别7. 最新API特性解析7.1 云开发深度应用云函数最佳实践// 调用示例 wx.cloud.callFunction({ name: addData, data: { text: test }, success: res {}, fail: err {} })数据库安全规则{ rules: { collection: { .read: auth ! null, .write: doc._openid auth.openid } } }文件存储技巧使用CDN加速设置访问权限实现断点续传7.2 自定义组件进阶组件通信方案属性传递properties事件触发this.triggerEvent获取组件实例this.selectComponent插槽高级用法!-- 定义组件 -- view classwrapper slot nameheader/slot slot/slot /view !-- 使用组件 -- my-component view slotheader标题/view view内容/view /my-component行为扩展技巧使用behaviors共享代码实现抽象基类组合式开发8. 项目架构设计指南8.1 大型项目组织规范推荐目录结构project ├── components/ # 公共组件 ├── models/ # 数据模型 ├── services/ # 接口服务 ├── stores/ # 状态管理 ├── utils/ # 工具函数 └── pages/ # 业务页面 ├── moduleA/ # 业务模块 └── moduleB/8.2 状态管理方案对比方案适用场景集成难度维护成本全局变量简单数据共享低高EventBus跨组件通信中中Redux复杂状态流高低MobX响应式需求中中实现示例Redux版// store.js import { createStore } from ./redux-mini const store createStore(reducer) // page.js const mapState state ({ count: state.count }) const mapDispatch dispatch ({ add: () dispatch({ type: ADD }) }) Page(connect(mapState, mapDispatch)({ onLoad() { this.data.count // 来自store } }))9. 实战问题排查手册9.1 常见异常处理白屏问题排查检查app.json中的pages配置确认页面路径是否正确查看网络请求是否阻塞setData报错分析数据是否包含不可序列化对象单次设置数据量是否过大调用时机是否在生命周期内样式失效处理检查选择器优先级确认样式文件是否引入查看组件样式隔离配置9.2 性能问题速查表现象可能原因解决方案滚动卡顿列表项过于复杂使用虚拟列表点击延迟事件绑定过多事件委托内存增长未清理资源检查定时器/监听加载缓慢资源过大分包/懒加载10. 工程化进阶实践10.1 CI/CD自动化部署脚本示例# 安装依赖 npm install -g wechat-miniprogram/ci # 上传代码 miniprogram-ci upload \ --pp ./dist \ --pkp ./private.key \ --appid wx123456 \ --uv 1.0.0版本管理策略灰度发布机制A/B测试方案紧急回滚流程10.2 自定义预处理流程TypeScript集成// tsconfig.json { compilerOptions: { target: es6, module: commonjs, strict: true } }SCSS编译配置// gulpfile.js const { src, dest } require(gulp) const sass require(gulp-sass) function compileSass() { return src(src/**/*.scss) .pipe(sass().on(error, sass.logError)) .pipe(dest(dist)) }代码规范检查ESLint规则定制Prettier格式统一Git钩子配置
1. 小程序开发基础概念解析微信小程序作为一种轻量级应用形态其技术架构与传统Web开发有着显著差异。理解小程序的核心设计理念是面试考察的重点方向之一。1.1 小程序与原生App的本质区别小程序采用Hybrid混合开发模式既不是纯Web也不是纯原生。其核心特点包括渲染层与逻辑层分离的双线程架构基于WebComponent的组件化开发受限的JavaScript运行环境无DOM/BOM API特有的生命周期管理机制这种设计带来了启动快、占用资源少的优势但也限制了部分原生能力的调用。在实际项目中我们需要根据功能需求评估是否适合小程序形态。1.2 小程序项目基本结构标准小程序项目包含以下关键文件project ├── app.js # 全局逻辑 ├── app.json # 全局配置 ├── app.wxss # 全局样式 ├── pages/ # 页面目录 │ ├── index/ │ │ ├── index.js # 页面逻辑 │ │ ├── index.json # 页面配置 │ │ ├── index.wxml # 页面结构 │ │ └── index.wxss # 页面样式 └── project.config.json # 项目配置特别注意app.json中的pages数组决定了小程序的路由注册顺序第一个元素将作为启动页。这个配置项在分包加载时尤为重要。2. 核心面试问题深度剖析2.1 小程序生命周期全解析小程序的生命周期分为应用级和页面级两个维度应用生命周期app.jsApp({ onLaunch(options) {}, // 初始化完成时触发 onShow(options) {}, // 启动或从后台进入前台 onHide() {}, // 从前台进入后台 onError(err) {} // 脚本错误监听 })页面生命周期page.jsPage({ onLoad(query) {}, // 页面加载时 onShow() {}, // 页面显示时 onReady() {}, // 初次渲染完成 onHide() {}, // 页面隐藏时 onUnload() {} // 页面卸载时 })常见面试陷阱题// 问题以下代码的输出顺序是什么 Page({ onLoad() { console.log(1) }, onShow() { console.log(2) }, onReady() { console.log(3) this.setData({...}, () { console.log(5) }) }, onHide() { console.log(4) } }) // 正确答案1 → 2 → 3 → 52.2 数据通信机制详解小程序中的数据流向遵循严格的单向数据流原则逻辑层到视图层通过setData方法每次调用都会触发视图层重渲染数据传输需要序列化为字符串存在性能开销// 正确做法合并更新 this.setData({ a: 1, b: 2 }) // 错误示范频繁单独调用 this.setData({a: 1}) this.setData({b: 2})视图层到逻辑层通过事件系统使用自定义属性data-*传递参数button bindtaphandleClick>Page({ handleClick(e) { console.log(e.currentTarget.dataset.id) // 123 } })全局状态管理简单场景使用getApp()获取全局实例复杂状态推荐使用Redux或MobX等库需手动集成3. 性能优化实战方案3.1 首屏加载优化策略分包加载// app.json { subpackages: [{ root: packageA, pages: [pages/cat, pages/dog] }] }主包不超过2MB整个小程序不超过20MB预加载策略// app.js App({ onLaunch() { wx.loadSubpackage({ name: packageA, success(res) { console.log(分包加载完成) } }) } })关键资源优化图片使用CDN加速字体图标替代图片开启HTTP缓存3.2 运行时性能优化setData使用规范避免频繁调用理想频率20次/秒数据量控制在256KB路径更新减少数据传输量// 推荐写法 this.setData({ array[0].text: new })长列表优化方案使用官方recycle-view组件实现虚拟滚动仅渲染可视区域分页加载数据内存管理技巧及时清理定时器移除未使用的页面监听避免全局变量滥用4. 安全与权限管理4.1 常见安全防护措施接口安全使用HTTPS协议实现请求签名验证敏感接口增加token校验数据安全敏感数据不存储在storage中用户信息加密传输防XSS攻击默认已过滤但需注意动态渲染场景代码安全开启代码压缩混淆关键逻辑放服务端定期更新SDK版本4.2 权限系统设计小程序权限体系分为权限类型获取方式使用场景用户信息button.open-typegetUserInfo获取头像昵称地理位置wx.getLocation地图服务相机wx.chooseImage拍照上传支付wx.requestPayment商品购买最佳实践// 检查权限状态示例 wx.getSetting({ success(res) { if (!res.authSetting[scope.userInfo]) { wx.authorize({ scope: scope.userInfo, success() { // 用户已同意 } }) } } })5. 跨平台开发方案对比5.1 主流技术方案评测方案原理优点缺点Taro编译时转换多端统一代码适配层性能损耗uni-app运行时适配生态丰富平台差异处理复杂原生开发直接使用小程序语法最佳性能无法跨平台5.2 选型决策树是否需要同时发布多端是 → 选择Taro/uni-app否 → 进入2是否追求极致性能是 → 原生开发否 → 考虑开发效率选择框架团队技术栈React背景 → TaroVue背景 → uni-app6. 调试与异常监控6.1 开发者工具高级技巧自定义编译条件设置启动参数模拟不同网络环境注入Mock数据性能面板分析查看FPS曲线分析setData调用检测内存泄漏真机调试秘籍使用vConsole输出日志抓取网络请求远程调试功能6.2 线上异常监控方案错误捕获// app.js App({ onError(err) { wx.request({ url: https://api.example.com/log, data: { error: err.stack } }) } })性能监控使用wx.getPerformance获取指标关键节点打点上报建立性能基线日志分级开发环境DEBUG级别生产环境ERROR级别关键流程INFO级别7. 最新API特性解析7.1 云开发深度应用云函数最佳实践// 调用示例 wx.cloud.callFunction({ name: addData, data: { text: test }, success: res {}, fail: err {} })数据库安全规则{ rules: { collection: { .read: auth ! null, .write: doc._openid auth.openid } } }文件存储技巧使用CDN加速设置访问权限实现断点续传7.2 自定义组件进阶组件通信方案属性传递properties事件触发this.triggerEvent获取组件实例this.selectComponent插槽高级用法!-- 定义组件 -- view classwrapper slot nameheader/slot slot/slot /view !-- 使用组件 -- my-component view slotheader标题/view view内容/view /my-component行为扩展技巧使用behaviors共享代码实现抽象基类组合式开发8. 项目架构设计指南8.1 大型项目组织规范推荐目录结构project ├── components/ # 公共组件 ├── models/ # 数据模型 ├── services/ # 接口服务 ├── stores/ # 状态管理 ├── utils/ # 工具函数 └── pages/ # 业务页面 ├── moduleA/ # 业务模块 └── moduleB/8.2 状态管理方案对比方案适用场景集成难度维护成本全局变量简单数据共享低高EventBus跨组件通信中中Redux复杂状态流高低MobX响应式需求中中实现示例Redux版// store.js import { createStore } from ./redux-mini const store createStore(reducer) // page.js const mapState state ({ count: state.count }) const mapDispatch dispatch ({ add: () dispatch({ type: ADD }) }) Page(connect(mapState, mapDispatch)({ onLoad() { this.data.count // 来自store } }))9. 实战问题排查手册9.1 常见异常处理白屏问题排查检查app.json中的pages配置确认页面路径是否正确查看网络请求是否阻塞setData报错分析数据是否包含不可序列化对象单次设置数据量是否过大调用时机是否在生命周期内样式失效处理检查选择器优先级确认样式文件是否引入查看组件样式隔离配置9.2 性能问题速查表现象可能原因解决方案滚动卡顿列表项过于复杂使用虚拟列表点击延迟事件绑定过多事件委托内存增长未清理资源检查定时器/监听加载缓慢资源过大分包/懒加载10. 工程化进阶实践10.1 CI/CD自动化部署脚本示例# 安装依赖 npm install -g wechat-miniprogram/ci # 上传代码 miniprogram-ci upload \ --pp ./dist \ --pkp ./private.key \ --appid wx123456 \ --uv 1.0.0版本管理策略灰度发布机制A/B测试方案紧急回滚流程10.2 自定义预处理流程TypeScript集成// tsconfig.json { compilerOptions: { target: es6, module: commonjs, strict: true } }SCSS编译配置// gulpfile.js const { src, dest } require(gulp) const sass require(gulp-sass) function compileSass() { return src(src/**/*.scss) .pipe(sass().on(error, sass.logError)) .pipe(dest(dist)) }代码规范检查ESLint规则定制Prettier格式统一Git钩子配置
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
