uni-app uni.canvasToTempFilePath 在鸿蒙内测微信上报错

发布于 1周前 作者 caililin 来自 Uni-App

uni-app uni.canvasToTempFilePath 在鸿蒙内测微信上报错

项目 信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 4.29
第三方开发者工具版本号 4.29
基础库版本号 3.6.2
项目创建方式 HBuilderX

示例代码：

uni.canvasToTempFilePath({  
    canvasId: options.canvasId,  
    fileType: options.fileType,  
    width: options.size,  
    height: options.size,  
    destWidth: options.size,  
    destHeight: options.size,  
    success: function(res) {  
        options.success && options.success(res.tempFilePath);  
    },  
    fail: function(error) {  
        options.fail && options.fail(error);  
    },  
    complete: function(res) {  
        options.complete && options.complete(res);  
    }  
}, options.componentInstance);

操作步骤：

  • 生成二维码

预期结果：

  • canvas导出本地临时路径失败

实际结果：

  • 参数不合法，但线上安卓和ios都是正常的，鸿蒙会报错

bug描述：

"errno": 101, "errMsg": "canvasToTempFilePath:fail :jsapi invalid request data"

使用uqrcode，js版本，生成二维码。 调用平台：鸿蒙内测版微信，调用该方法报错


更多关于uni-app uni.canvasToTempFilePath 在鸿蒙内测微信上报错的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
5 回复

这个和微信是什么关系，是开发鸿蒙 app 报错，还是鸿蒙微信小程序真机调试报错？

更多关于uni-app uni.canvasToTempFilePath 在鸿蒙内测微信上报错的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


应该是鸿蒙不兼容这个方法吧

回复 1***@qq.com: 这个你到微信开发者社区进行反馈吧，有可能是微信这边还在适配中

回复 1***@qq.com: 如果确定是uniapp 的问题你再回复我，我还没有体验过鸿蒙微信的小程序，暂时无法确认你到问题

在处理uni-app中的uni.canvasToTempFilePath方法在鸿蒙内测微信上报错的问题时，首先需要确保你使用的uni-app和相关依赖库都是最新版本，因为新版本可能已经修复了与鸿蒙系统的兼容性问题。然而，如果问题依然存在，你可以尝试以下方法来定位和解决问题。

检查Canvas上下文

确保你在调用uni.canvasToTempFilePath之前正确地设置了Canvas的上下文。以下是一个简单的示例，展示如何在uni-app中使用Canvas并导出图片：

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>
    <button @click="exportCanvas">导出图片</button>
  </view>
</template>

<script>
export default {
  methods: {
    drawCanvas() {
      const ctx = uni.createCanvasContext('myCanvas');
      ctx.setFillStyle('red');
      ctx.fillRect(10, 10, 150, 75);
      ctx.draw();
    },
    exportCanvas() {
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          console.log('临时文件路径：', res.tempFilePath);
          // 可以在这里将图片路径传给预览组件或者上传服务器
        },
        fail: (err) => {
          console.error('导出失败：', err);
        }
      });
    }
  },
  onLoad() {
    this.drawCanvas();
  }
}
</script>

兼容性处理

如果上述代码在鸿蒙内测微信上仍然报错，可以尝试添加兼容性处理代码，比如检查系统版本或者捕获异常并给出用户友好的提示：

exportCanvas() {
  if (uni.getSystemInfoSync().platform === 'harmonyos') {
    uni.showToast({
      title: '鸿蒙系统暂不支持该功能',
      icon: 'none'
    });
    return;
  }
  uni.canvasToTempFilePath({
    canvasId: 'myCanvas',
    success: (res) => {
      console.log('临时文件路径：', res.tempFilePath);
    },
    fail: (err) => {
      console.error('导出失败，请检查Canvas是否正确绘制：', err);
      uni.showToast({
        title: '导出失败，请重试',
        icon: 'none'
      });
    }
  });
}

结论

由于鸿蒙系统是一个相对较新的操作系统，uni-app及其相关API的兼容性可能需要时间来完善。如果上述方法都不能解决问题，建议向uni-app的官方社区或者微信开发者社区反馈问题，以便开发者能够尽快修复相关的兼容性问题。同时，也可以考虑使用其他方式（如服务端生成图片）作为临时解决方案。

回到顶部