uni-app app复制文本后生成canvas保存图片分享到微信剪切板内容没有了 怎么解决

uni-app app复制文本后生成canvas保存图片分享到微信剪切板内容没有了 怎么解决

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| Mac      | 14.6.1 | HBuilderX    |

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：4.36

手机系统：iOS

手机系统版本号：iOS 18

手机厂商：苹果

手机机型：12 por

页面类型：vue

vue版本：vue2

打包方式：云端

示例代码：
```this.$refs.painter.render(this.poster).then(() => {
uni.setClipboardData({
data: `123`,
success: () => {
uni.showToast({
title: '复制成功',
icon: 'none'
})
this.$refs.painter.canvasToTempFilePath({
fileType: "png",
// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
pathType: 'url',
quality: 1,
success: (res) => {
if (type == 'wx') {
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 2,
imageUrl: res.tempFilePath,
success: function (res) {
console.log("success:" + JSON.stringify(res));
}
})
} else {
uni.share({
provider: "weixin",
scene: "WXSceneTimeline",
type: 2,
imageUrl: res.tempFilePath,
success: function (res) {
console.log("success:" + JSON.stringify(res));
}
})
}
}
})
}
})
})

操作步骤： uni-app app复制文本后生成canvas图片分享到微信剪切板内容没有了

预期结果： uni-app app复制文本后生成canvas图片分享到微信剪切板有内容

实际结果： uni-app app复制文本后生成canvas图片分享到微信剪切板内容没有了

bug描述： uni-app app复制文本后生成canvas图片分享到微信剪切板内容没有了 怎么解决


更多关于uni-app app复制文本后生成canvas保存图片分享到微信剪切板内容没有了 怎么解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app app复制文本后生成canvas保存图片分享到微信剪切板内容没有了 怎么解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题分析： 在您的代码中，当执行canvasToTempFilePath和微信分享操作时，剪切板内容会被清空。这是因为iOS系统对剪切板操作有严格的限制，多个异步操作同时进行时可能会导致剪切板内容丢失。

解决方案：

  1. 调整执行顺序，先完成canvas操作再处理剪切板：
this.$refs.painter.render(this.poster).then(() => {
  this.$refs.painter.canvasToTempFilePath({
    fileType: "png",
    pathType: 'url',
    quality: 1,
    success: (res) => {
      // 先处理分享
      const sharePromise = type === 'wx' ? 
        uni.share({
          provider: "weixin",
          scene: "WXSceneSession",
          type: 2,
          imageUrl: res.tempFilePath
        }) : 
        uni.share({
          provider: "weixin",
          scene: "WXSceneTimeline",
          type: 2,
          imageUrl: res.tempFilePath
        });
      
      sharePromise.then(() => {
        // 分享完成后再设置剪切板
        uni.setClipboardData({
          data: `123`,
          success: () => {
            uni.showToast({
              title: '复制成功',
              icon: 'none'
            });
          }
        });
      });
    }
  });
});
  1. 或者添加延迟确保操作顺序：
setTimeout(() => {
  uni.setClipboardData({
    data: `123`,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'none'
      });
    }
  });
}, 500);  // 适当延迟
回到顶部