微信小程序截屏与录屏功能详解

canglingyue2025-09-08 12:24

微信小程序提供了丰富的API支持截屏和录屏功能，适用于多种场景，如教育类应用的课程录制、游戏类应用的精彩瞬间分享、电商类应用的商品展示等。以下将详细介绍实现方法和应用案例。

截屏功能实现

截屏功能通过调用wx.canvasToTempFilePath或wx.captureScreenAPI实现。适用于用户需要保存当前页面内容时。

javascript 复制代码

// 监听用户截屏事件
wx.onUserCaptureScreen(() => {
  wx.captureScreen({
    success(res) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success() {
          wx.showToast({ title: '截图保存成功' });
        }
      });
    }
  });
});

应用案例：在线教育平台学生需要保存课件内容，触发截屏后自动保存至相册。

录屏功能实现

录屏功能通过wx.startScreenRecording和wx.stopScreenRecordingAPI实现。适用于需要录制操作流程的场景。

javascript 复制代码

// 开始录屏
const recorder = wx.getScreenRecorder();
recorder.start({
  success() {
    console.log('录屏开始');
  }
});

// 结束录屏
recorder.stop({
  success(res) {
    wx.saveVideoToPhotosAlbum({
      filePath: res.tempFilePath,
      success() {
        wx.showToast({ title: '视频保存成功' });
      }
    });
  }
});

应用案例：游戏玩家录制通关过程，结束后自动生成视频文件并保存。

画布内容导出

对于自定义绘制内容，可通过wx.canvasToTempFilePath导出为图片。

javascript 复制代码

const query = wx.createSelectorQuery();
query.select('#myCanvas').fields({ node: true, size: true })
  .exec((res) => {
    const canvas = res[0].node;
    wx.canvasToTempFilePath({
      canvas,
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath
        });
      }
    });
  });

应用案例：设计类小程序用户创作完成后，导出作品为图片分享至朋友圈。

注意事项

截屏和录屏功能需要用户授权，需在app.json中配置相关权限。
录屏文件较大时需考虑存储空间和上传限制。
iOS和Android系统对录屏时长可能有不同限制。

通过合理使用这些API，可为小程序增加更多交互和分享的可能性，提升用户体验。具体实现时需根据业务场景调整参数和交互流程。