全栈手账 订阅 RSS
← 回到列表
小程序

微信小程序原生知识总结与面试题

微信小程序原生开发的系统总结，覆盖四类核心文件、应用与页面生命周期、常用 API、WXML 数据绑定与列表渲染、WXSS 样式特性、自定义组件与性能优化，适合原生开发场景。

读了 8 分钟 更新于 8 月 5 日

一、小程序基础概念

1. 小程序是什么？

  • 微信小程序是一种不需要下载安装即可使用的应用
  • 基于微信生态，实现"触手可及"的用户体验
  • 技术栈：WXML（结构）+ WXSS（样式）+ JavaScript（逻辑）

2. 小程序架构

  • 双线程架构：渲染层（WebView）+ 逻辑层（JSCore）
  • 通信方式：通过 setData 进行数据传递
  • 生命周期：App 生命周期 → Page 生命周期 → Component 生命周期

二、核心文件结构

文本
├── app.js          # 全局逻辑├── app.json        # 全局配置├── app.wxss        # 全局样式├── pages/          # 页面目录│   ├── index/│   │   ├── index.js    # 页面逻辑│   │   ├── index.json  # 页面配置│   │   ├── index.wxml  # 页面结构│   │   └── index.wxss  # 页面样式└── components/     # 自定义组件

三、生命周期详解

App 生命周期

方法 说明
onLaunch 小程序启动时触发（全局只触发一次）
onShow 小程序显示时触发（从后台切到前台）
onHide 小程序隐藏时触发（从前台切到后台）
onError 小程序发生错误时触发

Page 生命周期

方法 说明
onLoad 页面加载时触发（一个页面只触发一次）
onShow 页面显示时触发
onReady 页面初次渲染完成时触发
onHide 页面隐藏时触发
onUnload 页面卸载时触发

四、常用 API

1. 网络请求

javascript
wx.request({  url: 'https://api.example.com/data',  method: 'GET',  data: { key: 'value' },  success: (res) => console.log(res.data),  fail: (err) => console.error(err)})

2. 页面路由

API 说明
wx.navigateTo 保留当前页面，跳转到新页面
wx.redirectTo 关闭当前页面，跳转到新页面
wx.switchTab 跳转到 tabBar 页面
wx.navigateBack 返回上一页

3. 数据缓存

javascript
// 存储wx.setStorageSync('key', 'value')// 读取const value = wx.getStorageSync('key')// 删除wx.removeStorageSync('key')

五、WXML 常用语法

1. 数据绑定

xml
<view>{{ message }}</view>

2. 列表渲染

xml
<view wx:for="{{ list }}" wx:key="id">  {{ item.name }}</view>

3. 条件渲染

xml
<view wx:if="{{ condition }}">显示</view><view wx:else>隐藏</view>

4. 事件绑定

xml
<button bindtap="handleTap">点击</button>

六、WXSS 特性

1. 响应式单位

  • rpx：响应式像素，会根据屏幕宽度自适应
  • 设计稿 750px 宽时，1rpx = 1px

2. 样式导入

css
@import './common.wxss';

3. 选择器

  • 支持：class、id、element、::after、::before
  • 不支持：通配符 *

七、组件化开发

1. 创建组件

json
// components/custom-component/custom-component.json{  "component": true}

2. 使用组件

json
// page.json{  "usingComponents": {    "custom-component": "/components/custom-component/custom-component"  }}

3. 组件通信

  • 父传子：通过 properties 定义属性
  • 子传父：通过 triggerEvent 触发事件

八、性能优化

1. setData 优化

  • 避免频繁调用 setData
  • 合并多个 setData 调用
  • 只更新需要改变的数据

2. 图片优化

  • 使用合适尺寸的图片
  • 使用 webp 格式
  • 开启图片懒加载

3. 分包加载

  • 将大型小程序拆分为多个包
  • 按需加载，提升首屏速度

4. 缓存策略

  • 合理使用本地存储
  • 缓存静态资源

九、常见面试题

基础概念

Q1：小程序和普通网页的区别？

  • 运行环境不同：小程序运行在微信内置浏览器（基于 Chromium）
  • API 不同：小程序有专属 API（如微信支付、位置等）
  • 开发模式不同：小程序有严格的目录结构和生命周期
  • 性能限制：小程序有包体积限制（主包 2MB，分包 20MB）

Q2：小程序的双线程架构是什么？

  • 渲染层：负责页面渲染，运行在 WebView
  • 逻辑层：负责业务逻辑，运行在 JSCore
  • 两者通过 Native 层进行通信，数据传递通过 setData

Q3：小程序的生命周期有哪些？

  • App 生命周期：onLaunch、onShow、onHide、onError
  • Page 生命周期：onLoad、onShow、onReady、onHide、onUnload

进阶问题

Q4：小程序如何实现数据绑定？

  • 使用 {{ }} 语法进行单向绑定
  • 通过 setData 更新数据，触发视图更新
  • 数据变化会触发重新渲染

Q5：小程序的路由方式有哪些？区别是什么？

  • navigateTo：保留当前页面，可返回
  • redirectTo：关闭当前页面，不可返回
  • switchTab：只能跳转到 tabBar 页面
  • reLaunch：关闭所有页面，跳转到新页面

Q6：小程序如何进行网络请求？

  • 使用 wx.request API
  • 需要在 app.json 中配置合法域名
  • 支持 HTTPS 请求

性能优化

Q7：如何优化小程序性能？

  • 减少 setData 调用次数和数据量
  • 使用分包加载
  • 图片懒加载和压缩
  • 使用 wx.createSelectorQuery 异步获取节点信息

Q8：小程序的包体积限制是多少？如何优化？

  • 主包：2MB，分包：20MB
  • 优化：代码压缩、图片优化、分包加载、删除无用代码

实战经验

Q9：小程序如何实现下拉刷新和上拉加载？

  • 在页面配置中开启 enablePullDownRefresh
  • 监听 onPullDownRefresh 事件处理下拉刷新
  • 通过 onReachBottom 事件处理上拉加载

Q10：小程序如何处理跨域问题？

  • 在微信开发者工具中配置域名白名单
  • 开发环境可使用"不校验合法域名"选项
  • 生产环境必须配置正确的 HTTPS 域名

十、注意事项

  1. 域名配置：必须配置 HTTPS 域名，且在小程序后台添加
  2. 包体积：注意控制代码和资源文件大小
  3. 用户隐私：获取用户信息需要用户授权
  4. 兼容性：不同微信版本可能存在差异
  5. 调试工具：使用微信开发者工具进行调试和预览

十一、总结

微信小程序是一种轻量级的应用形态，具有开发效率高、用户体验好等特点。掌握其核心概念、生命周期、API 使用和性能优化技巧，是成为优秀小程序开发者的关键。

前端、后端、部署、客服都是我一个人。写这里的东西都是真踩过的坑，不是抄来的教程。