<canvas canvas-id="slide-canvas" id="slide-canvas" :disable-scroll="true"></canvas>
this.ctx = uni.createCanvasContext('slide-canvas')
d***@163.com
- 发布：2024-10-18 14:20
- 更新：2024-10-25 16:14
- 阅读：170
产品分类： uniapp/小程序/阿里
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 22H2
HBuilderX类型： 正式
HBuilderX版本号： 4.29
第三方开发者工具版本号： 3.9.22
基础库版本号： 2.9.60
项目创建方式： HBuilderX
操作步骤：
预期结果：
支付宝运行正常
支付宝运行正常
实际结果：
支付宝运行卡顿
支付宝运行卡顿
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. 的问题，严重卡顿问题
没辙了
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
感谢反馈，vue2 还是 vue3 ？ uniapp 编译的代码并不会区分运行平台，看到你说真机 ios 代码可以，安卓不可以。经过你测试只有真机安卓会有问题，你创建一个原生阿里小程序是否会出现这个问题？
看是宿主环境的问题，还是代码不兼容。
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
提供你到完整代码吧，经过我测试 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">
<div>hi</div>
<text>这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
<!-- <uni-badge text="uni - badge" type="default" size="normal" /> -->
<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>
-
d***@163.com (作者)
在您代码的基础上运行，虽然提供的代码在安卓真机绘画成功，但是部分方法在安卓真机还是存在异常
下面这段代码中
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 方法在支付宝开发者工具中显示正常，但是在安卓真机中没有生效2024-10-25 14:49
-
回复 d***@163.com: 问题大概是这里了，你可以使用原生工程测试在这些 api，是否存在问题，如果也有问题，需要给支付宝社区反馈了。uniapp 的编译代码并不区分模拟器和真机
2024-10-25 15:55
-
d***@163.com (作者)
回复 DCloud_UNI_OttoJi: 刚刚已经用支付宝小程序 原生代码开发，安卓真机绘画是正常的，所以问题可能还是uni-app这边
2024-10-25 16:08
-
回复 d***@163.com: 你怎么写的，测试了哪些机器。我使用 vue2 + 小米 13 真机调试，显示 ok。看我补充的评论
2024-10-25 16:14
-
回复 d***@163.com: 提供你的原生工程和 vue2 工程吧，放到一个压缩包里，代码简单点，不要额外的业务逻辑，我们是不是有什么东西没说清楚
2024-10-25 16:17
-
d***@163.com (作者)
回复 DCloud_UNI_OttoJi: 谢谢，已经定位到自己代码的问题了 ，不能把 element context 放在data()中,要放到最外部
this.element = res.node;
this.context = this.element.getContext("2d");2024-10-25 16:33
-
d***@163.com (作者)
自己项目中代码使用的是uni-app vue2, 使用支付宝小程序原生代码开发 canvas绘画在真机Android是正常运行的
2024-10-18 18:06
DCloud_UNI_OttoJi
回复 d***@163.com: 那就奇怪了，我看看
2024-10-18 18:10
d***@163.com (作者)
回复 DCloud_UNI_OttoJi: 问题有定位到吗？或者有没有其它解决方案先临时用用
2024-10-21 09:04
undo_2024
回复 d***@163.com: 解决了吗，我目前也是遇到这个问题
2024-10-23 20:04
d***@163.com (作者)
回复 undo_2024: 没有，ISSUES管理系统都提bug了，官方没啥反馈，估计又是冷处理
2024-10-24 15:17
DCloud_UNI_OttoJi
回复 d***@163.com: 经过我测试，安卓真机可以正常使用 canvas，需要注意的是，支付宝小程序需要开启新版写法，具体看文档。你提到的 hello uni-app 线上也卡顿，那是因为官方没有对支付宝小程序做兼容使用的是废弃的旧版写法，性能较差，后面会对支付宝的 canvas 独立编写逻辑
2024-10-24 20:33
d***@163.com (作者)
回复 DCloud_UNI_OttoJi: 新版写法是什么？文档里只提到uni.createCanvasContext 方法
2024-10-25 09:56
DCloud_UNI_OttoJi
回复 d***@163.com: 支付宝小程序的 canvas 有新版和旧版，具体可以参考 https://opendocs.alipay.com/mini/component/canvas?pathHash=d0b85da4
2024-10-25 11:16
d***@163.com (作者)
回复 DCloud_UNI_OttoJi: 我上面的描述第二种情况，就是支付宝小程序新版canvas 写法，一样有问题
2024-10-25 11:22
DCloud_UNI_OttoJi
回复 d***@163.com: 看我下面回复，我提供了使用代码。请参考我的写法进行修改
2024-10-25 11:54