鸿蒙Next ctx.measureText()方法在uni-app中跳转页面之后报错异常

鸿蒙Next ctx.measureText()方法在uni-app中跳转页面之后报错异常

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win11
开发工具 HBuilderX
工具版本号 4.52
手机系统 HarmonyOS NEXT
手机版本号 HarmonyOS NEXT Developer Beta2
手机厂商 华为
手机机型 HarmonyOS 5.0.0
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

const ctx = uni.createCanvasContext('at-canvas');  
console.log("createATImg------------11", ctx);  
ctx.font = "italic bold 20px cursive";  
const metrics = ctx.measureText("Hello World", (res) => {  
    console.log("createATImg------------22---ctx.measureText", res);  
});  
console.log("createATImg------------22---ctx.measureText1", metrics);

onLaunch: function() {  
  uni.redirectTo({  
    url: "/pages/index/index",  
    success: () => {},  
    fail: () => {}  
  });   
}

操作步骤：

  1. 如果在app.vue里面，使用uni.redirectTo重新跳到这个页面，使用 ctx.measureText()方法会报错
  2. 使用uni.switchTab跳到第一个tab页面，使用 ctx.measureText()方法会报错
  3. 先使用uni.switchTab跳到第一个tab页面，在使用uni.navigateTo()跳转到下一个页面，使用 ctx.measureText()方法会报错

预期结果：

在不同页面都可以正常获取

实际结果：

使用uni.redirectTo和uni.switchTab跳转页面之后，都报错

bug描述：

在使用 ctx.measureText()方法，获取文本宽度时，空项目直接引用没问题，但是，跳转都会引发报错： 报错异常：Error: napi_call_function failed Error: webview 1 is not found.


更多关于鸿蒙Next ctx.measureText()方法在uni-app中跳转页面之后报错异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

遇到同样问题

更多关于鸿蒙Next ctx.measureText()方法在uni-app中跳转页面之后报错异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在HarmonyOS NEXT环境下使用uni-app canvas API的兼容性问题。根据报错信息"webview 1 is not found"，主要原因是页面跳转后canvas上下文失效导致的。

问题分析：

  1. 在HarmonyOS NEXT环境下，页面跳转(redirectTo/switchTab)会销毁当前webview
  2. 但之前创建的canvas上下文(ctx)仍然保留着对已销毁webview的引用
  3. 调用measureText时无法找到原始webview导致报错

解决方案：

  1. 在页面跳转前手动销毁canvas上下文：
ctx = null
  1. 或者在目标页面的onShow生命周期中重新创建canvas上下文：
onShow() {
  this.ctx = uni.createCanvasContext('at-canvas')
}
  1. 也可以考虑使用setTimeout延迟measureText的调用，确保canvas完全加载：
setTimeout(() => {
  const metrics = ctx.measureText("Hello World")
}, 100)
回到顶部