知识库

Appearance

小程序高频面试题 ​

1. 小程序的生命周期有哪些？ ​

参考答案： 小程序生命周期分为应用生命周期和页面生命周期：

应用生命周期（App）：

  • onLaunch：小程序初始化完成时触发（全局只触发一次）
  • onShow：小程序启动或从后台进入前台时触发
  • onHide：小程序从前台进入后台时触发
  • onError：小程序发生脚本错误或API调用失败时触发

页面生命周期（Page）：

  • onLoad：页面加载时触发，只会调用一次
  • onShow：页面显示/切入前台时触发
  • onReady：页面初次渲染完成时触发，只会调用一次
  • onHide：页面隐藏/切入后台时触发
  • onUnload：页面卸载时触发

2. 小程序的双线程架构是什么？ ​

参考答案： 小程序采用双线程架构，分为渲染层和逻辑层：

渲染层（View Thread）：

  • 由WebView线程负责
  • 处理WXML模板和WXSS样式的渲染
  • 处理用户交互事件
  • 多个页面对应多个WebView线程

逻辑层（App Service Thread）：

  • 由JavaScript引擎线程负责
  • 运行JS脚本，处理数据逻辑
  • 调用小程序API
  • 整个小程序只有一个逻辑层线程

通信机制：

  • 两个线程通过系统层的JSBridge进行通信
  • 数据传输需要序列化，不能直接传递函数等复杂对象
  • 这种架构保证了渲染层的安全性和稳定性

3. 小程序的数据绑定机制是怎样的？ ​

参考答案： 小程序使用单向数据绑定机制：

数据绑定语法：

javascript
// 页面数据定义
data: {
    message: 'Hello World',
    userInfo: {
        name: '张三',
        age: 25
    }
}
html
<!-- WXML中使用 -->
<view>{{message}}</view>
<view>{{userInfo.name}}</view>

数据更新：

  • 必须使用setData()方法更新数据
  • setData()会触发视图层重新渲染
  • 支持部分更新：this.setData({'userInfo.name': '李四'})

注意事项：

  • 不能直接修改this.data
  • setData()是异步的
  • 频繁调用setData()会影响性能

4. 小程序的路由跳转方式有哪些？ ​

参考答案： 小程序提供多种路由跳转方式：

1. wx.navigateTo() ​

  • 保留当前页面，跳转到应用内的某个页面
  • 可以使用wx.navigateBack()返回
  • 页面栈最多10层

2. wx.redirectTo() ​

  • 关闭当前页面，跳转到应用内的某个页面
  • 不能返回到被关闭的页面

3. wx.switchTab() ​

  • 跳转到tabBar页面，并关闭其他所有非tabBar页面

4. wx.reLaunch() ​

  • 关闭所有页面，打开到应用内的某个页面

5. wx.navigateBack() ​

  • 关闭当前页面，返回上一页面或多级页面

参数传递：

javascript
wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=test'
})

5. 小程序的组件化开发如何实现？ ​

参考答案： 小程序支持自定义组件开发：

组件创建：

javascript
// component.js
Component({
  properties: {
    title: {
      type: String,
      value: '默认标题'
    }
  },
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.setData({
        count: this.data.count + 1
      })
      // 触发自定义事件
      this.triggerEvent('countchange', {
        count: this.data.count
      })
    }
  }
})

组件使用：

json
// 页面json配置
{
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}
html
<!-- 页面wxml -->
<my-component
  title="自定义标题"
  bind:countchange="onCountChange"
></my-component>

组件通信：

  • 父传子：通过properties
  • 子传父：通过triggerEvent触发自定义事件
  • 获取组件实例：使用selectComponent

6. 小程序的性能优化策略有哪些？ ​

参考答案： 小程序性能优化主要从以下几个方面：

1. 代码包优化 ​

  • 清理无用代码和资源
  • 图片压缩，使用webp格式
  • 分包加载，按需加载
  • 使用CDN存储大文件

2. 渲染优化 ​

  • 减少setData的调用频率和数据量
  • 避免频繁切换显示隐藏
  • 使用wx:if而不是hidden控制大块内容
  • 长列表使用虚拟化或分页

3. 网络优化 ​

  • 合并网络请求
  • 使用缓存策略
  • 预加载关键数据
  • 图片懒加载

4. 内存优化 ​

  • 及时清理定时器和监听器
  • 避免内存泄漏
  • 合理使用全局数据

5. 体验优化 ​

  • 添加loading状态
  • 骨架屏占位
  • 错误边界处理

7. 小程序的存储方式有哪些？ ​

参考答案： 小程序提供多种数据存储方式：

1. 本地存储 ​

javascript
// 同步存储
wx.setStorageSync('key', 'value')
const value = wx.getStorageSync('key')
wx.removeStorageSync('key')
wx.clearStorageSync()

// 异步存储
wx.setStorage({
  key: 'key',
  data: 'value'
})

2. 全局数据 ​

javascript
// app.js
App({
  globalData: {
    userInfo: null
  }
})

// 其他页面使用
const app = getApp()
app.globalData.userInfo = userInfo

3. 页面数据 ​

  • 通过data定义
  • 使用setData更新

4. 云存储 ​

  • 云开发数据库
  • 云文件存储

存储限制：

  • 本地存储上限10MB
  • 单个key存储上限1MB
  • 数据类型支持Object、String、Number等

8. 小程序的网络请求如何处理？ ​

参考答案： 小程序网络请求主要使用wx.request()：

基本用法：

javascript
wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  data: {
    id: 123
  },
  header: {
    'content-type': 'application/json'
  },
  success: res => {
    console.log(res.data)
  },
  fail: err => {
    console.error(err)
  }
})

封装请求：

javascript
const request = (url, options = {}) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseURL + url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        Authorization: wx.getStorageSync('token'),
        ...options.header
      },
      success: resolve,
      fail: reject
    })
  })
}

注意事项：

  • 域名必须���后台配置合法域名
  • 默认超时时间60秒
  • 并发请求限制10个
  • 支持HTTP/HTTPS，生产环境必须HTTPS

9. 小程序的事件系统是怎样的？ ​

参考答案： 小程序事件系统包括事件绑定、事件对象和事件传播：

事件绑定：

html
<!-- 冒泡事件 -->
<view bindtap="handleTap">点击我</view>

<!-- 非冒泡事件 -->
<view catchtap="handleTap">点击我</view>

<!-- 互斥事件 -->
<view mut-bind:tap="handleTap">点击我</view>

事件对象：

javascript
handleTap(event) {
    console.log(event.type) // 事件类型
    console.log(event.target) // 触发事件的组件
    console.log(event.currentTarget) // 绑定事件的组件
    console.log(event.detail) // 额外信息
    console.log(event.touches) // 触摸事件的触摸点信息
}

数据传递：

html
<view bindtap="handleTap" data-id="123" data-name="test"> 点击我 </view>
javascript
handleTap(event) {
    const { id, name } = event.currentTarget.dataset
    console.log(id, name) // 123, test
}

事件类型：

  • 触摸事件：touchstart、touchmove、touchend
  • 点击事件：tap、longpress
  • 表单事件：input、submit、reset
  • 自定义事件：通过triggerEvent触发

10. 小程序与H5的区别是什么？ ​

参考答案： 小程序与H5在多个方面存在显著区别：

运行环境：

  • 小程序：运行在微信客户端，双线程架构
  • H5：运行在浏览器中，单线程

开发技术：

  • 小程序：WXML、WXSS、JavaScript
  • H5：HTML、CSS、JavaScript

功能权限：

  • 小程序：可调用更多原生API（摄像头、位置、支付等）
  • H5：受浏览器安全策略限制

性能表现：

  • 小程序：接近原生应用体验，启动更快
  • H5：依赖网络加载，可能存在白屏

分发方式：

  • 小程序：通过微信分发，无需下载安装
  • H5：通过链接访问，需要浏览器

开发限制：

  • 小程序：代码包大小限制、API限制
  • H5：跨域限制、浏览器兼容性

用户体验：

  • 小程序：统一的交互规范，体验一致
  • H5：体验取决于具体实现和浏览器

基于 VitePress 的本地知识库

Copyright © 2026