uni-app canvas 支付宝小程序运行报错

uni-app canvas 支付宝小程序运行报错

开发环境 版本号 项目创建方式
Windows 22H2 HBuilderX

操作步骤：

<canvas  canvas-id="slide-canvas" id="slide-canvas"  :disable-scroll="true"></canvas>  
this.ctx = uni.createCanvasContext('slide-canvas')

预期结果：

支付宝运行正常

实际结果：

支付宝运行卡顿

bug描述：

<canvas  canvas-id="slide-canvas" id="slide-canvas"  :disable-scroll="true"></canvas>  

this.ctx = uni.createCanvasContext('slide-canvas')

在支付宝小程序中调用 uni.createCanvasContext 一直报错 Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. 运行过程中导致支付宝小程序开发者工具卡死，真机运行出现绘画严重卡顿

后面想到另外一种方法 但是又出现另外的问题

<canvas  canvas-id="slide-canvas" id="slide-canvas"  type="2d"  :disable-scroll="true"></canvas>  

// #ifdef MP-ALIPAY  
my.createSelectorQuery().select('#slide-canvas').node().exec((res) => {  
    this.canvas = res[0].node  
    this.ctx = this.canvas.getContext('2d')  
});  

// #endif

使用支付小程序提供的api，运行时支付宝开发者工具的模拟器运行正常 ，但是真机运行后Android运行失败也无任何报错提示，真机ios正常

后面反复验证以为我代码问题，直接新建了hbuildex 提供的demo项目 <Hello uni-app> ,官方的uni-app框架演示canvas同样出现上述中 Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. 的问题，严重卡顿问题

没辙了


更多关于uni-app canvas 支付宝小程序运行报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

20 回复

感谢反馈，vue2 还是 vue3 ？ uniapp 编译的代码并不会区分运行平台，看到你说真机 ios 代码可以，安卓不可以。经过你测试只有真机安卓会有问题，你创建一个原生阿里小程序是否会出现这个问题？
看是宿主环境的问题，还是代码不兼容。

更多关于uni-app canvas 支付宝小程序运行报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


自己项目中代码使用的是uni-app vue2, 使用支付宝小程序原生代码开发 canvas绘画在真机Android是正常运行的

回复 d***@163.com: 那就奇怪了，我看看

回复 DCloud_UNI_OttoJi: 问题有定位到吗？或者有没有其它解决方案先临时用用

回复 d***@163.com: 解决了吗，我目前也是遇到这个问题

回复 undo_2024: 没有，ISSUES管理系统都提bug了，官方没啥反馈，估计又是冷处理

回复 d***@163.com: 经过我测试，安卓真机可以正常使用 canvas，需要注意的是，支付宝小程序需要开启新版写法，具体看文档。你提到的 hello uni-app 线上也卡顿，那是因为官方没有对支付宝小程序做兼容使用的是废弃的旧版写法，性能较差，后面会对支付宝的 canvas 独立编写逻辑

回复 DCloud_UNI_OttoJi: 新版写法是什么？文档里只提到uni.createCanvasContext 方法

回复 d***@163.com: 支付宝小程序的 canvas 有新版和旧版，具体可以参考 https://opendocs.alipay.com/mini/component/canvas?pathHash=d0b85da4

回复 DCloud_UNI_OttoJi: 我上面的描述第二种情况，就是支付宝小程序新版canvas 写法，一样有问题

回复 d***@163.com: 看我下面回复，我提供了使用代码。请参考我的写法进行修改

提供你到完整代码吧，经过我测试 vue2 支付宝小程序 安卓真机无异常
补充，我修改了你提到的语法，经过我测试 vue2+小米 13 支付吧小程序展示正常
newRender() {
uni
.createSelectorQuery()
.select("#canvas") // 在 WXML 中填入的 id
.node((res) => {
const element = res.node; // res.context;
const context = element.getContext(“2d”);
// 绘制红色正方形
// context.fillStyle = “rgb(200, 0, 0)”;
// context.fillRect(10, 10, 50, 50);
// // 绘制蓝色半透明正方形
// context.fillStyle = “rgba(0, 0, 200, 0.5)”;
// context.fillRect(30, 30, 50, 50);
// context.draw();
context.beginPath()
context.lineCap = ‘round’
context.lineWidth = 20
context.moveTo(20, 20)
context.lineTo(20, 100)
context.lineTo(150, 100)
context.strokeStyle = ‘#ff0000’
context.stroke()

                })  
                .exec();  
        }  
    },
<template> <view class="content">
hi
<text>这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text> 
<view>新版写法 指定 type 和 onReady</view>  
<canvas  
  id="canvas"  
  canvas-id="canvas"  
  type="2d"  
  width="200"  
  height="200"  
  style="width: 100px; height: 100px; border: 1px solid red"  
  @ready="newRender"  
></canvas>
</view> </template> <script> export default { data() { return { title: "Hello", }; }, onLoad() {}, methods: { newRender () { uni .createSelectorQuery() .select("#canvas") // 在 WXML 中填入的 id .node((res) => { const element = res.node; // res.context; const context = element.getContext("2d"); // 绘制红色正方形 context.fillStyle = "rgb(200, 0, 0)"; context.fillRect(10, 10, 50, 50); // 绘制蓝色半透明正方形 context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(30, 30, 50, 50); // context.draw(); }) .exec(); } }, }; </script> <style> </style>

在您代码的基础上运行，虽然提供的代码在安卓真机绘画成功，但是部分方法在安卓真机还是存在异常 下面这段代码中 context.beginPath() context.lineCap = ‘round’ context.lineWidth = 20 context.moveTo(20, 20) context.lineTo(20, 100) context.lineTo(150, 100) context.strokeStyle = ‘#ffffff’ context.stroke() 其中 lineCap lineWidth strokeStyle 方法在支付宝开发者工具中显示正常，但是在安卓真机中没有生效

回复 d***@163.com: 问题大概是这里了，你可以使用原生工程测试在这些 api，是否存在问题，如果也有问题，需要给支付宝社区反馈了。uniapp 的编译代码并不区分模拟器和真机

回复 DCloud_UNI_OttoJi: 刚刚已经用支付宝小程序 原生代码开发，安卓真机绘画是正常的，所以问题可能还是uni-app这边

回复 d***@163.com: 你怎么写的，测试了哪些机器。我使用 vue2 + 小米 13 真机调试，显示 ok。看我补充的评论

回复 d***@163.com: 提供你的原生工程和 vue2 工程吧，放到一个压缩包里，代码简单点，不要额外的业务逻辑，我们是不是有什么东西没说清楚

回复 DCloud_UNI_OttoJi: 谢谢，已经定位到自己代码的问题了 ，不能把 element context 放在data()中,要放到最外部 this.element = res.node; this.context = this.element.getContext(“2d”);

回复 d***@163.com: 好，那就行，如果后续有其他问题也欢迎反馈

针对你提到的uni-app中canvas在支付宝小程序运行报错的问题，这通常可能是由于多种原因引起的，包括但不限于API不兼容、权限问题、代码错误等。由于无法直接获取具体的错误信息，我将提供一些常见的排查步骤和代码示例，帮助你定位和解决问题。

1. 检查Canvas API兼容性

首先，确保你使用的Canvas API是支付宝小程序支持的。支付宝小程序对HTML5+ API的支持程度可能不同于其他平台。你可以查阅支付宝小程序官方文档来确认API的兼容性。

2. 权限配置

确保在manifest.json中配置了正确的权限和组件声明，特别是与Canvas相关的权限。

{
  "mp-alipay": {
    "appid": "your-app-id",
    "setting": {
      "urlCheck": false,
      "requestDomain": ["your-request-domain"],
      "wsRequestDomain": ["your-ws-request-domain"]
    },
    "usingComponents": true,
    "permission": {
      "scope.userInfo": {
        "desc": "你的用户信息将用于小程序运行"
      }
      // 其他必要权限
    }
  }
}

3. 示例代码

下面是一个简单的Canvas绘制示例，确保你的代码结构正确，并尝试运行以下代码来验证基本的Canvas功能是否可用。

// 在页面的onLoad或mounted生命周期中
onLoad() {
  const ctx = uni.createCanvasContext('myCanvas');
  ctx.setFillStyle('red');
  ctx.fillRect(10, 10, 150, 75);
  ctx.draw();
},

// 在页面的template中
<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>
  </view>
</template>

4. 错误捕获与日志

在代码中添加错误捕获，可以帮助你更准确地定位问题。

try {
  const ctx = uni.createCanvasContext('myCanvas');
  ctx.setFillStyle('red');
  ctx.fillRect(10, 10, 150, 75);
  ctx.draw();
} catch (error) {
  console.error('Canvas error:', error);
}

5. 查阅控制台与日志

最后，务必查看支付宝小程序开发者工具的控制台输出和日志，以获取更多关于错误的详细信息。

如果上述步骤仍未解决问题，建议查看具体的错误信息，并参考支付宝小程序社区或官方文档寻求更具体的帮助。

回到顶部