uni.getScreenCapture 仅在微信小程序(基础库2.25.0+)和支付宝小程序中真正可用,H5、App、QQ小程序、快应用均不支持;其他方案如html2canvas存在白屏、错位、不兼容cover组件等硬伤。
uni-app 截屏 API 在哪些平台真正可用
uni-app 官方的 uni.canvastotempfilepath 和 uni.createselectorquery 都不能直接截整个屏幕;真正能截屏的只有 uni.getscreencapture,但它只在微信小程序(基础库 2.25.0+)和支付宝小程序中可用,h5、app(ios/android)、qq 小程序、快应用全都不支持。
常见错误现象:uni.getScreenCapture is not a function 或调用后静默失败,基本就是当前环境不支持。
- 微信小程序:需在
manifest.json中配置"mp-weixin" → "permission" → "scope.screenCapture": true,且用户首次调用会弹授权框 - App 端必须走原生插件或自定义基座:比如用
uni-app的nativePlugins集成 iOS 的UIGraphicsImageRenderer或 Android 的MediaProjection,纯 JS 无解 - H5 完全不可行——浏览器没权限访问屏幕像素,
html2canvas只能“模拟”截图,不包含 video、iframe、canvas 内容,也不反映真实滚动位置
微信小程序里调用 uni.getScreenCapture 的正确姿势
这不是个普通 API:它不返回图片路径,而是返回一个可播放的 screenCaptureContext 对象,再通过 .start() 和 .stop() 控制录制,最终保存为本地文件。想“点一下截一张图”,得绕道用 canvas + dom-to-image 或 web-view 注入方式,但那不是真截屏。
实操建议:
- 先检查环境:
if (uni.getSystemInfoSync().platform === 'ios' || uni.getSystemInfoSync().platform === 'android') { /* 不走这条路 */ } - 调用前确保已申请权限:
uni.authorize({ scope: 'scope.screenCapture' }),否则getScreenCapture直接报错 -
stop()后拿到的tempFilePath是临时路径,需立刻用uni.saveFile持久化,否则下次启动就失效 - 别在
onLoad里直接调,容易因页面未渲染完成导致黑屏——建议加setTimeout延迟 100ms 或监听onReady
App 端替代方案:用原生插件封装截图能力
uni-app 的 App 截图本质是调用原生 SDK,官方不提供,必须自己写或找成熟插件。比如 DCloud 插件市场里的 screen-capture(iOS)或 android-screenshot(Android),它们暴露统一的 JS 接口,但底层逻辑完全不同。
关键差异点:
- iOS 插件通常基于
UIGraphicsImageRenderer,能截当前 window,但无法截 StatusBar 或其他 App;若用了uni.navigateTo打开的 web-view,里面内容可能空白 - Android 插件依赖
MediaProjection,需要用户手动授权“屏幕录制”,第一次调用会跳系统弹窗;如果 App 被后台杀死,MediaProjection实例就失效,无法续截 - 参数上,iOS 插件常支持
quality(0.1–1.0)、type(png/jpg),Android 插件则多一个isFull开关控制是否包含状态栏 - 性能影响明显:Android 全屏截图耗时约 300–800ms,期间 UI 会卡顿;iOS 相对快,但大分辨率下生成 PNG 文件体积可能超 5MB
为什么不用 html2canvas?它在 uni-app 里有哪些硬伤
很多开发者想用 html2canvas “曲线救国”,但它在 uni-app 多端运行时问题密集,不是简单引入就能用。
典型翻车场景:
- 在 App 端(尤其是 iOS),
canvas渲染层与 webview 渲染层不同步,经常截出白屏或错位;transform、filter、mask属性全被忽略 - 微信小程序里,
html2canvas无法访问cover-view和cover-image,而 uni-app 的按钮、地图、视频组件大量依赖这些,结果就是关键 UI 元素消失 - H5 下看似能跑,但遇到
position: fixed的导航栏,截图会把它按文档流位置画,而不是固定在顶部——滚动后截图完全错乱 - 它不处理跨域图片,哪怕只是本地
static目录下的.png,如果没配好CORS或没走base64内联,就会报Failed to execute 'toDataURL' on 'HTMLCanvasElement'
真要压着用,至少把目标节点设为 <view class="screenshot-root"> 并确保所有子元素都 inline-style 化,避免任何 CSS-in-JS 或 scoped 样式干扰。
复杂点从来不在 API 调用那一行,而在你默认“截的是画面”时,其实面对的是三套渲染机制、两套权限模型、四种生命周期钩子——哪个环节松动,截图就漏光。

















