< view class = "page-body" style = 'top:{{body_top}}px;left:{{body_left}}px;width:{{body_width}}px; height:{{body_height}}px' > < camera class = "camera-layer" ></ camera > < canvas class = "canvas-3d-layer" type = "webgl" id = "3d-canvas" disable-scroll = "true" bindtouchstart = "fn_touch_start" bindtouchmove = "fn_touch_move" bindtouchend = "fn_touch_end" > < cover-view class = "Announcement" catchtap = "fn_click_test" > < cover-view style = "background:{{mycolor}}" >test :{{delta}}</ cover-view > < cover-view bingtap = "fn_click_test2" ></ cover-view > </ cover-view > </ canvas > </ view > |
视图层级结构如上,对于cover-view上绑定的事件fn_click_test在IOS上,点击响应(延迟)会随着程序时间的增加而增加。但是canvas层上的事件却几乎感觉不到延迟(也就是表现正常),有人解答下吗?
实验:手机:IphoneXR / IphoneX
我注释掉<camera>标签,情况有所好转,仅仅是好转,过一会儿又不行了( fn_click_test 在IOS上,点击响应(延迟)会随着程序时间的增加而增加)。
打开<camera>标签,注释掉cavas下的threejs渲染逻辑,正常了。/** 从这里开始我怀疑是渲染效率的问题*/
新建代码片段,发现还是正常的,猜测渲染影响了整个程序。
打开所有threejs渲染代码,在<canvas>上添加事件,发现<cover-view>标签事件出现延迟(随应用启动时间增大而增大),但是<canvas>事件正常。
完全懵圈,来此询问关于<cover-view>层事件传输机制的问题。
希望贵司技术同学能帮忙解答下。
这个问题我们已经在新版本上修复了。 另外,作为临时的解决方案,你可以试试把绘制任务放进 Promise 或 setTimeout 内延后一点执行,类似这样:
canvas.requestAnimationFrame(() => {
setTimeout(() => {
// render goes here })
})
Mark:2019年11月28日
利用临时解决方案
canvas.requestAnimationFrame(() => {
setTimeout(() => {
// render goes here })
})
验证问题结果:成功解决。
多谢,@小程序技术专员-Eric
你好,麻烦具体描述问题流程,提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)