uniapp 小程序 点击按钮截屏

UniApp是一种基于Vue.js开发的跨平台应用框架，可以同时开发iOS、Android、H5和小程序等多个平台的应用。UniApp小程序是指使用UniApp框架开发的小程序。

要实现在UniApp小程序中点击按钮截屏的功能，可以按照以下步骤进行操作：

1. 在需要添加截屏功能的页面中，添加一个按钮元素，例如：

<template>
  <view>
    <button @click="captureScreen">点击截屏</button>
  </view>
</template>

2. 在页面的methods中定义captureScreen方法，用于触发截屏操作：

methods: {
  captureScreen() {
    uni.showToast({
      title: '截屏中...',
      icon: 'loading',
      duration: 2000
    });
    
    // 使用uni-app提供的api进行截屏操作
    uni.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: uni.getSystemInfoSync().windowWidth,
      height: uni.getSystemInfoSync().windowHeight,
      destWidth: uni.getSystemInfoSync().windowWidth,
      destHeight: uni.getSystemInfoSync().windowHeight,
      canvasId: 'canvas',
      success: (res) => {
        // 截屏成功后的回调函数
        uni.hideToast();
        console.log(res.tempFilePath); // 截屏成功后的临时文件路径
        // 可以将截屏后的图片路径保存到本地或上传到服务器等操作
      },
      fail: (err) => {
        // 截屏失败后的回调函数
        uni.hideToast();
        console.log(err);
      }
    }, this);
  }
}

3. 在页面的wxml中添加一个canvas元素，并设置id为"canvas"，用于截取屏幕内容：

<template>
  <view>
    <button @click="captureScreen">点击截屏</button>
    <canvas id="canvas" style="display: none;"></canvas>
  </view>
</template>

这样，当用户点击按钮时，就会触发截屏操作，并将截屏后的图片路径输出到控制台。