uni-app 在使用cli创建的uni-ts项目中使用uni.createCanvasContext和uni.createIntersectionObserver时出现报错

uni-app 在使用cli创建的uni-ts项目中使用uni.createCanvasContext和uni.createIntersectionObserver时出现报错

项目信息 版本/方式
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 10.15.7
第三方开发者工具版本号 1.05.2018182
基础库版本号 2.19.2
项目创建方式 CLI
CLI版本号 2.0.0-31920210609001

操作步骤：

预期结果：

不报错

实际结果：

出现报错

bug描述：

出现了如附件所示的报错

搜索了社区和微信内容，给出的结果均是开发者工具错误。
但是我自己试了下，使用微信官方工具直接创建相同层级的自定义组件，使用这个两个api没有报错。
使用HBuilderX创建uni-app js/ts项目也没有出现这个错误。
我使用cli创建项目时就会报这个错误
以上都使用的同一个版本的微信开发者工具

这个报错好像不影响正常使用，但是都是报错这看着就很难受。
官方给看看？


更多关于uni-app 在使用cli创建的uni-ts项目中使用uni.createCanvasContext和uni.createIntersectionObserver时出现报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 在使用cli创建的uni-ts项目中使用uni.createCanvasContext和uni.createIntersectionObserver时出现报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 CLI 创建的 uni-ts 项目中，uni.createCanvasContext 和 uni.createIntersectionObserver 报错通常是由于 TypeScript 类型定义问题导致的。这两个 API 在微信小程序中可用，但在 uni-app 的 TypeScript 项目中，类型检查可能较为严格，容易触发编译警告或错误。

原因分析：

  1. 类型定义缺失或版本不匹配：CLI 创建的 uni-ts 项目可能使用了较新的 TypeScript 配置或 @dcloudio/types 包，其中对部分 API 的类型定义不完整，导致 TypeScript 编译器无法识别这些方法。
  2. 作用域问题：在自定义组件中使用时，如果未正确定义组件类型或生命周期，TypeScript 可能无法推断 API 的可用性。
  3. 编译环境差异：与 HBuilderX 创建的 js/ts 项目相比，CLI 项目的构建流程和配置可能不同，例如使用了不同的 tsconfig.json 规则，导致类型检查更严格。

解决方案：

  1. 检查类型定义版本：确保 @dcloudio/types 包为最新版本，可通过 npm update [@dcloudio](/user/dcloudio)/types 更新。如果问题依旧，尝试在 tsconfig.json 中添加 "skipLibCheck": true 跳过库类型检查，但这可能隐藏其他错误。
  2. 显式类型声明：在使用 API 时，通过 (uni as any).createCanvasContext 或 (uni as any).createIntersectionObserver 临时绕过 TypeScript 检查。这能消除报错，但会失去类型安全。
  3. 自定义类型扩展：在项目中创建 shims-uni.d.ts 文件，声明缺失的类型：
    declare namespace UniApp {
  interface Uni {
    createCanvasContext(canvasId: string, componentInstance?: any): any;
    createIntersectionObserver(componentInstance?: any, options?: any): any;
  }
}
  4. 验证运行环境：确认 API 仅在微信小程序平台调用，可通过条件编译避免其他平台报错：
    // #ifdef MP-WEIXIN
const ctx = uni.createCanvasContext('canvasId');
// #endif
回到顶部